document.location.hash を使ってブックマーク可能なAJAXアプリケーション

近年DynamicHTML や AJAX といった技術を使ったサイトを見かけますが、ブックマークできない/しにくいものが多くて困ります。

DynamicHTML を使うと画面の一部だけを書き換えることで画面遷移が発生しない軽快なページを表現できます。
しかし、その代償として状態に変化があっても URL が変化しないため URL のクエリに情報を保持させて、ブックマークから開いた時に状態を回復させることができません。

せっかく軽快に動作するのに、「ほらココ！」ってメールやチャットで伝える時には「リンク」をクリックしてクエリ入りの URL で再描画させたり、右クリックで URL をコピーしたりするのは面倒です。

、というわけで、画面遷移が発生しないアンカの部分を JavaScript から操作できなものかと調べたらアッサリできました。
document.location.href = “何か”; でアクセス出来るみたい。

画面上で何か変更が生じたらアンカにパラメータを織り込むように同時に更新。
また onload でアンカにパラメータを確認したら状態を回復。
これでブックマークからも状態を回復できるし、メールやチャットでもそのまま URL を渡すことができます。

サンプルは簡単Google Mapsに実装しました。
地図のドラッグ、地図タイプの変更、ズームレベルの変更の度にアンカが書き換わりブックマークしておけば同じ状態を回復できます。
同時にWebサイト貼り付け用のコードが生成されます。

あまり例を見ないので何か壁があるのかなーとも思いましたが特に難しいことはないですね。

yusuke.blog