[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を編集していきたいと思います。

Ad

この記事を書いた人

井上 研一

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