アプリ画面の全体構成
jQuery Mobileでは、div要素にdata-role属性を指定することでその要素の役割（なにを表しているのか）を記述できます。このdata-role属性は、HTML5の独自データ属性で、例えば、data-role属性に"page"を指定するとアプリの画面を定義したことになります。
タイトルなどヘッダ情報にはdata-role属性に"header"、フッタ情報には"footer"を指定します。そうすると、ヘッダ上とフッタを画面の上下に自動で配置してくれます。
アプリで表示するコンテンツはrole属性に"main"、class属性に"ui-content"を組み合わせたdiv要素内に配置します。
図で表すと、次のとおりです。
メニューを追加したいときは、div要素のdata-role属性に"navbar"を指定します。
また、ヘッダやフッタの位置は固定されたほうが見栄えが良いので、その場合はdata-positionを"fixed"に設定します。
次のプログラムは、mainPageというIDの画面上下にヘッダとフッタを固定で配置し、ヘッダに「ログイン」と「ヘルプ」の2つのメニューを表示したときの例です。
<div id="mainPage" data-role="page">
<div data-role="header" data-position="fixed">
<h3>Monacaでモバイルアプリを作ろう</h3>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">ログイン</a></li>
<li><a href="#">ヘルプ</a></li>
</ul>
</div>
</div>
<div role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed">
WINGS Project
</div>
</div>
UIコンテンツの配置
モバイルアプリでは入力フィールドやボタンを指で操作することが多いので、クリックしやすいUIを配置するとアプリの操作性が高くなります。
ここでは、サンプルとして簡単なユーザ認証フォームを作成します。ボタンのclass属性の値は"ui-btn"に設定します。
<div role="main" class="ui-content">
<div class="ui-field-contain">
<label for="username">ID:</label>
<input type="text" id="username">
</div>
<div class="ui-field-contain">
<label for="password">パスワード:</label>
<input type="password" id="password">
</div>
<div class="ui-field-contain">
<button id="loginBtn" class="ui-btn">ログイン</button>
<button id="cancelBtn" class="ui-btn">キャンセル</button>
</div>
</div>
ボタンや入力フィールド以外にも、jQuery MobileにはいろいろなUIコントロールがあります。
すべて、指で操作しやすいよう大きめで分かりやすいデザインになっています。こちらのサイトにデモがありますので、使いたいUIコントロールがあればソースコードと併せて確認してみてください。
画面を確認しよう
Monacaでは、作成した画面を確認することができます。ファイルメニューの［プレビュー］を選択すると画面の確認画面が出ますので、レイアウトやバランスを確認してください。
おわりに
本記事では、AndroidアプリやiOSアプリなどのモバイルアプリの開発がはじめての方に、普段使い慣れたHTML5/JavaScriptを使ったハイブリットアプリケーションを作成する方法をご紹介しました。今回は画面の作成まで終わりましたので、次回はこの画面を使ってユーザ認証機能を作成する方法をご紹介します。
