Cordova導入覚書

2014/12/28 owljey
Audioプラグイン追加
Crosswalk追加

CorodovaはPhoneGapとも呼ばれている、HTML5のプログラムをマルチプラットフォームでビルドできる環境です。早い話がHTML5アプリをAndroid、iOS、Windowsアプリ用パッケージとして手っ取り早く作れます。(iOS用はもちろんMacとライセンスが必要)

ただ、導入環境にくせがあるので、Windowsにて、開発環境からではなくコンソールベースで使うやり方の場合をここに書いておきます。Androidの設定も一緒に行う場合です。
ま、この手のものはバージョンや開発環境の変化でまったくやり方が変わるので、2014年12月時点の話だと思ってください。
Javaは導入済みとします。

http://cordova.apache.org/

<セットアップ>

まず、Node.js(http://nodejs.org/)を導入します。インストーラとして使うようです。
その後、コマンドプロンプトを起動して、下記のコマンドを実行します。
ネットワーク環境は必須です。


> npm install cordova -g
> npm install ant-g

これでcordovaの環境は導入できました。

その後、Androidの開発環境サイトにある installer_r24.0.2-windows.exe を実行してAndroidSDKを導入します。現在、cordovaはAPI Level19がデフォルトになっているので、これを導入するとスムーズに進みます。

コマンドプロンプト上で環境変数を追加します。
自分でバッチファイルに設定するなり、システムプロパティ→詳細設定→環境変数で設定するなりは自由に。


set Path = %Path%;C:\Users\xxxx\AppData\Local\Android\android-sdk
           \platform-tools;C:\Users\xxxx\AppData\Roaming\npm\node_modules
           \ant\ant\bin;
set ANDROID_HOME = C:\Users\xxxx\AppData\Local\Android\android-sdk;

<Androidでビルド>

コマンドプロンプトを起動します。
新しいプロジェクトを作成します。例文どおりにhelloとしてみます。


> cordova create hello com.example.hello MyHello


作成されたhelloフォルダに移動します。


> cd hello


自分のHTML5プログラムを追加するときはwwwフォルダ下に追加します。
試しにここのindex.htmlをブラウザにドラッグすれば挙動が確認できます。

プラットフォームにandroidを追加します。


> cordova platform add android

いよいよビルド


> cordova build android

エラーが出なければよし。
問題が出るとすれば、antへのパスが通ってないか、バージョンに適したSDKが入っていないあたりが原因です。

■エミュレータで確認


> cordova run android

これでデフォルト設定のエミュレータでアプリが起動します。
これで起動するのが思ったとおりの環境でない場合はAndroid SDK Tools\ADV Managerで任意の仮装環境を立ち上げておいてください、そこに転送されます。

■実機で確認


> cordova run android --device

で大丈夫です。
これでエラーが出る場合は、
・Android端末のデバイスドライバが導入されていない(デバイスマネージャを確認)
・Android側で「開発者向けオプション」のUSBデバッグを許可する等が設定されていない。

などを確認してみてください。

以上。