前回は、Cordova／PhoneGapのスケルトンアプリを生成しブラウザで動作確認を行った。
今回は、それぞれのプラットフォームを追加し、シミュレータで動作確認をする。
1 事前準備
Cordova／PhoneGapプロジェクトをAndroid用にビルドし、シミュレータで動作させるためには、次のものが必要になる。
- JDK1.7
- Apache Ant
その1でインストールしたJREはただの実行環境でありコンパイルには使えないため、改めてインストールする必要がある。
また、Cordova／PhoneGapプロジェクトのビルドにはビルドツールとしてApache Antを使用するため、こちらも必要となる。
JDKのインストール
公式サイトから Java SE 7u55(2014.5.12現在)の JDKダウンロードページを開き、環境に合わせたインストールファイルをダウンロードする。
Windowsの場合
ダウンロードした.exeファイルを実行し、インストーラに従ってインストールする。
Macの場合
ダウンロードした.dmgファイルをマウントし、中のインストーラを実行する。
環境変数とパスの設定（Windows、Mac共通）
インストールが完了したら、以下の環境変数を追加する。
変数名＝JAVA_HOME 値＝インストールしたJDKディレクトリのパス
また、インストールしたJDKディレクトリ中のbinディレクトリにパスを通す。
Apache Antのインストール（Windowsのみ）
Macには標準でApache Antがインストールされているが、Windowsにはインストールされていないので下記の手順に従ってインストールする必要がある。
- 公式のダウンロードページからバイナリーのzipファイルをダウンロードする。
- ダウンロードしたzipファイルを展開し、展開したディレクトリを任意の場所へ設置する。
- 次の内容で環境変数を追加する。
変数名＝ANT_HOME 値＝設置したディレクトリへのパス
例）C:\bin\apache_antとして設置した場合、ANT_HOMEの値はC:\bin\apache_antとなる。 - 設置したディレクトリ内のbinディレクトリへパスを通す。
例）設置場所が上記の場合、環境変数Pathに%ANT_HOME%\binを追加する。
パスを通した後、黒い画面でant -versionを実行し、バージョン情報が表示されれば完了となる。
2 Androidシミュレータのインストールと設定
ダウンロードとインストール
下記の手順に従い、Android SDKをインストールする。
- 公式のダウンロードページを開き、「Download the SDK」のリンクをクリックする。
- ライセンス許諾のチェックと、自分の環境に合わせて32bitか64bitのどちらかをチェックし、ダウンロードボタンをクリックする。
- ダウンロードが完了したらzipファイルを展開し、任意の場所へ設置する。
- 設置したディレクトリ→sdkディレクトリを開き、
platfom-toolsとtoolsディレクトリが存在するのを確認したら、その2箇所へパスを通す。
パスを通した後、黒い画面でandroidコマンドを実行し、Android SDK Managerが起動したらインストールは完了。
続いて、SDKライブラリのインストールを行う。
SDKライブラリのインストール
※プロキシを通してネットへ接続している場合
先にSDK ManagerのToolsメニューからOptions...を選択し、プロキシサーバの設定をしておくこと。
まず「Tools」の中から「Android SDK Tools」、「Android SDK Plarform-tools」、「Android SDK Build-tools」の最新版のStatusが「Installed」となっている事を確認する。
「Not Installed」となっている場合はチェックをする。
次に、任意でAndroid各バージョンの「SDK Platform」と「ARM EABI v7a System Image」をチェックする。
今回は、Android 4系（API 14以降）全てをチェックした。
最後に「Install n Package...」ボタンをクリックすると、ダウンロードとインストールが始まる。
※ n はチェックした数によって異なる。
最後に、シミュレータ（AVD）の設定を行う。
シミュレータ（AVD）の設定
SDK Managerの「Tools」メニューの中から「Manage AVDs...」を選択すると、「Android Virtual Device Manager」が起動する。
初めて起動した時は何も登録されていないので、「New...」ボタンをクリックして仮想デバイスの作成画面を開く。
作成画面の中で必須項目がいくつかあるが、「AVD Name」に任意の名前を入力し（名前の中にスペースを含めることはできない）、「Device」の中から任意のものを選択すると、あらかたの項目はプリセット値が自動的に設定される。
後は「Skin」の項目の中から任意のものを選択し、必要に応じて残りの項目を設定していけばよい。（※もちろんプリセット値を変更してもよい。）
最後に「OK」をクリックして、仮想デバイスの作成は完了。
Android Virtual Device Managerに設定した名前で仮想デバイスが追加されているはずである。
なお、作成した仮想デバイスを選択し、「Start...」をクリックするとシミュレータが起動する。（起動するまで、結構時間がかかる）
3 iOSシミュレータのインストールと設定（Macのみ）
まずはXcodeをインストールする。
※前回、Homebrewのインストールする時にXcodeをインストールした場合は不要。
Xcodeのインストールが完了したら、黒い画面で下記のコマンドを実行する。
sudo npm install -g ios-sim
ios-simを実行し、デバイスのシミュレータが表示されれば完了となる。
前置きがだいぶ長くなってしまったが、ようやく目的のシミュレータによる動作確認に入ることができる。
4 Cordovaの動作確認
前回作成したCordovaプロジェクトは、そのままではシミュレータで動作させることができない。
まずは、プロジェクトにデバイスのプラットフォームを追加してやる必要がある。
プラットフォームの追加は黒い画面を開き、Cordovaプロジェクトのトップディレクトリへ移動して下記のコマンドを実行する。
cordova platform add android
［Windowsでの実行例］
プラットフォームの追加が正常に終了していれば、Cordovaプロジェクトのトップディレクトリ配下のplatformsディレクトリ内に追加したデバイスのディレクトリが追加されているはずである。
プラットフォームを追加したら、次のコマンドを実行することでビルドからシミュレータの起動、シミュレータ内でのアプリの実行までしてくれる。
cordova emulate android -d
［Androidシミュレータの表示］
なお、プラットフォームの追加、シミュレータの表示確認はAndroidで行ったが、iOSの場合は各コマンドのandroidをiosへ変えてやればよい。ただし、当然のことながらMacでしか動作しない。
5 PhoneGapの動作確認
PhoneGapプロジェクトもCordovaと同様にプラットフォームを追加してやる必要がある。
プラットフォームの追加は黒い画面を開き、PhoneGapプロジェクトのトップディレクトリへ移動して下記のコマンドを実行する。
phonegap install android
［Windowsでの実行例］
ビルドからシミュレータ内でのアプリの実行までは、下記のコマンドにて行う。
phonegap run android
[Androidシミュレータの表示]
iOSで確認したい場合は、Cordovaと同様にandroidをiosへ変えてやればよい。
長い前置きを乗り越え、これでようやくCordova／PhoneGapで各デバイス用のスケルトンアプリを作成できることが確認できたと言える。
次回はいよいよ最終回。Sencha Touch2とCordova／PhoneGapを連携させ、デバイス固有の機能を少し使ってみるところまで書く予定。
2014.06.25追記
だいぶ間が開いたけど、その４を書きました。