2011年09月10日
RESTfulなAjaxを実現する pjax
前回、ブログを書いたのが6月9日。。。ってことで３ヶ月ぶりのPOSTです。
7月11日にWebSocketのDraft(IETF)がLast Callを迎えました。この時のrevisionは10だったのですが、9月8日時点で、revisionは14まで更新されています（ざっと見た感じ、エディトリアルと細かい点の変更がメインなようです）。また、これに伴いW3CのAPI仕様もバイナリーが扱えるように変更が進んでいるようです(Blob と ArrayBufferで指定する様子)。まだ、ブラウザでバイナリーメッセージングが使える状態ではありませんが、楽しみですね！！この辺りは、もうちょっと調べてから。。。ということで、また後日POSTしたいと思います:)
今回は、7月に僕が講演したプレゼン資料を紹介します。
pjax〜HTML5時代のAjaxサイトプラクティス〜
以下で紹介するのは第19回HTML5とか勉強会でのプレゼンスライドに関するものです。
講演した内容は、pjaxに関するものです。pjaxとはpushstate+Ajaxの略で、Ajaxが抱える様々な問題を解決してくれます。HTML5のHistory APIで新たに規定された、pushState(), replaceState()を利用しています。
Ajaxを多用したサイトで、ページ遷移の状態を持たせるために、"#"(ハッシュ)を用い、fragment identifierを活用する事例がよく見られます。この技法は、一見、Ajaxの各種問題（「戻る」ボタンが使えない、ソーシャルでのURL共有が難しい）を解決してくれるように見えますが、あくまで Dirty-Hackです。fragment identifierは、そもそもページの中のショートカットを示すもの。ローカルブラウザ上での操作を制御するものです。しかし、上にあげた技法は、fragment identifierを、状態を表すあたかもURIの一部として用いるもので、RESTfulではありません。このままでは、Webの一意性は失われていってしまうと、僕は思っています。
実際、上にあげた技法は、クローラーとの関わり、Javascriptをオフにした場合、各種状態が絡んだ時のURI共有といったシーンで、問題を引き起こします。今後、Webは各種デバイスの共通プラットフォームとして利用されると予想されます。中には、Javascriptをフルにハンドル出来ない実装系（デバイス）も現れるでしょう。その時に、様々な問題が引き起こされかねません。Webアプリケーションが脚光をあつめ、Javascriptへの注目があつまりサイト製作への比重も高まっているわけですが、RESTfulをベースとする情報アクセス性は守るべきだと僕は思っています。
pjaxとは、Ajaxサイトに対し、RESTfulなWebを提供するためのサイト製作テクニックと考え方を示すものです。Ajaxの高い操作性をユーザーに提供しつつ、クローラーへの対応、Javascript off、ソーシャルでのURI共有に関わる様々な問題を解決してくれます。
僕が作成したサンプルサイトhttp://html5-19th.heroku.com/で、動作を確認できます。左のメニューの切り替えに対し、Ajaxで右側のコンテンツが切り替わるシンプルなものですが、URIの切り替わりが"#"を使っておらず、ブラウザの「戻る」にも対応していることが分かります。
pjaxを動かすためには、History APIのpushState(), replaceState()が実装されていることが必要です。現状対応しているブラウザは、http://caniuse.com/#search=historyで確認でき、IE以外のモダンブラウザでは全てreadyとなっていることがわかります（余談ですが、上記サイトの # の使い方は、操作を表すためにfragment identifierを用いており、Good Practiceとなっています）。ここで「IEで使えないのは。。。」というネガティブな声が聞こえそうですが、そこも問題ありません。対応していないブラウザでは、Ajaxのスピーディーな操作性は諦めなければなりませんが、Webサイトとしてはきちんと機能します。いわゆる progressive enhancementですね（graceful degradationと捉えることもできますが、考え方の話で、僕はprogressive enhancementと思っています）。
利用例も多く見られるようになっておりgithub, facebook, はてなブックマーク（Chrome Webアプリ版）といったメジャーどころが、既に使っています。jQuery Mobileのβ3でもpjaxに対応し（Release Note）、Rails3.1では、pjax-railsの流れも見られます。フレームワークがサポートすることで、今後一般的になっていくと予想されるpjax楽しみですね。そして、日本のWeb市場をはびこる、「みんな平等。IE6も含め、全て同じUXを！！」という考え方が変わっていけばいいなぁと思う次第です。
