jQuery Mobile逆引きリファレンス
jQuery Mobileで基本的なページを定義するには？
基本的なページを作成する方法を解説。要素のid値を振る際の注意点と、1つのファイルで複数ページを管理する方法についても説明。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQuery Mobileで基本的なページを作成するには、以下のようなマークアップを準備します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js">
</script>
</head>
<body>
<!--ページ領域-->
<div data-role="page" data-title="jQuery Mobile TIPS">
<!--ヘッダー領域-->
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
ここが本文です。
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
basic.htmlファイルのページ構造をもう少し分かりやすくしたのが、以下のツリー図です。
「data-role」は、jQuery Mobileでよく登場する属性の1つで、要素にjQuery Mobileのさまざまな機能を割り当てるために利用されます。例えば「data-role="page"」属性であれば、その要素がページを表すことを意味しますし、header／footerであれば、それぞれヘッダー／フッター領域であることを意味します。
コンテンツ部分は「role="main"」属性（他と違って「data-role」属性ではありません）と「class="ui-content"」属性の組み合わせで表します*1。role属性は（jQuery Mobileではなく）HTML5のグローバル属性で、要素の意味／役割を表します。その属性値がmainであれば、配下がメインのコンテンツであることを意味します。
- *1 jQuery Mobileの以前のバージョンでは「data-role="content"」属性を使っていました。
［Note］data-xxxxx属性
data-xxxxx属性は「独自データ属性」とも呼ばれ、グローバル属性の一種です。HTML5で追加されました。
JavaScript（または、そのライブラリ）に対してパラメーター情報を渡すために利用するのが主な目的です。HTML5では、data-xxxxx属性を利用することで、JavaScriptコードとマークアップとを明確に分離するのがお作法です。
jQuery Mobileでも独自データ属性を多用して、要素に対してさまざまな機能／スタイルを付与しています。
なお、ヘッダー／フッター領域は任意要素なので、不要であれば省略しても構いません*2。
- *2 正確には、ページ要素すらも任意です。その場合、<body>要素配下のコンテンツ全体を<div data-role="page">～<div>でくくるからです。ただし、そのような書き方はページの範囲が不明確になることがあるため、原則として避けるべきです。
要素のid値を振る際の注意点
jQuery Mobileで、それぞれの要素に対してid値を振る際には、アプリ全体で一意になるようにしてください（ページ単位、ではありません）。というのも、jQuery Mobileではページ遷移に際して、いったん遷移先のページを現在の文書ツリーに取り込んだ上で移動する、という仕組みを採用しているからです（詳しくは、後日、別稿「jQuery Mobileページでハイパーリンクを設置するには？」で解説の予定）。このため、ページをまたがっても、id値が重複してしまうと文書ツリー操作の妨げになる場合があるのです。
id値を決める際には、ページ要素（＝「data-role="page"」である要素）のid値を接頭辞として、配下の要素のid値を決めると一意性を管理しやすくなります。例えばページ要素のid値が「main」であれば、配下の<div>要素を「main_content」とするなどです。
1つのファイルで複数ページを管理する
jQuery Mobileでは、下記のコードと実行例のように、1つのファイルに複数のページ要素を含めることもできます。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js">
</script>
</head>
<body>
<!--初期アクセスで表示されるページ-->
<div id="home" data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<a href="#sub" data-role="button">サブ画面へ</a>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
<!--ボタン・クリックで表示されるページ-->
<div id="sub" data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
サブページです。
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
［サブ画面へ］ボタンをクリック
デフォルトでは先頭のページ要素が表示されますので、次ページ以降を表示するには移動のためのハイパーリンクを設置する必要があります。リンクのhref属性には、ページ内移動を表す「#id値」の形式で移動先ページを指定します。
ただし、このような複数ページ1ファイルの構成は、「ページ遷移時に通信が発生しないため、移動時の体感速度を向上できる」というメリットがあり、jQuery Mobileの初期バージョンでは推奨されていましたが、現在ではあまりお勧めしません。
というのも、初期表示では全てのページを読み込まなければならないため、ページ単体で読み込むよりも遅くなります。また、その後、残りのページが表示されなければ、そもそもトラフィックの無駄遣いですし、ファイル管理の観点からも、1ファイル1ページとした方がシンプルです。
以上のような理由から、ページ遷移時の体感速度を向上させるのが目的ならば、プリフェッチ機能を優先して利用してください（後日、別稿で解説の予定）。この機能を利用するのは、ほぼパネル／ダイアログ（後日別稿で解説）を利用する場合に限られます。
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. jQuery Mobileを利用するには？
jQuery Mobileの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery Mobileが動作するスマホ／タブレット環境と、jQuery Mobileページの基本構造を説明する。
2. 【現在、表示中】≫ jQuery Mobileで基本的なページを定義するには？
基本的なページを作成する方法を解説。要素のid値を振る際の注意点と、1つのファイルで複数ページを管理する方法についても説明。
4. jQuery Mobileページでヘッダー／フッターの表示をカスタマイズするには？
ヘッダー／フッターを作成する方法を解説。また、ヘッダー／フッターの位置を固定したり、タップで非表示にしたりする方法なども紹介。
