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

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

前回は、EclipseのPhoneGapプラグインを使って、PhoneGapとjQuery Mobileを使ったプロジェクトの雛形を作成しました。

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

HTML5でAndroidアプリ開発の第2回です。 前回は、PhoneGapで雛形アプリを作成しました。今回は…

inoccu.com

そこで作った雛形には、PhoneGapのデモが大量に含まれていますので、その辺を削除して、すっきりさせるところから作業を始めたいと思います。

最もシンプルなindex.html

<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" data-role="page" 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">© 2013 Artisan Edge</p>

</div>
</div>

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

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

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

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

検索画面をデザインする

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

<div id="page-home" data-role="page" data-position="fixed" data-theme="a">
<div data-role="header">
<h1>BookNavi</h1>
<form id="searchForm"><input id="keyword" name="keyword" type="search" 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">© 2013 Artisan Edge</p>

</div>
</div>

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

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

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

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

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

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

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