jQuery Mobile逆引きリファレンス
jQuery Mobileページでハイパーリンクを設置するには？
jQuery Mobileにおけるリンクの挙動を解説。また、ページ遷移時のエフェクトやプリフェッチ機能についても説明する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQuery Mobileページにハイパーリンクを設置することは、何ら難しいことはありません。おなじみのアンカータグ（＝<a>タグ）を記述するだけです。もっとも、裏側ではjQuery Mobile固有の挙動も絡んでおり、ただ表向きの構文を理解しておけばよいというものではありません。本稿では、前半でjQuery Mobileにおけるリンクの挙動を解説するとともに、後半ではリンクに関連して、ページ遷移時のエフェクトやプリフェッチ機能についても触れます。
jQuery Mobileにおけるページ遷移
jQuery Mobileでは、同一ドメインに対するリンクは、自動的にAjax式リンクとなります。Ajax式リンクでは、次の図に示すように、リンク先のページをいったん非同期通信で現在の文書ツリーに取り込んだ上で、おもむろに目的のページに遷移します。これによって、ページをまたぐとまたがざるとにかかわらず、エフェクトを伴ったスムーズな遷移が可能になっているのです。
もっとも、時として、このようなAjax式リンクが邪魔になることがあります。そのような場合には、以下の方法でAjax式リンクを無効化できます。
|
<!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">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<a href="http://www.wings.msn.to/" class="ui-btn">別ドメイン</a> 1
<a href="basic.html" target="_blank" class="ui-btn">target指定</a> 2
<a href="basic.html" rel="external" class="ui-btn">異なるアプリ</a> 3
<a href="basic.html" data-ajax="false" class="ui-btn">Ajax無効化</a> 4
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
まず、1のようにリンク先が異なるドメインである場合や、2のようにtarget属性が指定されているアンカータグでは、Ajax式リンクは無効となります。これらはあくまで仕組みとしてできないので、結果としてAjaxが無効になると考えるべきです。
明示的にAjaxを無効にしているのが34の例です。まず、3の「rel="external"」属性はリンク先が異なるアプリであることを意味します。同一ドメインにある異なるアプリに対してリンクする際に利用します。
4の「data-ajax="false"」属性は、名前の通り、Ajaxリンクを無効化する例です。同一アプリの中でAjaxリンクを利用したくない場合に利用します。
いずれも結果は同じですが、それぞれの記法で意味が異なりますので、使い分けに注意してください。
リンク先をプリフェッチする
プリフェッチとは、リンク先のページをクリックされる前に先読みし、非表示の状態で待機させておく機能のことを言います。プリフェッチを有効にすることで、リンクをクリックしたときに即座にページの切り替えを開始できますので、ページ移動の体感速度を改善できます。
プリフェッチを有効にするには、アンカータグに対してdata-prefetch属性を付与するだけです。以下はそのコード例です。
|
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<a href="basic.html" class="ui-btn" data-prefetch>プリフェッチ</a>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
|
ただし、プリフェッチ機能は当該ページが実際に表示されなかった場合、無駄なトラフィックの原因ともなります。（例えば）ウィザード式のフォームなど、ほとんどのユーザーが移動するであろうページに限定して利用するようにしてください。
DOMキャッシュを有効にする
Ajax式リンクでは、新たなページに移動した後、不要になったページを適宜破棄します（これはページ遷移に伴って、文書ツリーが肥大化するのを防ぐための施策です）。しかし、（例えば）トップページのように頻繁に行き来するようなページで何度もページを読み込むのは無駄なことです。そのようなページでは、キャッシュ機能を有効にすることで、ページ遷移後もページを文書ツリーで維持できます。
キャッシュを有効にするには、ページ要素に対して「data-dom-cache="true"」属性を付与するだけです（下記のコード）。
|
<div data-role="page" data-dom-cache="true">
……中略……
</div>
|
ただし、キャッシュ機能を有効にするのは頻繁に行き来するページにとどめるようにしてください。その性質上、キャッシュ機能は文書ツリーを肥大化させ、場合によっては、ブラウザーの動作を不安定にさせる可能性があるためです。
ページ遷移時のエフェクトを変更する
Ajax式のリンクでは、ページ遷移時にエフェクトを適用できます。デフォルトでは「Fade」（フェード）ですが、これを変更するならばdata-transition属性を指定してください（下記のコードはその例）。
|
<a href="basic.html" class="ui-btn"
data-transition="slide">ページ遷移エフェクト</a>
|
［ページ遷移エフェクト］ボタンをタップ
ページが右から左へスライド（slide）して遷移する
data-transition属性で指定できる値には、以下のようなものがあります。
| 属性値 | 概要 |
|---|---|
| fade | 新しいページがフェードイン |
| flip | 新しいページが回転して表示 |
| flow | ページがひとまわり縮小して、新しいページがスライド表示 |
| pop | 新しいページが中心から拡大され表示（ポップアップ） |
| slide | 新しいページが右から左へスライド表示 |
| slidedown | 新しいページが上から下にスライド表示 |
| slidefade | 現在のページがスライドして、新しいページがフェードイン |
| slideup | 新しいページが下から上にスライド表示 |
| turn | 左端から回転するようにして新しいページを表示 |
| none | エフェクトを無効化 |
エフェクトを逆向きに再生する
「data-direction="reverse"」属性を付与することで、data-transition属性で指定したエフェクトを逆向きに再生できます。例えば［ホーム］画面に移動するなど、「戻る」意味合いの強いリンクで利用します。以下は、右→左ではなく、左→右と逆向きにスライドするコードと実行例です。
|
<a href="basic.html" class="ui-btn"
data-transition="slide" data-direction="reverse">エフェクト（reverse）</a>
|
［エフェクト（reverse）］ボタンをタップ
ページが左から右へ（＝逆向きに）スライド（slide）して遷移する
次のコードのように「data-direction="reverse"」属性と「data-rel="back"」属性を組み合わせることで、いわゆる［戻る］ボタンを設置することもできます。この場合、現在のページに遷移したときに使われたエフェクトが逆方向に再生されます。
|
<a href="basic.html" class="ui-btn"
data-rel="back" data-direction="reverse">戻る</a>
|
この場合、あくまで「前のページに戻る」ための機能が実装されますので、リンク先を表すhref属性は使われません。しかし、jQuery Mobileが動作しない環境でリンクが正しく動作するよう、適切なhref属性（一般的には［ホーム］へのリンクなど）を明記しておくべきです。
※以下では、本稿の前後を合わせて5回分（第3回～第7回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
4. jQuery Mobileページでヘッダー／フッターの表示をカスタマイズするには？
ヘッダー／フッターを作成する方法を解説。また、ヘッダー／フッターの位置を固定したり、タップで非表示にしたりする方法なども紹介。
5. 【現在、表示中】≫ jQuery Mobileページでハイパーリンクを設置するには？
jQuery Mobileにおけるリンクの挙動を解説。また、ページ遷移時のエフェクトやプリフェッチ機能についても説明する。
6. jQuery Mobileページでローディング表示をカスタマイズするには？
jQuery Mobileで、ページ読み込みに際してローディングアイコンを表示する方法と、ローディング表示を制御する基本的なテクニックを解説。
7. jQuery Mobileページにボタンを配置するには？
jQuery Mobileページでボタンを設置するには、＜button＞／＜a＞／＜input＞要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。
