ページ間リンクの考え方

jQuery Mobileでは、サイトをシンプルなページをリンクで繋いだ集合体として捉えるようデザインされています。基本的に、通常のサイト構築同様にページ間をリンクさせれば、フレームワークはAjaxによる切り替えを自動的に引き受けてくれます。そしてAjaxが利用できない場合( 遷移先のドメインが異なる、Ajaxを使わないよう指定されているなど )、まったく通常のHTTPリクエストが行われることになります。

このモデルは、一般的なサイト構築手順を踏襲することで、特別な設定なくリッチなサイト構築が行えることを目指しています。

Ajaxを用いたデフォルトの挙動

アニメーション効果のついたページ切り替えを有効にしておくと、ページ間のリンクは全て自動的にAjaxを用いたものになります。この時フレームワークはアンカー要素の href 属性を解析し、Ajaxリクエストを実行します。これらは全て、jQuery Mobileにより自動的に行われることです。

Ajaxリクエストが成功すると、取得されたページのコンテンツはDOMに追加されます。コンテンツ上のウィジェットは全て自動初期化され、その後で現在のページから新しいページへの切り替え処理が行われます。

Ajaxリクエストが失敗した場合、フレームワークはページ上に小さなエラーメッセージ(スウォッチ“e“でスタイルされたもの)を表示します。このメッセージは、邪魔にならないよう少しすると消えます。Ajax失敗時の挙動は、このリンクをクリックして確認してください。

Ajaxナビゲーションで、複数ページドキュメントの奥階層にリンクすることは出来ないので注意してください。フレームワークがAjaxで取得するのは、HTML内の最初のページコンテンツだけです。複数ページドキュメントにリンクしたい場合、Ajaxを用いない形でリンクする必要があります(次節参照)。これは現在 Subpageプラグイン により解決することも可能です。

Ajaxを用いないリンク

リンク先が他のドメインである場合や、アンカー要素が rel=“external” , *data-ajax=“false” , target などの属性を持っている場合、Ajaxによるナビゲーションは行われなくなります。代わりに、リンクは通常のWebとしてページ全体を更新します。前述の2つの属性指定( rel=“external” と data-ajax=“false” )は、その効果は同じです。しかし、セマンティックな意味は異なります。最初の rel=“external” は、他のサイトへのリンクに用いられます。一方 data-ajax=“false” は同じサイト内であっても何らかの理由でAjaxによる遷移を行いたくない場合に使います。フレームワークはセキュリティ上の理由から、ドメインが異なる場合は常にAjaxによる取得を行いません。

サイト設計上、すべてのリンクに対してAjaxによるページ遷移をさせたくない場合、各リンクに記述してまわるのではなくグローバル設定により $.mobile.pushStateEnabled の値を変えることをお勧めします。

「戻る」ボタンリンク

アンカー要素に data-rel=“back” を指定することで、ブラウザの「戻る」ボタンの動作を実装することができます。この場合、クリックにより履歴がひとつ前に戻り、href属性に指定されたURLは無視されます。これは例えばダイアログボックスの「閉じる」インターフェースを実装する場合などに便利でしょう。

前述の通り、この際に href 属性の値は無視されますが、かといってここに全く無意味なURLを記述してはいけません。JavaScriptが正しく動作しないCグレードのブラウザなどでは、戻るボタンとして動作せず通常のリンクになってしまう場合があります。サイトのトップページなど、意味のあるリンク先を記述しておくようにしましょう。また、ブラウザの履歴を辿るのではなく通常のリンクでありながら、意味するものは明らかに「戻る」であった場合、属性 data-direction=“reverse” を指定することでアニメーション効果を逆回しにできます。

リダイレクトとディレクトリへのリンク

ディレクトリへのリンク(例えば “typesofcats/index.html” へのリンクをつくる場合に “typesofcats/” と指定する)をする場合、最後のスラッシュ(/)を忘れないようにしてください。これはjQuery Mobileが最後のスラッシュ以降をファイル名と判断してしまうためです。リンク先のページに入った後、ベースURLとして実際よりひとつ上の階層が用いられ、挙動をおかしくしてしまいます。

この問題は、ページコンテナに data-url 属性を指定することで回避することが出来ます。この指定があれば、jQuery MobileはURLからの自動判別ではなく属性値をベースURLとして用います。これを利用することで、リダイレクトのような結果を得ることも可能です。たとえば、フォームで “login.html” にポストしたものの、ログインに成功した結果としてURLは “/account” になって欲しいような場合です。ここでは、ブラウザの履歴制御も行えます。

たとえばこのリンクは、”/jqm/ref.php?id=links-url” というページへのものです。しかし遷移後のURLは “/jqm/ref/links-url/” となっています。これが、ページコンテナでの data-url 属性指定による効果です。そして、リンク先はこの例のように実在のものである必要はありません。設計次第となりますので注意してください。

こうしたテクニックについて詳しくは Ajaxとハッシュ、履歴 を参照してください。

リンクフォーマットの例

標準的なリンクフォーマットは、すべてjQuery Mobileでも利用可能です。以下に、その例を示します。