Cordovaでハイブリッドアプリを作成する

Androidandroid studio,cordova,Genymotion,node.js,npm

Cordova（コルドバ）でハイブリッドアプリを作成し、エミュレータと実機で動作するまでの手順です。
確認した環境はWindowsです。

 

このサイトを参照しました


node.jsとnpmをインストールする

まずはこちらからnode.jsをダウンロードし、インストーラからインストールします。

cordovaをインストールする

コマンドプロンプトか、インストール済みであればGit Bashで下記コマンドを実行します。

$ npm install -g cordova
$ cordova -v //バージョンの確認

プロジェクトを作成する

任意のパスへ移動し、プロジェクトを作成します。
私はC:\Users\ユーザー名\配下に作成しました。

$ cordova create HelloWorld //プロジェクト名は任意のものでOK
$ cd HelloWorld //作成したプロジェクト内に移動する

www配下が公開ディレクトリになります。

 

動作デバイスを追加する

androidで動作したいのでそれを追加します。
必要に応じてWEBブラウザも。

$ cordova platform add android
$ cordova platform add browser

エミュレータで動作確認する

まずはAndroid Studioをインストールします。


インストール完了後、下記コマンドを実行しエミュレータを起動させます。

$ cordova run android

下記のようなエラーが表示された場合、Android Studioでの設定が必要です。

Error: Please install Android target "android- XX".

詳しくは下記ページを参照してください。

BIOSで仮想化の設定を忘れずにしてください。

私のPCはIntelのCore搭載機種ではないのでそれの対応に結構苦労しました。
その場合はGenymotionをインストールします。


アカウントを作成する必要がありますが、個人利用であれば無料です。

私の場合、何故かGenymotionが「Loading Plugins…」で全く起動しないという事象が発生しました。
その場合はVurtualBoxに設定を追加します。
「ファイル」→「環境設定」→「ネットワーク」で右側のプラスボタンを押下します。
それでGenymotionが起動するようになりました。

Genymotionを使用する場合、まず「Add」で実行するデバイスを追加します。
デバイスを選択し、「Start」で起動します。
その後下記コマンドを実行するとアプリが起動します。

$ cordova run android

実機で確認する

コマンドを実行しビルドします。

$ cordova build android

実行が成功すると下記パスにデバッグ用のアプリが作成されます。
それをメール添付などでAndroid端末に送り、タップするとインストールされます。
これで実機で確認することができます。

少し大変かもしれませんが、是非トライしてみてください。

Androidandroid studio,cordova,Genymotion,node.js,npm