[HTML5でAndroidアプリ開発] jQuery MobileとPhoneGapプラグイン

HTML5でAndroidアプリ開発の第2回です。
前回は、PhoneGapで雛形アプリを作成しました。今回は、index.htmlの編集など、さらに作業を進めていきたいと思います。

ところで、これからAndroidアプリのユーザインタフェースをHTML5で書いていくことになりますが、ふつうに書いてしまうと、いかにもWebっぽいユーザインタフェースになってしまいます。
それをAndroidのネイティブアプリっぽく見せたいと思うのですが、そのためにjQuery Mobileを使います。

jQuery Mobileを使ったPhoneGapプロジェクトをEclipseで簡単に作るためのツールとして、PhoneGapプラグインも使うことにしましょう。

PhoneGapプラグインの導入とプロジェクトの作成

PhoneGapプラグインは、Eclipseの新規ソフトウェアのインストールから下記のURLを指定してインストールします。

インストールすると、EclipseのツールバーにPhoneGapプラグインのボタンが表示されるようになります。
これをクリックして、ウィザードを開きましょう。

最初に、プロジェクトに含めるPhoneGapとjQuery Mobileのバージョンを設定します。
PhoneGapプラグインにもPhoneGapとjQuery Mobileが含まれているのですが、少しバージョンが古いので、それぞれ最新版をダウンロードして展開しておき、その展開先ディレクトリを指定しました。

プロジェクト名とロケーションを指定します。

次にターゲットとするAndroidのバージョンを指定します。

Androidのバージョンを決めるにあたって、現在使われているAndroidのバージョンの比率を知りたいと思うでしょう。出来るだけ新しいバージョンを指定したい。でも、新しすぎるとユーザ比率が低くなって、ほとんどの人が使えないものになってしまう・・・。

そんなときは、Android Developersのダッシュボードを見ると良いでしょう。

これは、最近2週間にGoogle PlayにアクセスしたAndroidのバージョンの比率を示しています。2.3.3以上に対応するようにすれば、全体の9割はカバー出来るようです。
そのため、今回はAPIレベル10のGoogle APIを指定しました。

ウィザードはさらに続きます。後は、パッケージ名の指定して完了すると、プロジェクトが作成されます。

パッケージエクスプローラで見てみると、このようなディレクトリ構成でプロジェクトが作成されました。
PhoneGap(cordova-2.3.0.js)と、jQuery Mobileが含まれていることが分かります。
jQUery Mobileのガイドを読むと、CDNからダウンロードする方法が説明されていることが多いのですが、Androidアプリとなるとオフラインで使用されることもあるので、ローカルで持っておいた方が良いのです。

作成されたindex.htmlはこのような内容です。
PhoneGapのデモが含まれるので、かなり大きなHTMLになっています。(下記のコードでは省略しました。)
jQueryとjQuery Mobileがローカルから読み込まれていることが分かります。

<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="index.js"></script>
<div id="page-home" class="type-interior" data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>MDS PhoneGap API Demo</h1>
<a id="intro" class="ui-btn-right" href="#" data-icon="home" data-iconpos="notext">intro</a>

</div>
<div data-role="content" data-theme="c">(省略)</div>
<div class="footer-docs" data-role="footer" data-position="fixed" data-theme="b">

© 2012 Mobile Developer Solutions

</div>
</div>

Androidエミュレータで実行してみる

実行してみると、PhoneGapのデモが表示されます。

TIPS: JavaScriptのバリデーションエラーが表示される場合

EclipseでjQueryやjQuery MobileのJavaScriptコードでバリデーションエラーが表示され、Androidエミュレータの実行まで進めないことがあります。本来は問題ないコードなのですが、このままでは先に進めないので、EclipseのJavaScriptバリデータを無効にしてしまいます。

プロジェクト>プロパティ から、ビルダーの設定を変更します。

今回はPhoneGapプラグインを導入し、jQuery Mobileを使ったプロジェクトを作成してみました。
なかなか本題のアプリの作成に入れていないのですが、次回こそはindex.htmlを編集して、本なびを作って行きたいと思います。

この記事を書いた人

井上 研一

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