Gmailを手本にフルAjaxアプリ
最近、初期画面からの遷移を全てAjaxで行うアプリを作る機会がありました。こういうアプリの標準的な構築手法を調べてみたところ、どうやらGmailがいちばんの手本のようです。
最近のRoR系FWだと、アプリのURLは
コントローラ名/メソッド名/ID
または
コントローラ名/メソッド名/key1/value1/key2/value2
となるのが殆どだと思います。GETのパラメータをURLに置き換えて、URLで状態を定義するという手法です。これは通常のWebアプリの場合は有効ですが、Ajaxアプリはサーバに対してURL遷移を行わないので、この手法は使えません。
Gmailの場合、画面ごとに画面名やパラメータをリンクのハッシュに付加していました。
全てのメールの2ページめ
https://mail.google.com/mail/?hl=ja&shva=1#all/p2
変更するのはハッシュのみですので、サーバへの画面遷移は行われませんが、URLの履歴は残ります。表示されているURLをコピーして、別タブで直接アクセスしても、画面は再現されます。
これを自前アプリでやろうと思ったら
コントローラ名/初期画面メソッド名#key1/value1/key2/value2
とか
コントローラ名/初期画面メソッド名#value1/value2
のようなかたちでURLを定義して、クリック時にハッシュ値から送信パラメータを生成し、Ajaxで更新を行えばいいことになります。ロード時にハッシュの値がURLに含まれていた場合は自動的に更新するようにすれば、URLの直接アクセスにも対応できます。
ただし、これだけでは戻るボタンには対応できません。URLの履歴は残っていますが、locationのハッシュだけが変更されたときに画面を更新するような仕組みが必要です。Ajaxアプリは戻るボタンが効かない・・・とよく言われる（サイ本もそう書いてる）けど・・・でもGmailはちゃんと戻るボタンが効きます。
ググってみたところ、どうやらsetIntervalで定期的にlocation.hashをチェックして、変更されていたら更新する・・・という仕組みで、戻るボタンの挙動を再現するのが一般的のようですね。locationの変更を監視するようなイベントがあればもっと楽なんでしょうけど。
上記を踏まえて・・・
- Ajaxで遷移するリンクに、変更するパラメータのハッシュを記述
- クリックしてlocationのハッシュを更新
- setIntervalでセットした関数内で、ハッシュが変更されたかチェックし、変更されていた場合ハッシュからパラメータ生成してAjax送信実行。現在のハッシュを保持しておく
こんな形で、汎用的なAjax用画面遷移が定義できるのかなと。setIntervalは戻るボタン用だけにして、通常のクリック時はclearIntervalして普通にAjaxイベントを実行して終了後にまたsetInterval・・・とかした方がいいかな？
そういやIEだとiframeが必要とかどうとからしいです。IE8だと普通に動いたのですが、更に古いブラウザ対応が必要なときは調査した方がよさそうです。
