このページでは、PhoneGapをインストール後にサンプルプロジェクトを作成し、エミュレータで起動するまでを紹介します。
PhoneGapの導入
PhoneGapをインストールし、phonegapコマンドを使えるようにします。
事前準備
- Node.jsがインストール済み
- Antがインストール済み
- Android SDKがインストール済み
PhoneGapのインストール
npmからPhoneGapをインストールします。
$ npm i -g phonegap
インストールが終わったら、PhoneGapのインストール状況を確認します。PhoneGapのコマンド一覧などが参照できます。
$ phonegap ... Commands: create <path> create a phonegap project build <platform> build a specific platform install <platform> install a specific platform run <platform> build and install a specific platform local [command] development on local system remote [command] development in cloud with phonegap/build platform [command] update a platform version plugin [command] add, remove, and list plugins help [command] output usage information version output version number ...
プロジェクトの作成
PhoneGapコマンドから以下の内容を持つプロジェクトを作ります。このプロジェクトはAndroidやiOSなどのプラットフォームに共通のプロジェクトです。
プロジェクト名
まず、フォルダ名、パッケージ名、プロジェクト名は以下の通りとします。 ちなみにフォルダ名以外は未入力でも、デフォルトで設定されるので特に決めなくても大丈夫です。
| 今回の入力値 | デフォルト値 | |
|---|---|---|
| フォルダ名 | Hello | －（未入力不可） |
| パッケージ名 | com.shoarai.hello | com.phonegap.helloworld |
| プロジェクト名 | HelloWorld | Hello World |
プロジェクトの生成
phonegapコマンドで上記の内容を持ったプロジェクトを生成します。
$ phonegap create Hello com.shoarai.hello HelloWorld
作成されるHelloフォルダの構成は以下の通りです。wwwフォルダ内にプラットフォームに共通するHTML、JavaScriptファイルがあります。
Hello ├─ .cordova ├─ merges ├─ platforms ├─ plugins └─ www
Helloフォルダに移動します。
$ cd Hello .../Hello>
アプリケーションの作成
作成したプロジェクトからアプリケーションの実行ファイルを作成します。今回はAndroidアプリを作成しますが、PhoneGapはiosやWindowsPhoneのアプリも作成できます。
プロジェクトのビルド
phonegapコマンドでプロジェクトをビルドします。AndroidアプリケーションとしてビルドするためにAndroid SDKを利用しています。
$ phonegap build android ... [phonegap] successfully compiled Android app
Androidアプリとしてビルドすると、platformsフォルダ内にandroidフォルダが作成されます。また、iOSとしてビルドするとiosフォルダが追加されることになります。 それぞれのフォルダ内に生成されるplartforms/…/wwwフォルダは、Hello/wwwフォルダがコピーされたものです。つまり、Hello/www内を編集して、 ビルドすると指定したplartforms/…/wwwが更新されることになります。
Hello ├─ .cordova ├─ merges ├─ platforms │ └─ android │ ├─ assets │ │ └─ www │ ... ├─ plugins └─ www
エラー
ビルド時に起こったエラーを記述しておきます。
Please install Android target 19 (the Android newest SDK)
これはPhoneGapが対応するAndroid SDKが入ってないよ！ということです。解決策は2つ。「①対応するSDK Platformをインストールする」または「②PhoneGap側のSDKの対応バージョンを変更する」です。 SDK側を合わせるか、PhoneGap側を合わせるかということです。
①は、エラー文にあるSDKバージョン（ここでは19）をインストールします。
②は、対応するバージョンを.cordova/lib/android/cordova/3.1.0（PhoneGapのバージョン）/frameworkフォルダ内のproject.propertiesファイルのtargetの値で確認できます。 ここではtarget=android-19をインストール済みのSDKのバージョン（android-18など）に変更します。
アプリケーションの実行
作成したAndroidアプリを実行します。
エミュレータの起動
まず、アプリを実行するエミュレータを起動します。AVD（Android Virtual Device Manager）を実行し、起動するエミュレータのAVD名を確認します。もしくは起動するAVDを新規作成します。
$ android avd
ここでは、AVD名がNexus5のエミュレータを起動します。
$ emulator -avd Nexus5
アプリケーションの実行
作成したAndroidアプリケーションをエミュレータで実行します。
$ phonegap run android ... [phonegap] successfully installed onto emulator
Androidアプリケーションをエミュレータで実行できました！実行前に実機を接続しておくと、優先して実機で実行されます。 このときは[phonegap] successfully installed onto deviceが表示されます。
ちなみに
今回は説明のためにアプリケーションのビルドと実行を分けましたが、phonegap run androidを実行すれば、phonegap build androidを実行しなくてもアプリケーションの実行ファイルが生成されてます。