スマートフォン・タブレット 4-04
jQuery Mobileでのサイト制作手法（前編）

jQuery Mobileは、HTML5のカスタムデータ属性を用いて設定を行っていくことにより、CSSやJavaScriptを記述することなくスマートフォンサイトを制作できる。ここでは具体的な記述方法について解説する。

制作・文／いちがみトモロヲ（15VISION）

jQuery Mobileの読み込み

jQuery Mobileを使用するには、jQuery本体と、jQuery MobileのCSS、JavaScriptの2ファイルを読み込む必要がある。これはjQuery Mobile 公式サイトの「Download」ページにCDNで利用する際のスニペット（短いコード）が掲載されている【01】【02】。

「Latest and daily builds」に記載されたスニペットを利用すると、常に最新版のjQuery MobileをCDN上で利用できる。バージョンによって挙動が異なる場合があるので実際に稼動しているサイトで利用するにはお勧めできないが、最新バージョンのテストを開発環境で簡単に行うことができるので、覚えておくといいだろう【03】【04】。

【01】jQuery Mobileのダウンロード（http://jquerymobile.com/download/）

【02】スニペットをコピー＆ペーストで利用できる。

【03】「Latest and daily builds」は最新バージョンのテストに便利である。

【04】「Latest and daily builds」で最新バージョンの挙動をチェックできる。

基本的なページテンプレート

jQuery Mobileはヘッダー、コンテンツ、フッターなどサイトを構成する様々なコンポーネントがあらかじめ用意されている。そのため、驚くほど簡単にスマートフォンサイトを制作できる。

基本的なページテンプレートは【05】のようなコードからなる。このようにHTML5のカスタムデータ属性を利用して、少しの指定を行うだけでスマートフォン向けのサイトができる【06】。

【05】

【06】基本的なページテンプレート

ページ構成

jQuery Mobileは複数ページを1つのHTMLファイルにまとめることができる。1つのファイルにまとめることでページ遷移を比較的スームズにできるというメリットがある。各ページは、data-role="page"の属性ついたエレメントにid属性をつけて識別する。【07】のようにリンクを設定することでスライドエフェクトがかかり、ページが遷移する。

【07】複数ページを1つのHTMLファイルにまとめる。）

【07】複数ページを1つのHTMLファイルにまとめる。

ページ遷移

jQuery Mobileは普通にリンクを指定しただけでスライドエフェクトが加えられる。エフェクトは全部で6つ用意されており、data-transitionの属性で指定することができる。

エフェクトの種類

・slide｜右から左にスライド
・slideup｜下から上にスライド
・slidedown｜上から下にスライド
・pop｜ページの中央からポップイン
・fade｜フェードイン
・flip｜左右反転しながらポップイン

ツールバー

jQuery Mobileにはヘッダー、フッターやナビゲーション用などのツールバーが用意されている。ヘッダー内に【08】のようにリンクを設定することで【09】のような見た目になる。

ナビゲーションバーはdata-role="navbar"の属性を使い、メニューのリスト数に応じて均等にスペースを分割するように設定される。

【10】の場合、各ボタンは、ブラウザウィンドウの幅の1/4 になる。リストにclass="ui-btn-active"をつけることで、そのメニューをアクティブな状態にすることができる【11】。

【08】ヘッダーの設定。

【09】ヘッダーのリンクはボタンになる。

【10】ナビゲーションバーの設定。

【11】リストが2つだと各ボタンは、ブラウザウィンドウの幅の1/2に、4つだと1/4になる。

[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。