Ajaxページへのパーマリンクを#!なしで実現する

TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場
Ajaxを多用しつつパーマリンクも提供しているサイトのURLは、「#!ほげほげ」のような形式になっていることがよくあります。上の記事に書かれているように、これにはちゃんと理由があるわけなんですが、やっぱり「#!なんてのが含まれるURLは格好悪い」と感じる人も多いようです。
そこで、「#!ほげほげ」なんてURLを使わなくてもAjaxの画面遷移を実現する、Session HistoryというHTML5の機能を紹介します。
Session history demo
ChromeSafariで上のページにアクセスし、地図をドラッグしてみてください。地図を動かすたびにURLが変化しているのに気づくでしょう。そこでブラウザの戻るや進むキーを押すと、地図の移動履歴を辿ることもできます。また、URLをコピペして別ウインドウで開き、同じ場所の地図が表示されることも確認してみてください。
このように、JavaScriptからブラウザの履歴やURLを操作する仕組みがSession Historyです。上のデモページでは?以降だけを変化させましたが、実際はsame origin policyに従っている限りどんなURLにも変化させることが可能です。たとえば、以下の「今ココなう!Webアプリ」でもSession Historyを使用しています。
http://imakoko-iphone.appspot.com/m/
Session Historyを使えば、#!のような格好悪いURLを用いなくてもパーマリンク可能なAjaxページが作れるようになるはずです。Session HistoryはFirefoxでもバージョン4から使えるようになりますし、iOS4やAndroid2.2のブラウザでも利用可能です。
参考: history.pushState、history.replaceState - 素人がプログラミングを勉強していたブログ