サンプルサイトのスクリプトを以下に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<!--1.スマートフォン画面での表示方法指定-->
<mata name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery Mobileサンプル</title>
<!--2.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.2.0.min.css" />
<!--3.jQueryの読み込み-->
<script language="javascript" type="text/javascript" src="./Scripts/jquery-1.8.3.min.js"></script>
<!--4.jQuery Mobileの読み込み-->
<script language="javascript" type="text/javascript" src="./mobile/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!--5.ページの設定-->
<div data-role="page" data-theme="b">
<!--6.ヘッダーの設定-->
<div data-role="header" data-theme="b">
<h1>jQuery Mobileサンプルページ</h1>
</div>
<!--7.ページ内容の設定-->
<div data-role="content">
<!--7-1.ボタンコンポーネント設定-->
<h2>あなたの血液型はA型？</h2>
<a href="#" data-role="button" data-theme="e">はい</a>
<a href="#" data-role="button" data-corners="false" data-theme="e">いいえ</a>
<!--7-2.リストコンポーネント設定-->
<h2>あなたの出身は？</h2>
<ul data-role="listview" data-theme="a" data-inset="true">
<li><a href="#">東日本</a></li>
<li><a href="#">西日本</a></li>
</ul>
<!--7-3.フォームコンポーネント設定-->
<h2>あなたの性別は？</h2>
<div data-role="fieldcontain">
<label for="flip-g">性別：</label>
<select name"slider" id="flip-g" data-role="slider" data-theme="d" data-track-theme="e">
<option value="f">女性</option>
<option value="m">男性</option>
</select>
</div>
</div>
<!--8.フッターの設定-->
<div data-role="footer" data-theme="b">
<h3>Codezine</h3>
</div>
</div>
</body>
</html>
7-1.ボタンコンポーネント設定では、スマートフォンサイトでよく見られる他のページへのリンクボタンを呼び出します。「data-role="button"」でリンクボタンのスタイルが適用されます。「data-theme="e"」といった形でページで設定したスウォッチとは別のスウォッチを設定することもできます。「data-corners="false"」を設定すると、リンクボタンの角丸処理がなくなり、長方形のボタンになります。何も設定しない既定値はtrueなので、上の「はい」のボタンは角丸処理のあるリンクボタンとなっています。
7-2.リストコンポーネント設定では、これもスマートフォンサイトでよく見られるリスト表示をします。ulタグ内で「data-role="listview"」を設定するとリストのスタイルを呼び出せます。通常は画面横幅いっぱいに広がりますが、「data-inset="true"」を設定することで、余白と角丸処理の付いたリストになります（既定値はfalse）。
7-3.フォームコンポーネント設定では、スマートフォンで操作しやすい入力フォームを呼び出します。divタグ内の「data-role="fieldcontain"」は「label for="flip-g"」でlabel要素を定義した部分を、明確に他の入力フォームと区別できるよう表示できるようにするものです。横幅が480ピクセル以上のときは、ラベルとフリップスイッチの部分が1行のレイアウトになりますが、480ピクセル未満の時には、図6のようにラベルとフリップスイッチの部分が2行のレイアウトになり、「性別：」の部分がフリップスイッチの上に来ます。
select要素で「data-role="slider"」を設定すると、スマートフォンサイトでよく見られるフリップスイッチを表示できます。ハンドル部分のスライドか選択肢部分のタップで値を切り替えることができます。「data-theme="d"」はハンドル部分のスウォッチを定義したもので、「data-track-theme="e"」は右側の選択肢部分のスウォッチを定義したものです。そして最初のoption要素である「女性」の方が右側に配置されます。
8.フッターの設定では、divタグで「data-role="footer"」と設定し、フッターのスタイルを呼び出し、タグで囲んだ文字列を表示します。
このようにごく簡単な記述によって、スマートフォンで見やすい形のサイトを作成することができます。「data-role」というカスタムデータ属性で、さまざまなコンポーネントを呼び出すのが特徴です。
まとめ
今回はjQuery Mobileを使ってごく簡単なスマートフォン向けサイトを作成するところまでを取り上げました。簡単な記述で、スマートフォンに特化したUIのサイトが作成できることがお分かりいただけたのではないでしょうか。次回は、ポップアップウィジェットなどjQuery Mobile 1.2.0/1.3.0で採用された機能をより詳しく紹介し、ページ遷移のある、より複雑なスマートフォンサイトを作成してみます。
