Really Simple HistoryでAJAXにブックマーク機能と履歴機能を付加する

文:Tony Patton(Special to TecRepublic) 翻訳校正:石橋啓一郎
2008-03-04 13:53:01
  • このエントリーをはてなブックマークに追加

 AJAXベースのアプリケーションに取り組んでいれば、その動的な性格から、アプリケーションのどこかでページをブックマークすることができないことに気づいただろう。これは、ユーザーが「戻る」ボタンを押した時にも問題になる。ブックマークと履歴の問題を解決する方法の1つが、Really Simple History(RSH)フレームワークを使うことだ。

 RSHの必要性は、動的なウェブサイトとブラウザ組み込みの操作方法の組み合わせに固有の問題から生じている。ブラウザは複数のページから成るサイトを念頭に開発されており、AJAXを用いた動的アプリケーションは前提としていない。

 問題は、ユーザーがAJAXを用いたサイトの外側でナビゲーションの操作をした場合に生じる。ユーザーがサイトに戻ってきた時には、ユーザーはその結果は起こることに驚くことになる。前にサイトを訪れた時の状態が維持されないからだ。

 この問題を解決するためには、ページが更新されたり、ブラウザのナビゲーションボタンでページを移動して回った場合でも、アプリケーションが状態を維持できる方法が必要となる。これによって、ユーザーはサイトに戻ってきたりブックマークしたりすることができるようになる。

 RSHは元々Brad Neuberg氏が2005年に開発したもので、今ではGoogle Codeのサイトで管理されている。最新バージョン(0.6)は2007年12月3日にリリースされたもので、Internet Explorer 7、Safari、Operaをサポートしている。

内部の仕組み

 RSHのすばらしい機能の1つは、標準のJavaScriptだけで作られていると言うことだ。サードパーティのライブラリなどの他のものには依存していない。RSHはアプリケーションデータを内部のJavaScriptキャッシュに保存しておき、ブックマークや「戻る」ボタンを使って以前の状態のアプリケーションに戻ってこれるようにしている。

 RSHのフレームワークは、dhtmlHistoryとhistoryStorageという2つのJavaScriptクラスから成っている。dhtmlHistoryクラスは、AJAXアプリケーションの履歴に関する抽象化を行う。ページは現在のURLとアンカーハッシュを使ってブラウザの履歴に追加される。さらに、AJAXアプリケーションは履歴リスナとして自分自身を登録する。ユーザーが「戻る」や「進む」のボタンで移動を行うと、履歴イベントがトリガされ、ブラウザの新しいURLとこれまでの履歴データが渡される。

 historyStorageクラスは、履歴データを保存することを可能にするものだ。historyStorageクラスは、ユーザーがサイトから移動してしまった時にサイトのデータが失われる問題を解決する。historyStorageクラスはハッシュテーブル(ブラウザ履歴を保存する際にハッシュが使われる)を処理するメソッドを持っている。このクラスを使うと、ユーザーがページを移動する際にデータを保存することができる。

 ハッシュはRSHの重要な側面だ。ハッシュはURLの最後に#記号に続けて記される。これは、RSHによる履歴を閲覧する機能を提供するのに使われる。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]