井上 研一 今日から何回かに分けて、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」においてニトビ・ソフトウェア社の買収合意を発表した。
とのことです。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を編集していきたいと思います。