このページでは、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を実行しなくてもアプリケーションの実行ファイルが生成されてます。