10分でわかる！ jQuery Mobileのキホン (2/2)

2012年02月03日　11時46分更新

文●西畑一馬／to-R

ツイートする

5分目：
スマホらしいトップページをあっという間に

　コンテンツ領域（<div data-role="content">～</div>内）に次のようなHTMLを記述しましょう。


<ul data-role="listview" data-inset="true">
  <li><a href="#book8">jQuery Mobile スマートフォンサイト デザイン入門</a></li>
  <li><a href="#book7">標準HTML5タグリファレンス</a></li>
  <li><a href="#book6">リスティング広告 プロの思考回路</a></li>
  <li><a href="#book5">iPhone+Android スマートフォンサイト制作入門</a></li>
  <li><a href="#book4">HTML5+JavaScript アイデア＆実践サンプル</a></li>
  <li><a href="#book3">プロが教えるデジカメ撮影テクニック</a></li>
  <li><a href="#book2">Web制作の現場で使う jQueryデザイン入門</a></li>
  <li><a href="#book1">現場でプロが培った Google Analyticsの使い方</a></li>
</ul>

　ul要素に設定しているdata-role属性「listview」はリストをスマートフォン用に最適化して表示する設定で、data-inset属性「true」はリストの周りに余白を付けて角丸にする設定です。この2つの設定を加えることで、jQuery Mobileではスマートフォンらしいリスト型のメニュー画面を作成できます。

jQuery Mobileのリストビュー

8分目：
詳細ページを記述して完成！

　次に、メニューからリンクして移動する先の詳細ページを作成しましょう。詳細ページのHTMLは以下のようになります。


<div data-role="page" id="book8">  ……【1】
  <div data-role="header">
    <a href="#index" data-direction="reverse">T0P</a></a>  ……【2】
    <h1>ASCII.jp</h1>
  </div>
  <div data-role="content">
    <h2>jQuery Mobile スマートフォンサイト デザイン入門</h2>
    <p>もうスマホサイトで手間取らない!　モバイルフレームワーク「jQuery Mobile」を使ったサイト制作の基本から、高度なカスタマイズまで、jQuery本売り上げNo.1の著者らが徹底解説。</p>
    <p><a href="http://amazon.co.jp/o/ASIN/4048706691" ><img src="http://images.amazon.com/images/P/4048706691.09._OU09_SCMZZZZZZZ_.jpg" alt="jQuery Mobile スマートフォンサイト デザイン入門" /></a></p>
  </div>
  <div data-role="footer">
    <h4>&copy; 2012 ASCII </h4>
  </div>
</div>

jQuery Mobileで作成した詳細ページ

　通常のWebサイトでは、「1ページ＝1つのHTMLファイル」ですが、jQuery Mobileでは<div data-role="page">～</div>が1ページです。1つのHTMLファイルに複数のページを記述できるのです。

　詳細ページもトップページと同じHTML内に記述し、data-role属性「page」の要素に、メニューのリンク（href属性）に指定したid名を指定します【1】。すると、メニューのリンクがクリックされると、詳細ページにスライドしてページが遷移するようになります。

　詳細ページのヘッダーには、トップページへ戻るボタンを設定します【2】。data-direction属性「reverse」を指定すると、トップ→詳細ページの遷移とは逆向きにスライドしてページが切り替わります。

　最後に、詳細ページを必要なページの数だけ記述したら完成です。

完成サンプル（sample03.html）

　このように、jQuery Mobileを利用すると、スマートフォンサイトをとても簡単に作成できます。jQuery Mobileで、スマートフォンサイトの制作を始めてみてはいかがでしょうか。

実務でもjQuery Mobileを使いたい方へ
「jQuery Mobile スマートフォンサイトデザイン入門」
好評発売中！

　jQuery Mobileを使ったスマートフォンサイトの制作方法を解説した書籍「jQuery Mobile スマートフォンサイトデザイン入門」（西畑一馬、鍋坂理恵著）が、アスキー・メディアワークスから発売中です。


Image from Amazon.co.jp
jQuery Mobile スマートフォンサイトデザイン入門

　本書は、jQuery Mobileによるスマートフォンサイトの作り方を、チュートリアルとリファレンスで詳しく解説した本。Webデザイナーやマークアップエンジニアの方が、実際の制作案件で利用することを想定して、後半ではCSS3を使った高度なカスタマイズテクニックも紹介しました（APIなど、アプリケーション開発に必要な機能については取り上げていません）。