連載：jQuery Mobile入門 第1回 jQuery Mobileページの基本構造を理解しよう 山田 祥寛2012/01/20 |
 |
|
|
|
■jQueryアプリケーションを複数ページに対応する
先ほども述べたように、jQuery Mobileでは1つの.htmlファイルで複数のページを表現するのが一般的である。さっそく、先ほどのサンプルを複数ページに対応させてみよう。
|
|
| 複数ページに対応したjQuery Mobileページのコード例（<body>要素内を抜粋） |
先ほども述べたように、複数ページに対応するには「data-role属性がpageである要素」をページの数だけ列挙するだけなので、特に難しいことはない。ただし、以下のような注意点もあるので留意しておきたい。
（1）ページは常に並列の関係にあること
ページ同士は常に並列でなければならない。例えば、ページの中に入れ子にページを配置することはできない。
（2）ページには一意なid値が必須
後からページを識別できるように、それぞれの要素にはid属性を明記しておく必要がある。さもないと、後からjQuery Mobileがページを遷移する際に、対象のページを特定できないためだ。
（3）ページ・タイトルはdata-title属性で定義する
jQuery Mobileでは、ページを遷移する際に、<title>要素で指定されたタイトルを、ページのdata-title属性で上書きする。ただし、その性質上、最初のページ表示ではdata-title属性の値は反映されないので（ほかのページから遷移されるときには反映される）、先頭ページと<title>要素の値は一致させておくのが望ましいだろう。
●ページ内リンクを設置する
もっとも、実際にアクセスしてみれば分かるように、この時点ではデフォルトで先頭ページ（＝最初の<div>要素）が表示されるだけで、あまり意味がない（2ページ目以降は無視される）。
 |
| デフォルトでは先頭ページが表示される |
そこで、それぞれのページ間を移動できるように、リンクを設置してみよう。以下のとおりだ（追加部分は太字）。
|
|
| ページ間を移動できるようにリンクを設置した場合のコード例（<body>要素内を抜粋） |
ページ間のリンクは、従来のページ内リンク（＝「#id値」で表すリンク）で表現できる。再度アクセスしてみると、今度はページにリンクが表示され、リンクをタップすると、ページがスライド式に切り替わることが確認できる。
 |
［jQuery MobileのUI要素］リンクをタップ |
 |
 |
| リンクをタップすると、ページが切り替わる |
●外部ページへのリンクを設置する
jQuery Mobileでは、外部ページへのリンクも（もちろん）利用できる。例えば、以下は外部ページとしてbasic2.htmlを用意し、basic.htmlからリンクする場合のコード例だ。
|
|
| basic.htmlからリンクされることを想定した外部ページ（basic2.html） |
|
|
| 外部ページbasic2.htmlへのリンクを追加したbasic.html（<body>要素内を抜粋） |
実行し、［外部ページ］リンクをタップすると、［Loading］メッセージが表示された後、外部ページ（basic2.html）が内部ページと同じように表示されるはずだ。
 |
［外部ページ］リンクをタップすると［Loading］メッセージが表示される |
|
 |
| ［Loading］アイコンを表示した後、外部ページを表示 |
もっとも、外部ページbasic2.htmlには、jQuery Mobileのライブラリもスタイルシートもインポートされていないのに、この挙動は不思議に思われるかもしれない。結果には、リンク元のページと同じようにスマートフォン的なスタイルが適用されているのだ。
だが、種を明かしてみればカンタンなことだ。jQuery Mobileでは、内部的には外部ページを非同期通信によって取得している。もっと正確にいうと、非同期通信によって取得したページから「data-role属性="page"である最初の要素」を抜き出し、現在の文書ツリーに組み込んでいるのだ。これによって、あたかも外部ページを内部ページと同様に扱うことができる。
 |
| jQuery Mobileによる外部ページへの遷移方法 |
ただし、その仕組みが故に、jQuery Mobileで外部ページを扱う際には、以下の制約もあるので注意されたい。
- 外部ページには複数の「ページ」、あるいは「ページ」以外のコンテンツを含むことはできない（含んでいても無視される）
- リンク元のページと外部ページとでid値は一意でなければならない。
また、外部ページを文書ツリーに組み込みたくないというケースもあるだろう。そのような場合には、アンカー・タグ（＝<a>タグ）に対して以下いずれかの属性を付与することで、デフォルトの挙動を無効にし、一般的なリンクとしての挙動を採らせることもできる。
- rel属性に「external」を指定
- target属性に「_blank」などを指定
- data-ajax属性に「false」を指定
rel属性とdata-ajax属性とは見た目の挙動は同じであるが、マークアップとしての意味合いは異なる。まず、rel属性は「external（外部）」という値の意味のとおり、リンク先が「サイト外」である場合に指定すべきだ。一方、data-ajax属性は「サイト内」でも非同期通信は行いたくないというケースで利用することになるだろう。
また、リンク先が異なるドメインである場合、jQuery Mobileは明らかに別サイトであると認識し、非同期通信は無条件で無効化される*4。
| *4 そのほか、グローバル設定でアプリケーション全体の非同期通信を無効化することもできる。これについては、本連載の後半で解説の予定だ。 |
■
以上、今回はjQuery Mobileアプリケーションの最も基本的な構造を学んだ。冒頭述べたように、jQuery Mobileは、いわゆるjQueryのMobile版ではなく、jQueryを利用したUI作成のための――むしろjQuery UIのMobile版に近いライブラリである。決められたマークアップに従うだけで、いかにも「スマートフォン的な」ページを開発できることが理解いただけたと思う。
次回は、jQuery Mobileページにアニメーション効果や、ダイアログ／リストビューなどのUI部品を取り込む方法について解説する予定だ。どうぞお楽しみに。 
 |
 |
| INDEX | ||
| ［連載］jQuery Mobile入門 | ||
| jQuery Mobileページの基本構造を理解しよう | ||
| 1．jQuery Mobileとは？／HTML5ページの基本マークアップ | ||
| 2．jQuery Mobileページの基本マークアップ | ||
 |
3．jQueryアプリケーションを複数ページに対応する | |
 |
||
 |
「連載：jQuery Mobile入門」 |
- 第2回 簡潔なコーディングのために （2017/7/26）
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 （2017/7/21）
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために （2017/7/19）
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator （2017/7/18）
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
- - PR -
注目のテーマ
業務アプリInsider 記事ランキング
転職／派遣情報を探す
