下記は「Cordova5.1.1」で行っています。
Cordova5.0.0未満の場合は、コマンドの書式に違いがある場合があります。
前提
1.MacOSXであること ※1
2.AndroidSDKがインストール済みであり、Android仮想デバイス(AVD)の設定ができていること
Mac OS X 上に Android 開発環境を構築する 等を参照
※1 iOS Simulator が起動できるのがMaxOSのみのため
iOS Simulator は App Store から Xcode を インストールすると同時にインストールされます。
各種インストールとPATHの設定
Node.jsのインストール
cordovaコマンドを導入するために Node.js をインストールします。
上記のサイトにアクセスし表示に従ってインストールします。
インストールしたら、インストールが成功しているか確認するためにバージョンを表示するコマンドを実行。
node -v
実行結果例) v0.12.3
Node.js をインストールするとnpmも同時にインストールされるためこちらもインストールが成功しているか確認するためにバージョンを表示するコマンドを実行。
npm -v
実行結果例) 2.9.1
cordovaコマンドラインツールのインストール
sudo npm install -g cordova
※-g オプションはグローバルな領域にインストールするためのオプションです。
インストールが成功しているか確認するためにバージョンを表示するコマンドを実行。
cordova -v
実行結果例) 5.1.1
AndroidSDKのPATHを通す
.bash_profile に下記のPATHを追加する。
※.bash_profile がない場合は、新規作成
export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/tools/
export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/platform-tools/
又は
echo "export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/tools/" >> ~/.bash_profile
echo "export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/platform-tools/" >> ~/.bash_profile
反映させるために下記コマンドを実行
source ~/.bash_profile
反映されたか確認するためにAndroidコマンドとadbコマンドが実行できるか確認します。
android -h
実行すると Help の内容(オプション)が複数行にわたって表示されます。
(実行結果は省略)
adb version
実行結果例) Android Debug Bridge version 1.0.32
プロジェクトの新規作成とプラットフォームの追加
プロジェクトの新規作成
プロジェクトを作成したいディレクトリに移動して下記のコマンドを実行します。
cordova create hello com.example.hello HelloWorld -d
・hello ディレクトリを作成し
・com.example.hello という識別子で(Andoroidで必要)
・HelloWorld というアプリ名
作成するというコマンドになります。
※-d オプションは途中経過を表示するオプションです。
プラットフォームの追加
iOS
cordova platform add ios
Android
cordova platform add android
その他に下記のプラットフォームの追加もできます。
cordova platform add wp8
cordova platform add windows
cordova platform add amazon-fireos
cordova platform add blackberry10
cordova platform add firefoxos
プラットフォームの確認
cordova platform ls
実行結果例)
Installed platforms: android 4.0.2, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos
プラットフォームの削除
プラットフォームを外すには下記のコマンドをそれぞれ外したいプラットフォームに置き換えて実行します。
例)Andoroidの場合
cordova platform remove android
又は
cordova platform rm android
シミュレータで確認
iOS
cordova emulate ios -d
実行すると実行結果がつらつらと表示され
「** BUILD SUCCEEDED **」
と表示されてシミュレータが立ち上がり、続いてアプリが立ち上がってきます。
Andoroid
cordova emulate android -d
実行すると実行結果がつらつらときて
Waiting for emulator... としばらく表示されますがあせらずしばらく待ちます。
※ 開発環境のマシンスペックによって立ち上がるまでに時間に差があるでしょう。
※ ストレージを結構食うのであらかじめ数GBの空きをあけておくの望ましいかも...
※ MacBook Air Core i5 メモリ 4GB で下記のような時間がかかります。
ーーーー
(略)
BUILD SUCCESSFUL
Total time: 16.678 secs
(略)
ーーーー
と表示されてシミュレータが立ち上がり、続いてアプリが立ち上がってきます。
補足
ant がないと言われた場合
brew install ant
以下のようなエラーが出る場合
Starting emulator for AVD 'MYAVD'
emulator: ERROR: x86 emulation currently requires hardware acceleration!
Please ensure Intel HAXM is properly installed and usable.
CPU acceleration status: HAX is not installed on this machine (/dev/HAX is missing).
以下のサイトからAndroidのエミュレータを高速にするために、Intel Hardware Accelerated Execution Manager(HAXM)というソフト [ haxm-macosx_r05.zip ] をダウンロードしてインストールする。
Intel® Hardware Accelerated Execution Manager
ブラウザ
cordova serve android
実行結果例)
Static file server running on port 8000 (i.e. http://localhost:8000)
CTRL + C to shut down
http://localhost:8000 にアクセスすると確認ができます。
実機で確認
iOS
上記「プロジェクトの新規作成」の例で作成した場合
[ cordova emulate ios -d ] を実行した後に
hello > platforms > ios > HelloWorld.xcodeproj に Xcode のプロジェクトファイルがあるので、それを Xcode で起動してネイティブアプリの開発の手法に則って実機でテストすることができます。
※実機で確認すには「Apple Developer Program」 (有料)が必要になります
iPhone(iOS)アプリを実機でテストする方法【初心者向け】等を参照
Andoroid
MacにUSBでAndroidの実機を接続して下記のコマンドを実行します。
cordova run android
おまけ
cordovaコマンドラインツールのアップデート
sudo npm update -g cordova
[参考サイト]
Apache Cordova Documentation (5.1.1)
HTML5ハイブリッドアプリ(Cordova)の環境構築
Mac OS X 上に Android 開発環境を構築する