読者です 読者をやめる 読者になる 読者になる

ふろしき.js

Web + Mobile + UX + Performance Tech

1300の優良サイトが選んだ「pjax」ライブラリ集と問題点

1300サイト調査 ライブラリ 用語・TIPS Web制作者向け

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%)

f:id:furoshiki0223:20131022231147p:plain
ハッシュフラグメントを使ったWebページの作成を実現するためのフレームワークです。ハッシュフラグメントの課題を意識することなく、アプリの開発を行えます。

  • 公式サイト:http://navi.grantcr.com/
  • ライセンス:MIT / Creative Commons Attribution-ShareAlike 3.0 Unported License.
  • 開発:Tyler Grant

jQuery Ba Hashchange (12件 - 0.92%)

f:id:furoshiki0223:20131022231220p:plain
「戻る」ボタン、「進む」ボタンがクリックされた際の動作を作りこむライブラリです。

pjaxの弱点

pjaxは一時期盛り上がった手段ではありますが、現在多くのWebサイトが元に戻す傾向にあります。Twitterも一時は採用していましたが、現在は「http://twitter.com/kawada_hiroshi」のようなURL表記にリダイレクトされるようになりました。

pjaxで作ったページは、Googleの検索エンジンのクローラから読み取れるようにするためには、JavaScriptを利用しなくても読み取れるページを「http://〜/?_escaped_fragment_=/sample」のフォーマットに従って作成する必要があります。JavaScriptが無効の環境、つまりクロスブラウザ対応が完全にはならないのです。

ローカルネットワークのアプリケーションでは課題にならないでしょう。業務系アプリの場合だと、どちらが良いか選択の余地は十分にあるかと思います。

広告を非表示にする