jQuery Mobileでサイト構築をはじめる
jQuery Mobileはタッチパネルに最適化されたUIウィジェットとAJAXによるアニメーション効果のついたスムーズなナビゲーションシステムを実装しています。ここでは、最初のjQuery Mobileページを簡単につくってみましょう。
基本的なページのテンプレートをつくる
好きなテキストエディタを使って、次のテンプレートをコピーしてファイルを作ってください。そしてブラウザで開いてみましょう。これだけでもう、モバイル開発の第一歩は完了です！
テンプレートには、次のものが含まれています。まず head 要素には meta 要素として viewport が設定されています。これは、画面の横幅などを定義するものです。そしてjQuery本体とjQuery Mobileのスクリプトとテーマ用のスタイルシートをCDNから取得するようにしています。jQuery Mobile 1.1は、jQueryコアのバージョン1.6.4および1.7.1の、どちらでも動作します。
次に body 要素を見ると、data-role 属性に page を指定した div 要素が全体を囲んでいます。そしてヘッダバー(data-role=“header”)と、コンテンツ部分(data-role=“content”)が基本的なページ要素として含まれています(これらはいずれも、不要であれば削除しても構いません)。これらの data- で始まるHTML5で採用された属性を通じて、jQuery Mobileはウィジェットの設定など設定を受け取ります。
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body><div data-role="page"><div data-role="header"> <h1>My Title</h1> </div><!-- /header --><div data-role="content"> <p>Hello world</p> </div><!-- /content --></div><!-- /page --></body> </html>
コンテンツの追加
コンテンツ内部には、ヘッド(h1～h6)やリスト(ol,ul)、段落(p)など、通常のHTMLを自由に記述できます。そして通常のWebページ同様に、独自のスタイル記述をjQuery Mobileのスタイルシートより後で読み込んでやることで追加できます。
リストビューの作成
jQuery Mobileでは、リスト要素に data-role=“listview” 属性を指定することで、多様なリストビューを実装できます。ここでは、リストビューによるシンプルなリンクリストをつくってみましょう。リストビューには data-inset=“true” を追加することでインセットモードにし、更に data-filter=“true” を指定してフィルタ機能を追加します。
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
スライダーの追加
フレームワークはフォーム要素に含まれる全てのコントロールを、自動的にタッチパネルに最適化できるウィジェットを備えています。ここでは、HTML5で新たに追加された範囲の決まった数値入力を助けるスライダー要素を試してみましょう。今回は data-role 属性は不要です。必ず form 要素で囲み、各要素にはラベル(label)をつけてやるようにしましょう。
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>
ボタンの作成
ボタンをつくる方法は、いくつかあります。今回は、アンカー(a)をボタンにしてクリックしやすくするようにしてみましょう。まずは通常のリンクを作成し、そこに data-role=“button” 属性を追加します。ボタンには data-icon 属性によりアイコンを追加することもできます。また、アイコンの位置を data-iconpos 属性により変えることも出来ます。
<a href="#" data-role="button" data-icon="star">Star button</a>
テーマ・スウォッチを活用する
jQuery Mobileはテーマフレームワークにより最大26種類の、「スウォッチ」と呼ばれるツールバーやコンテント、ボタンなどの配色セットをを持つことができます。たとえば、ページ内のいずれかのウィジェットに data-theme=“e” と指定してみてください。ページ、ヘッダ、リスト、フォーム要素など、いずれもが黄色になります。デフォルトで用意されているスウォッチはaからeまでありますので、他の色も試してみてください。
ページコンテナにテーマを指定すると、その設定はページ内全てに自動的に継承されます(ただし、ヘッダは例外です。初期設定はページでの指定に関わらずaです)。
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>
独自のテーマをつくるのであれば テーマローラー が利用できます。ドラッグ&ドロップで色を決めて、カスタムテーマをダウンロードできます。
さらに進んだサイト構築へ
ここで見たのは、jQuery Mobileで簡単に実現できるクールな機能の、ほんのさわりだけです。ページ間リンク、ダイアログなども活用してください。またdata属性リファレンスを参考に、他にも活用できる様々な設定を試してください。
スクリプトを使った開発に慣れているならば、data属性を用いずにjQueryから直接設定を操作する方法もあります。グローバル設定、イベント、メソッドとプロパティなどを参考に、さらに進んだサイトを構築してください。
