--/-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

02/01 2010

Ajax!『戻る』ボタンで履歴を辿る、クッキー(Cookie)で。

 ウェブページがページ遷移することなく動的に変化するAjaxは、GoogleMapsによって瞬く間に広まりました。私もその影響を強く受けた一人で、昨年11月末よりサービスを開始したクラウド型聖書検索・並列表示サイド『DT Works』では、ページを全く移動することなく各種聖書を自由自在に開いて検索でき、ウェブページであることを忘れて、ソフトウェアを使用している感覚になってしまいます。

 Ajaxなウェブページで頭を悩ませることがあります。それは「ブラウザの『戻る』ボタンを押すと、全く別のサイトに飛んでしまって、1つ前の動作に戻れない」ということです。現行のブラウザの履歴機能は、複数のウェブページを行き来することを前提としているため、同一ページ内でのAjaxなイベント変化には対応していません。さらに悲劇なのは、別サイトに飛んでしまった後に、もう一度戻ってくると、Ajaxの初期画面に戻ってしまうことです。なんらかの仕組みを取り入れなければ、Ajaxなページは利用者に混乱をもたらします。

 この課題の解決策としては、「URLのアンカー・ハッシュを利用する方法」が広く活用されています・・・

 Google CodeにあるReal Simple historyとか、jquery history pluginは、Ajaxなイベントごとに、URLへhtmlリンクで使われるアンカーを付け加え、ブラウザの履歴に残してしまおう、という方法です。Gmailなどを利用している方は、URLが「https://mail.google.com/mail/?account_id=***@gmail.com&shva=1#inbox」となったりしますね。この赤い部分のことです。この手法は、1セッション内にて『戻る』ボタンや『進む』ボタンを有効に活用できる方法として優れています。また、ブックマークにも役立ちます。

 ただ、Ajaxなウェブサービスの中には「別セッションで再び訪問した時にも、かつての履歴が残っていてほしい」場合があります。DT Worksもそんなサービスの1つです。聖書の言葉(聖句)は3万以上あり、利用者の多くはある一定期間、特定の聖句を中心にその前後を移動したり、表示モードを切り替えたりします。しかも時々、語句検索をして、遠く離れた聖句を開いて比較研究したりします。このように、特徴豊かな履歴そのものが1つの財産となって、別セッションで再訪問したときにもその履歴を活用したい場合には、ブラウザの履歴ではなく、クッキー(Cookie)への履歴保存が効果的です。

 Mike Brittain氏がIBMのオープンソースで公開しているHistory.jsはクッキー保存型の履歴スタック・オブジェクトとして大変優れています。読み込むJavaScriptファイルはたったの4KBです。HistoryStack()関数内の「this.stack_limit」の数を変えれば、イベント履歴個数を自由に設定できます。イベント履歴を戻るときはdo_back()関数、進む時はdo_forward()関数、更新(現状のイベントを再読み込み)の時はdo_reload()関数を実行させるだけです。導入ウェブページに合わせて取り組まなければならないのはクッキーに新規イベント履歴データを上書き保存するdo_add()関数と、指定したイベント履歴に応じた表示を産み出すdisplay()関数だけでしょう。これはダウンロードファイルに含まれているhistory_testkit.htmlファイルのコードと、そのサンプルプログラムの動作を見比べながら、移植できるでしょう。

 さてHistory.jsは、ディフォルトではセッションクッキーとなっていますので、別セッションでウェブページを開いた場合に履歴は消えてしまいます。これではURLのアンカー・ハッシュ方法のほうがよかった、ということになってしまうので、ちょっと工夫してクッキーの保存期間を設定するとよいでしょう。その方法は、history.jsファイル内にあるHistoryStack.prototype.setCookie関数に保存期間を導入します。コード135行目です。

Before

HistoryStack.prototype.setCookie = function(name, value)
{
var cookie_str = name + "=" + escape(value);
document.cookie = cookie_str;
};

After (一週間のクッキー期限の場合)

HistoryStack.prototype.setCookie = function(name, value)
{
var now = new Date();
now.setTime(now.getTime() + 24*60*60*1000*7); //7day後
var cookie_str = name + "=" + escape(value)+";expires="+now.toGMTString();
document.cookie = cookie_str;
};

 これで、履歴をクッキーに保存できるAjaxページに生まれ変わることができます。もちろん、ユーザーがブラウザの「戻る」ボタンを押した場合にはURLアンカー・ハッシュ方法ではないので、別サイトに飛んでしまいます。しかし、再び戻ってきてくだされば、クッキーに履歴が保存されていますので、直前のイベント表示になります。しかも、別セッションの際にも直前イベント表示となり、過去の履歴も活用できます。

 ユーザーにとって、イベント履歴そのものが保存されるのが便利なAjaxウェブページであるならば、クッキーに保存するHistory.jsがお薦めです。


blog comments powered by Disqus
このページのTOPへ
聖書リスニング
DTメンバー募集(無料!)

Devotion Timeのメルマガメンバーになりませんか!メンバー限定企画もあり!ご希望の方はメールアドレスを入力して下さい。(さらに詳しく >>)

Profile

ブロガー: 西原智彦
1972年広島生まれ。ロボットが好きで工学修士に(1996)。聖書に惚れ込み、実践神学修士に(2005)。(さらに詳しく >>)

カテゴリ
お問い合わせフォーム

個人的な感想、ご質問にどうぞ

お名前(ハンドルネームOKです):
メールアドレス:
件名:
本文:

Copyright © Devotion Time All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。