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

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

文●西畑一馬／to-R

ツイートする

　スマートフォンサイトの制作でいま注目を浴びているのが「jQuery Mobile」です。jQuery Mobileを利用すると、CSSやJavaScriptの知識がない人でも簡単に本格的なスマートフォンサイトを作成できます。そんな“jQuery Mobileのキホン”が10分でわかるように、要点をギュッと絞って解説しましょう。

※本記事は、jQuery Mobile 1.0をもとに執筆しています。

0分目：
jQuery Mobileのダウンロードと利用方法

　jQuery Mobileは、HTMLのhead要素で、（1）jQueryのスクリプトファイル、（2）jQuery Mobileのスクリプトファイル、（3）jQuery MobileのCSSファイルを読み込むだけで利用できます。

　それぞれのファイルはjQueryのサーバーから呼び出せるようになっているので、わざわざ手元にダウンロードしなくても以下のように記述するだけですぐに利用できます。


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

1分目：
まずはページの雛形を作成しよう

　jQuery Mobileを使ったWebページは、HTML5で作成します。HTML5といっても特に新しい要素を利用する必要はなく、jQuery Mobileのルールに沿って記述すればいいだけです。HTML5の知識は必須ではありません。

　HTML5では、次のようにDOCTYPE宣言が非常に短く、metaタグも最小限で済みます。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>10分で分かるjQuery Mobileのキホン</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">  ……【1】
  </head>
  <body>
    （中略）
  </body>
</html>

　通常のPCサイトと異なるのは、【1】に記述しているViewportの設定でしょう。Viewportを設定することで、スマートフォン用の解像度（一般的には横幅320px）で表示される「スマートフォンサイト」になります。

3分目：
ページの内容を記述する

　次に、ページの中身を書いていきましょう。jQuery Mobileでは、data-role属性「page」を指定したdiv要素の内側にページの中身を記述します。data-role「page」の内側に書くのは、「ヘッダー」「コンテンツ」「フッター」の3つ。ヘッダーはdata-role属性「header」、コンテンツはdata-role属性「content」、フッターはdata-role属性「footer」を、指定したdiv要素でそれぞれ作成できます。

■サンプル1（HTML）


<div data-role="page" id="index">
  <div data-role="header">
    <h1>ASCII.jp</h1>
  </div>
  <div data-role="content">
    <p>コンテンツの内容</p>
  </div>
  <div data-role="footer">
    <h4>&copy; 2012 ASCII </h4>
  </div>
</div>

　jQuery Mobileでは、このように「data-◯◯="☓☓☓"」といった属性が多く登場します。これは、属性名を自由に設定できる「カスタムデータ属性」で、HTML5で定義されている機能です。jQuery Mobileではカスタムデータ属性を利用してさまざまな設定を記述すると、その設定をjQuery Mobileが読み取って必要な機能や装飾を施したページを生成してくれます。

　ここまでの結果をブラウザーで確認してみましょう。