スマートフォンサイトの制作でいま注目を浴びているのが「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要素でそれぞれ作成できます。
<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>© 2012 ASCII </h4>
</div>
</div>
jQuery Mobileでは、このように「data-◯◯="☓☓☓"」といった属性が多く登場します。これは、属性名を自由に設定できる「カスタムデータ属性」で、HTML5で定義されている機能です。jQuery Mobileではカスタムデータ属性を利用してさまざまな設定を記述すると、その設定をjQuery Mobileが読み取って必要な機能や装飾を施したページを生成してくれます。
ここまでの結果をブラウザーで確認してみましょう。
ヘッダー/コンテンツ/フッターの3つの領域が定義され、最小構成のスマートフォンサイトができました。
これだけだと内容が寂しいので、コンテンツを追加していきましょう。
■Amazon.co.jpで購入
jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)西畑一馬、鍋坂理恵(著)アスキー・メディアワークス