[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 02 01

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

PhoneGap 02 02

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

PhoneGap 02 03

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

PhoneGap 02 04

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

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

Android current distribution

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

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

PhoneGap 02 05

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

PhoneGap 02 06

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

[html]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title>MDS PhoneGap API Demo with jQuery Mobile</title>

<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="index.css" />

<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>
</head>

<body onload="init();">
<div data-role="page" id="page-home" class="type-interior" data-theme="b">

<div data-role="header" data-theme="b">
<h1>MDS PhoneGap API Demo</h1>
<a href="#" data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right">intro</a>
</div>

<div data-role="content" data-theme="c">
(省略)
</div>

<div data-role="footer" data-position="fixed" class="footer-docs" data-theme="b">
<p>&copy; 2012 Mobile Developer Solutions</p>
</div>

</div>
</body>
</html>
[/html]

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

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

Device 2013 01 26 195840

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

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

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

PhoneGap 02 07

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

この記事を書いた人

井上 研一

経済産業省推進資格ITコーディネータ/ITエンジニア/ブロガー。
井上研一事務所代表、株式会社ビビンコ代表取締役、一般社団法人ITC-Pro東京理事。
北九州市出身、横浜市在住。 AIやIoTに強いITコーディネータとして活動中。著書に「初めてのWatson」、「ワトソンで体感する人工知能」など。セミナーや研修講師での登壇も多数。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします