iOS7時代のPhoneGap〜Cordova 3.1 RC1を試してみる(その1)

スマートフォン向けアプリを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.htmlbodyを下記のように書き替えます。

<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で動作するか確認が必要だと思われます。
この点を含め、次回の記事でさらに見ていくことにします。

この記事を書いた人

井上 研一

株式会社ビビンコ代表取締役、ITエンジニア/経済産業省推進資格ITコーディネータ。AI・IoTに強いITコーディネータとして活動。2018年、株式会社ビビンコを北九州市に創業。IoTソリューションの開発・導入や、画像認識モデルを活用したアプリの開発などを行っている。近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。日本全国でセミナー・研修講師としての登壇も多数。