[HTML5でAndroidアプリ開発] PhoneGapで雛形を作成して動かしてみよう

今日から何回かに分けて、HTML5でAndroidアプリを開発する記事を書いていこうと思います。
目標は、Google Playストアでの公開です！

第1回となる今回は、PhoneGapの雛形を作って、Androidで動作させるまでを見ていきたいと思います。

PhoneGapとは

PhoneGapについてWikipediaで調べてみると・・・

PhoneGap（フォンギャップ）は、Adobe(当時ニトビ・ソフトウェア社)によって開発されているオープンソースのモバイルアプリ開発フレームワーク。これを使うと、JavaScript、HTML、CSSを使って、モバイルアプリを開発することができる。モバイルデバイスのカメラ、GPS、加速度センサーなどにアクセスすることができる。PhoneGapは、Webアプリケーションとモバイルデバイスとの橋渡しを行う。
iPhone、Palm WebOS、Google Android、Windows Mobile、Symbian OS、BlackBerryなどのモバイルデバイスに対応している。
2011年10月3日、Adobeは開発者向けカンファレンス「Adobe Max 2011」においてニトビ・ソフトウェア社の買収合意を発表した。

PhoneGap – Wikipedia

とのことです。AdobeのPhoneGapサイトでダウンロード出来ます。さらに、現在はAdobeがApache Software Foundationに寄贈し、オープンソースで公開されているため、Apache Cordovaという名前でもダウンロード出来ます。
現時点ではPhoneGapとCordovaは名前が違うだけで同じものという扱いですが、今後はAdobeの方で様々な開発ツールがパッケージングされてその名前がPhoneGapになるか、もしくはその一部になっていくのかもしれません。

PhoneGapによるAndroidアプリの雛形を作成

何はともあれ、PhoneGapをダウンロードしてzipファイルを展開してみましょう。

phonegap-2.3.1
├　doc
└　lib
├　android
├　bada
├　badaWac
├　blackberry
├　ios
├　symbian
├　webos
├　windows-phone-7
├　windows-phone-8
└　windows8

注目すべきはlib配下のディレクトリですね。日本では見慣れないものも入っていますが、このディレクトリ名のプラットフォームにPhoneGapは対応しているということです。（Badaというのはサムスン電子が開発しているプラットフォームのようです。ドコモが採用を検討しているTizenと統合する方向。）
今回の記事はAndroidアプリをターゲットとしますが、続編としてiOSやWindwos8版も作ってみたいと思います。

lib配下のどのディレクトリを見ても、binディレクトリの下にcreateというスクリプト（及びbatファイル）が入っています。このスクリプトを作るとアプリの雛形が出来るのです。

cd /path/to/phonegap/lib/android/bin
./create ~/booknavi jp.artisanedge.android.booknavi BookNavi

createスクリプトの引数は、第1引数が雛形を作成するディレクトリパス、第2引数がパッケージ名、第3引数がプロジェクト名です。

※PhoneGapサイトのGetting Started with Androidも参照をお勧めします。

作成された雛形は、下記のような構成になっています。

booknavi
├　src
├　gen
├　assets
│　　└　www
│　　　　├　css
│　　　　├　img
│　　　　├　js
│　　　　├　res
│　　　　└　spec
├　bin
├　cordova
├　libs
└　res

assets/wwwの下にCakePHPやRailsで見覚えのあるwebrootっぽいというか、いかにもWebだなというディレクトリがあります。
PhoneGapでは、このassets/wwwの下にHTML5＋CSS3＋JavaScriptでアプリを書いていくのです。

さらに、srcの下には指定したパッケージ名でディレクトリが作成され、唯一、BookNavi.javaというJavaソースがあります。
これを見てみると・・・

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

出来上がるJavaソースは、本当にこれだけです。
しかもやっていることは、アプリが起動したらwwwディレクトリにあるindex.htmlを開くだけです。

雛形アプリを起動する

雛形ディレクトリをEclipseの Android＞Android Project from Existing Code でインポートし、Androidエミュレータで起動してみましょう。Eclipseから 実行＞Androidアプリケーション です。（Androidの開発環境の説明はここでは行いませんので、書籍やWebなどを参照してください。）

これだけですけど、Webブラウザで開いている感は一切なく、あくまで一つのAndroidアプリとして表示されました。

■

今日はここまでということで、明日以降、index.htmlを編集していきたいと思います。