最初のアプリの作成
Apache Cordovaではプロジェクトを作った段階で、起動するアプリの作成ができます。自分でコードを記述してからでは、何かエラーが発生したときにどこが原因かわからなくなり、アプリ開発に慣れていない段階では、その原因を探すことは困難なので、まずは空のプロジェクトでアプリの作成から起動までを行うことで、実際のアプリ開発の流れをつかみましょう。
プロジェクトの作成
プロジェクト名がhelloという名前で作成する場合にはリスト9のように行います。ここではプロジェクト名は"hello"として、パッケージIDは"com.coltware.hello"として作成します。
// cordova create [プロジェクト名] [パッケージID] $cordova create hello com.coltware.hello Creating a new cordova project.
パッケージIDはAndroidでのパッケージ名であり、iOSアプリでは「Bundle Identifier」という項目と同じになります。基本的にはアプリをユニークに管理するIDのようなものと現時点では認識していれ問題なく、またドメイン名を反対から記述するような形式で指定することが慣例となっています。スマホ側に同じIDを持つアプリを2つ同時にインストールすることはできません。
また、パッケージ名は省略した場合には"io.cordova.<プロジェクト名>cordova"という値で設定されます。
プロジェクトの作成が終了すると、リスト10のようなファイルが作成されます。
hello/
├── config.xml
├── hooks
│ └── README.md
├── platforms
├── plugins
└── www
├── css
│ └── index.css
├── img
│ └── logo.png
├── index.html
└── js
└── index.js
この状態では、いずれのOSのための環境も用意されていない状態でのプロジェクトが作成されますので、必要なOS用の環境をこのフォルダ配下で追加をしていきます。また、基本的にはこのwww配下のHTML／CSS／JavaScriptファイルを編集してアプリを開発します。今回は、まだ、これらのファイルを修正は行いません。
Androidアプリのビルドと実行
続いてAndroidアプリのために必要なファイルをインストールするには、helloフォルダに移動してから、リスト11のように実行します。
$cordova platform add android
これでAndroidで必要な設定ファイルやコードが用意されました。このコマンドを実行すると先ほどのplatformsフォルダ配下にandroidというフォルダができあがり、さらにその配下にたくさんのファイルが追加されていることが分かると思います。
このandroid以下がAndroid用のプロジェクトになっています。また、リスト12のようにcordovaのコマンドを使ってもandroid用の設定がインストールされたことを確認できます。
$cordova platform list Installed platforms: android 4.1.1 Available platforms: amazon-fireos, blackberry10, browser, firefoxos, ios, osx, webos
続いてアプリのビルドをリスト13のように行います。
$cordova build android
: (省略)
BUILD SUCCESSFUL
: (省略)
/Users/coltware/hello/platforms/android/build/outputs/apk/android-debug.apk
ビルドの最後に"BUILD SUCCESFUL"と表示され、apkファイルが作成されていればビルドは成功です。
続いて、リスト14のようにエミュレータや実機を使ってアプリを実行してみます。
$cordova emulate android // エミュレータを使う場合 $cordova run android // 実機を使う場合
Androidのエミュレータでは起動などにも非常に時間がかかるので筆者はあまり行っていません。
ハイブリッドアプリの場合には、実機ベースでの確認する機会もネイティブアプリほど多くないため、実機で確認できる場合にはそちらをおすすめします。
iOSアプリのビルドと実行
基本的な流れはAndroidと変わりません。
$cordova platform add ios
こちらでiOS用の必要なファイルが準備されました。インストールされていることは先ほどのAndroidと同様に確認できます。
また、ビルドも先ほどのAndroidと同様、リスト16のように行います。
$cordova build ios : (省略) ** BUILD SUCCEEDED **
最後に「BUILD SUCCEEDED」のように表示されれば終了です。
$cordova emulate ios
実行するとエミュレータが起動し、アプリが起動します。また、iOSの場合には実機にて実行する場合には、コマンドから実行するよりは、Xcodeから実行することをおすすめします。理由は、デバッガが起動することと、リスト18のようなサイニングエラーが表示されます。
=== BUILD TARGET HelloCordova OF PROJECT HelloCordova WITH CONFIGURATION Debug === Check dependencies Code Sign error: No matching provisioning profiles found: : (省略) ** BUILD FAILED **
Xcodeにて実行する場合には、platforms/ios/HelloCordova.xcodeprojというプロジェクトを選択してください。openコマンドでも起動できます。
Xcodeでプロジェクトを開くと図4のようになります。（1）画面左上で端末を選択すると、（2）実際に実行する環境が選べます。実機を接続していれば実機も表示されますので、それらを選んで実行すればエミュレータもしくは実機での実行が可能です。このように部分的ではありますが、Xcodeを使った方が便利な部分があれば、それらを選択できます。実際にiOSアプリの場合にはそちらの方がメインの使い方になるのではないかと思います。
ただし、iOSの場合には実機での実行に関しては、非常に癖があることも事実です。慣れないうちにはいろいろと問題にぶつかりますので、身近にiOSアプリのエンジニアがいる場合には助けてもらうとよいでしょう。または、プロジェクトの作成からアプリの実行まででよいので、実際のネイティブアプリの開発を経験してみることをおすすめします。
ブラウザを使った確認
ハイブリッドアプリとして作成しているにもかかわらず、いつも実機、もしくは実機ベースのエミュレータを使わないと確認できないのでは非常に面倒です。そのため、Apache Cordovaはブラウザを使っての動作が確認できます。
ただし、その場合にはApache Cordovaが必要としているイベントなどがありません。もちろん、自前で用意しつつ通常のブラウザで確認することもできますが、Chromeには「Ripple Emulator」というモバイルアプリをエミュレートする為のプラグインがあり、こちらをインストールするとブラウザからでも簡単に確認が可能です。Ripple Emulatorとは、モバイルエミュレータで通常のブラウザでは使えない機能（GPS、コンパス、モーションセンサ等）などをエミュレートするので、Apache Cordova（PhoneGap）などのエミュレータとしても使えます。
また、ブラウザから確認するためには、リスト19のようにすると内部で確認用のWebサーバが起動しますので、ブラウザから指定のURLを開いてください。
$cordova serve Static file server running on: http://localhost:8000 (CTRL + C to shut down)
ブラウザを開いてからRipple Emulatorを（1）のアイコンを押して有効にします。そこで確認するOSの一覧が表示されますので、AndroidもしくはiOSをクリックするとブラウザ内の画面が切り替わりますので、（2）で各種イベントの発行をしながら動作を確認できます。
