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

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

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

そこで作った雛形には、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を使うと、簡単にネイティブアプリっぽいデザインが実現できることが分かったと思います。
今回はここまで。次回は検索ロジックを実装していきたいと思います。

Ad

この記事を書いた人

井上 研一

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