1300の優良サイトを調査してみたシリーズ、第8回は「pjax」です。
Webアプリケーションには、「http://〜/sample.cgi」のようなクエリストリングでなく、「http://〜/#!/sample」のようにハッシュとして持たせ、Ajaxによってデータを動的に取得する仕組みのものがあります。
その際、「#」や「#!」の後ろに続くパラメータを「ハッシュフラグメント」といいます。「Ajax URL」という呼び方もされます。
インターネット上でこれを実現する場合、Googleが公開しているドキュメントを参考に、URLのデザインを決定することになります。
また、ハッシュフラグメントを利用したハイパーリンクはページ内移動という扱いになるため、「戻る」ボタンが有効に機能しなくなります。これには、pushStateを利用することで改善を図ることができます。
ここで紹介するライブラリは、1300の優良サイトが行っているpjaxの課題対策です。ふろしき.jsの調査では、32件(2.66%)のサイトで対策が確認されました。
navi.js (20件 - 1.53%)
ハッシュフラグメントを使ったWebページの作成を実現するためのフレームワークです。ハッシュフラグメントの課題を意識することなく、アプリの開発を行えます。
- 公式サイト：http://navi.grantcr.com/
- ライセンス：MIT / Creative Commons Attribution-ShareAlike 3.0 Unported License.
- 開発：Tyler Grant
jQuery Ba Hashchange (12件 - 0.92%)
「戻る」ボタン、「進む」ボタンがクリックされた際の動作を作りこむライブラリです。
- 公式サイト：http://benalman.com/projects/jquery-hashchange-plugin/
- ライセンス：MIT licenses
pjaxの弱点
pjaxは一時期盛り上がった手段ではありますが、現在多くのWebサイトが元に戻す傾向にあります。Twitterも一時は採用していましたが、現在は「http://twitter.com/kawada_hiroshi」のようなURL表記にリダイレクトされるようになりました。
pjaxで作ったページは、Googleの検索エンジンのクローラから読み取れるようにするためには、JavaScriptを利用しなくても読み取れるページを「http://〜/?_escaped_fragment_=/sample」のフォーマットに従って作成する必要があります。JavaScriptが無効の環境、つまりクロスブラウザ対応が完全にはならないのです。
ローカルネットワークのアプリケーションでは課題にならないでしょう。業務系アプリの場合だと、どちらが良いか選択の余地は十分にあるかと思います。
