HTML5でAndroidアプリ開発の第2回です。
前回は、PhoneGapで雛形アプリを作成しました。今回は、index.htmlの編集など、さらに作業を進めていきたいと思います。
ところで、これからAndroidアプリのユーザインタフェースをHTML5で書いていくことになりますが、ふつうに書いてしまうと、いかにもWebっぽいユーザインタフェースになってしまいます。
それをAndroidのネイティブアプリっぽく見せたいと思うのですが、そのためにjQuery Mobileを使います。
jQuery Mobileを使ったPhoneGapプロジェクトをEclipseで簡単に作るためのツールとして、PhoneGapプラグインも使うことにしましょう。
PhoneGapプラグインの導入とプロジェクトの作成
PhoneGapプラグインは、Eclipseの新規ソフトウェアのインストールから下記のURLを指定してインストールします。
https://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/trunk/download/インストールすると、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を編集して、本なびを作って行きたいと思います。
