井上 研一 スマートフォン向けアプリをHTML5で開発できるフレームワークであるPhoneGapですが、きちんと？iOS7に対応したPhoneGap 3.1は、現時点ではまだリリースされていません。
ただ、Apache Cordovaの方では、3.0.10というバージョンが3.1 RC1相当だということで、とりあえず試してみることが出来ます。
※PhoneGapとCordovaですが、基本的には同じものです。ただ、Adobeが様々なツールとともに展開するときはPhoneGap、Apache Software Foundationで素のフレームワークとして提供されるときがCordovaというのが、ざっくりとした理解になると思います。
Cordova 3.1 RC1をインストール
最近のCordova（PhoneGap）は、node.jsのパッケージ管理ツールであるnpmでインストールすることになっています。
そこで、まずはnpmのインストールが必要になりますが、ここではnodebrew経由でnpmをインストールすることにしましょう。
curl -L http://git.io/nodebrew | perl - setup
画面で指示されるとおり、PATHを ~/.bashrcとかに追加して、source ~/.bashrcとかで読み込みます。
export PATH=$HOME/.nodebrew/current/bin:$PATH
PATHの読み込みが終わったら、インストールできるnode.jsのバージョンを見てましょう。
nodebrew ls-remote
（わらわら表示される）
ここはひとつ、現時点での最新バージョンであるv0.11.7をインストールしてみます。
もう少し古いバージョンを使いたくなったとしても、nodebrewを使っているので、複数のバージョンを使い分けできて便利ですね。
nodebrew install v0.11.7 #最新版ならlatestと指定しても良い
インストールが終わったら、.bashrcに使うバージョンを記述しておきます。
nodebrew use v0.11.7
nodebrewでnode.jsのインストールを行うと、既にnpmも入っている状態です。
すかさず、Cordovaのインストールもやってしまいます。
※現時点では、バージョン指定をしないと、cordovaは3.0.9がインストールされます。
sudo npm install -g [email protected]
これでCordova 3.1 RC1のインストールは完了です。
プロジェクトを作る
cordova create hello net.inoccu.Hello Hello
cd hello
cordova platform add ios
cordova platform add android
cordova build iOS
cordova build android
まず、createでプロジェクトを作ります。引数は、最初のhelloがディレクトリ、次がパッケージ名、最後がプロジェクト名です。
プロジェクトが出来たらhelloディレクトリに移動して、プラットフォームの追加、そしてビルドを行います。
プラットフォームを追加するには、それぞれのプラットフォームで必要なSDKをインストールしておく必要があります。（この時点で、iosプラットフォームを追加するにはMacしかダメということになる。）
Xcodeで実行する
iOSアプリを実行するには、platforms/ios/Hello.xcodeprojをXcodeで開き、Runします。
実行されました。
プラグイン機構が変わっている
たとえば、www/index.htmlのbodyを下記のように書き替えます。
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', function() {
alert("device version:" + device.version);
})
</script>
</body>
Cordova 2.x（PhoneGapでも同様。以下同）なら、デバイスのバージョンがアラートで表示されるはずですが、Cordova 3.xでは何も表示されません。アラート自体が出てこないあたりを考えると、device.nameがundefinedなのではないかということが予想されます。
Cordova 3.xでは、Deviceといった、今までならCordovaでプロジェクトを作りさえすれば使えたようなAPIがすべてプラグイン化されています。プラグインはデフォルトではインストールされていないので、プロジェクト毎にインストールを行う必要があります。
cordova plugin add org.apache.cordova.device
とすると、自動的にDevice APIのプラグインがインストールされ、既にbuildしたプラットフォームについても、プラグインが追加されます。
具体的には、下記のようなことが自動化されています。
- pluginsディレクトリに、CDVDevice.hとCDVDevice.mが追加される
- www/pluginsディレクトリに、org.apache.cordova.deviceディレクトリとdevice.jsファイルが追加される
- www/cordova_plugins.jsファイルにDeviceプラグインの記述が追加される
ちなみに、
cordova plugin rm org.apache.cordova.device
とすると、addで追加されたことがすべて削除されます。
プラグインを追加した後で同じアプリを実行すると、きちんとダイアログにバージョンが表示されます。
とりあえずのまとめ
Cordova 3.xは、2.xとは大きく変わっています。
少なくとも、wwwディレクトリの内容をコピーするだけでは3.xでは動作せず、アプリで使用しているAPIについて、すべてプラグインとしてインストールする必要があります。
また、既存のプラグインを使用している場合や、自身でプラグインを作っている場合は、3.xで動作するか確認が必要だと思われます。
この点を含め、次回の記事でさらに見ていくことにします。