[HTML5でAndroidアプリ開発] HTML5とjQuery Mobileでユーザインタフェースを作ろう

連載の第3回です。
今回は、HTML5とjQuery Mobileでユーザインタフェースを作ってみようと思います。

前回は、EclipseのPhoneGapプラグインを使って、PhoneGapとjQuery Mobileを使ったプロジェクトの雛形を作成しました。
そこで作った雛形には、PhoneGapのデモが大量に含まれていますので、その辺を削除して、すっきりさせるところから作業を始めたいと思います。

最もシンプルなindex.html

[html]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta http-equiv=”Content-type” name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width”>
<title>BookNavi</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>
<div data-role=”page” id=”page-home” data-theme=”a”>
<div data-role=”header” data-position=”fixed”>
<h1>BookNavi</h1>
</div>

<div data-role=”content”>
</div>

<div data-role=”footer” data-position=”fixed”>
<p class=”copy”>&copy; 2013 Artisan Edge</p>
</div>
</div>
</body>
</html>
[/html]

ざくざくとPhoneGapのデモコードを削除して、ここまでシンプルにしました。
Androidエミュレータで動作させると、このような画面になります。

PhoneGap 03 01

とてもシンプルな画面になりました。
しかし、表示された画面を見てみると、ヘッダーとフッターが、きちんとデザインされているし、画面の上下にレイアウトされていることが分かります。これはなぜでしょうか。
答えはCSSがきちんと設定されているからなのですが、このCSSは誰が作成したのか。
そうですね。これはjQuery Mobileの働きによるものです。

jQuery Mobileでは、ページはdata-role=”page”と設定されたdivエレメントで表現されます。1つのHTMLファイルの中に、複数のページを含むことも可能です。(PhoneGapプラグインで作成した、PhoneGapデモを含むindex.htmlがそのような構造になっていました。)

さらに、ページの中に、header、content、footerというdata-roleを含むことで、きちんとデザインされた画面にすることが出来ます。

検索画面をデザインする

bodyタグの内部を下記のように変更します。

[html]
<div data-role=”page” id=”page-home” data-position=”fixed” data-theme=”a”>
<div data-role=”header”>
<h1>BookNavi</h1>
<form id=”searchForm”>
<input type=”search” name=”keyword” id=”keyword” value=”” placeholder=”検索キーワード” />
</form>
</div>

<div data-role=”content”>
<ul data-role=”listview”>
<li><a href=”#”>検索結果1</a></li>
<li><a href=”#”>検索結果2</a></li>
<li><a href=”#”>検索結果3</a></li>
<li><a href=”#”>検索結果4</a></li>
<li><a href=”#”>検索結果5</a></li>
</ul>
</div>

<div data-role=”footer” data-position=”fixed”>
<p class=”copy”>&copy; 2013 Artisan Edge</p>
</div>
</div>
[/html]

Androidエミュレータで実行すると、このような画面になります。

PhoneGap 03 02

ずいぶん、アプリっぽくなりましたね。

まず、画面が全体的に黒くなって、Androidアプリっぽい感じになりました。これは、data-role=”page”のところに、data-theme=”a”を追記したためです。
jQuery Mobileのデフォルトテーマでは、5つのスウォッチが準備されており、aからeの文字が割り当てられています。それぞれの見た目の違いは、リファレンスを参考にされると良いでしょう。

ヘッダ部には検索キーワードの入力ボックスが追加されました。
inputタグのtypeとしてsearchが指定されています。これはHTML5で追加されたもので、Androidブラウザの実装ではテキストボックスの四隅が丸くなり、虫眼鏡のアイコンが表示されていることが分かります。
また、入力ボックスにフォーカスを当てるとキーボードが表示されますが、キーボードの右下がGoになっています。Goをクリックするとformがsubmitされるので、ここで検索ロジックが呼び出されれば良いということになります。

PhoneGap 03 03

検索結果の表示欄はスマートフォンの小さな画面で操作しやすいように表示されています。これは、ulタグでdata-role=”listview”と記述したためです。
実際のアプリでは、検索が行われた際に、この検索結果のリストが自動で書き換われば良いわけです。

次回は検索ロジックを実装します

いかがでしょうか。jQuery Mobileを使うと、簡単にネイティブアプリっぽいデザインが実現できることが分かったと思います。
今回はここまで。次回は検索ロジックを実装していきたいと思います。

この記事を書いた人

井上 研一

井上 研一

経済産業省推進資格ITコーディネータ/ITエンジニア。
合同会社井上研一事務所代表、株式会社ビビンコ代表取締役。
北九州市出身、横浜市在住。AIやIoTに強いITコーディネータとして活動。北九州市主催のビジネスコンテスト「北九州でIoT」に応募したアイディアが入選し、メンバーと株式会社ビビンコを創業。著書に「初めてのWatson」、「ワトソンで体感する人工知能」など。セミナーや研修講師での登壇多数。