最速インターフェース研究会

[Ajax] location.hashを使ったセッション復元

最近になってようやくJavaScript関係、動的ロードを使ったテクニック等について
話せる相手ができまして、、なかなか充実しています。

Gmail、GoogleMapsのような画面遷移なしの高速なナビゲーションが注目されています。
サイトが特定のタスクに対して特化している場合、JavaScriptを使ったインターフェースの最適化が非常に有用であるのは間違いありません。

ブラウザ上で動作するリッチクライアントとしてはFlashが圧倒的に有名ですが、Flashは、ブックマーク、ブラウザの戻る進む機能、文字の拡大縮小、などのブラウザが本来備えている機能が使えないため、ユーザビリティ研究者の間では嫌われ者です。

http://d.hatena.ne.jp/nazoking/20050226
というわけで、AjaxがFlashのような使い方をされないような実装例を考えてみたいと思います。

一つは、GoogleMapsのように、現在の緯度経度、検索条件を?以降のパラメータ(QUERY_STRING)で渡してやる方法です。マップをスクロールするたびに、リンク用のアドレスが更新されて、ショートカットをコピーできるようになっています。
従来のQUERY_STRINGを使う場合のメリットは、サーバー側が検索クエリを理解できるので、スクリプト無効の環境でもそれなりの表示ができる
ように誘導をすることができる点です。

もう一つは、検索クエリの状態をlocation.hashで保存できるようにするという方法です。

http://la.ma.la/filer/#find=HTA

onload時にlocation.hashの値を元にして、検索条件を復元しています。
また、検索時にリアルタイムで#以降の文字列が変化し、そのままブックマークすることができます。
Flashでもこのような実装は可能なのかもしれませんが、少なくとも自分は今まで見たことがありません。

location.hash、#以降の文字列を使うメリットは、
同じURLとして扱われるためキャッシングとの相性がよいという点がまず考えられますが、さらに大きなメリットはサーバー側にログが残らないという点です。

クライアント側で検索を実行するようにした場合、
location.hashを使った引数の解釈から、検索の実行までが完全にローカルで行われるため、どんな検索語句を使ったのかサーバー側に一切ログを残さないで済みます。

location.hashの変更をタイマーで監視して、変更に応じてデータをロード、画面を更新してやる、という手法をとれば、
画面遷移なし、かつ、ブラウザの戻る進むボタンが使える、という実装も可能でしょう。

----
応用として、
?username#passwordといったリクエストを送ることで

1. サーバーはusernameに対応した、暗号化された状態のデータをXMLHTTPで送る
2. クライアントは#passwordに指定された秘密鍵を使って、元のテキストに復元
3. データの更新時はクライアント側がテキストを暗号化し、サーバーにデータを預ける

これによりサーバー側が元のデータを絶対に知りえない
プライベートデータを保存できるストレージを用意することができる、ということを考えています。
というかかなり前に考えていたのですが、構想の段階で終わっています。

JavaScriptを使った公開鍵暗号の実装は、実際に試せるサイトがいくつかあります。
http://www.faireal.net/demo/PigPGP/0_2_3ja

サービス会社が個人情報を握ることなく実現できる
ソーシャルネットワークサービス、なんていうのを考えているのですが、
ストックしているアイディアの量に対して、圧倒的に時間も作る能力も足りません。

興味のある方は是非やってみてください。

A quick preview will be rendered here when you click "Preview" button.