PhoneGap（Apache Cordova1.5）+

[hokada]

Curlのモバイル開発環境「Caede」と同様のアーキテクチャ「ハイブリッド方式」であるPhoneGap を触ってみました。

※ハイブリッド方式とは、ネイティブアプリの中に組み込まれたWebブラウザ機能を利用して、HTML/JavaScript/CSSで開発ができ（我々の製品の場合は、Curl言語のみ）、さらにネイティブ機能へもアクセスできる方式です。これによって、AndroidならJava、iOSならObjective-Cでというように別の言語で開発する必要がなくなります。


現在PhoneGapはAdobeに買収され、Apache Software Foundationへソースを寄贈されたようです。また、Apache Cordovaに名前も変更されたようです。（途中、Apache Callbackという名前になったときもあったようですが。）
（2012年3月時点ではバージョン1.5）

さっそく、AndroidでPhoneGapのGetting Startedをやってみたいと思います。

基本的には以下の操作をすればいいはずです。
http://phonegap.com/start#android

と思いきや、まだ最新の1.5用には書き換えていないみたいですね。

まず、以下のファイル名が変更されているようです。

• phonegap.js => cordova-1.5.0.js
  
• phonegap.jar => cordova-1.5.0.jar
  

また、AndroidManifest.xmlの「android:icon="@drawable/icon"」を、「android:icon="@drawable/ic_launcher"」に変更しなければならないようです。

さらに、記載はされていませんがxmlディレクトリをresディレクトリ配下に作成して、
cordova.xmlとplugins.xmlをコピーしないと以下のExceptionでクラッシュしてしまった。

Code:

java.lang.RuntimeException: Unable to start activityComponentInfo{com.curl.lab.phonegap/com.curl.lab.phonegap.HelloActivity}:
android.content.res.Resources$NotFoundException: Resource ID #0x0
....

パッケージもcom.phonegapからorg.apache.cordovaに変わっているので注意を！例えば以下のようなコードになります。

Code:

import org.apache.cordova.DroidGap;
mport android.os.Bundle;

public class HelloActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

これで実行したら、無事うまく動きました。

ちょっと手順が多いですが、現在我々のCurlモバイル開発ツール「Caede」も類似の手順なので、次のバージョンではもっとシンプルにセットアップやプロジェクト作成ができるよう心がけたいと思います。（現在開発中）

さらにGPSのAPIも簡単に試してみました。これもちゃんと動きました。

Code:

navigator.geolocation.getCurrentPosition(
   function (position) {
      var c = position.coords;
      alert('Latitude:' + c.latitude + 'Longitude:' + c.longitude);
   },
   function (error) {
      alert(JSON.stringify(error));
   }
);

これだけでは面白くないので、趣味でJavaScriptのゲームエンジンenchant.js を使って、Android上でゲームを動かしてみました。ダウンロードしたファイルにサンプルがありましたので、それを上記PhoneGapのプロジェクトにコピーしました。


（見づらいですが、画面上の方でクマが走っています。）
とりあえずは上記のサンプルを添付しておきます。（手元にあるAndroid4.0の実機で確認しました。）

ちなみに、終わった後気付いたのですが、こっちにApache Cordovaのサイトがありました。
http://incubator.apache.org/cordova/



触ってみた結果、コンセプト通り、HTML/CSS/JavaScriptを知っている方にとっては、なじみやすいと思います。
これに、Sencha やjQuery Mobile などを学習すれば、モバイル用UIが開発できます。ただ、jQuery Mobileは触ってみた感じですとちょっとクセがあるように感じます。それはまた違う回で紹介したいと思います。


ちなみに、「Caede」はCurl言語のみで「UI、スタイル、ロジック」のすべてをコーディングすることが可能となっています。また、Curlでモバイルアプリのみならず、デスクトップ上のリッチクライアント・アプリまで開発が可能です。これをいかに学習コストを下げて開発することができるようになることを目指して製品開発をしています。