Ajaxでも「戻る」ボタンを使えるようにする

Ajaxと「戻る」

私の作っている事典サイトのQ-pediaは、画面の切替をAjaxで行っています。これはこれでよいのですが、非常に大きな問題がありました。それは「戻る」ボタンが使えないということです。これを解決しておいたのが今日のお題です。

賢明な読者様ならば御存じのように、Ajaxでは真の意味での「画面遷移」をしません。それに対して、非Ajaxでは「画面遷移」を行います。画面遷移を行うということは対応する「戻る」(そして「進む」)が存在するということになります。

以下は、非Ajax型の「画面遷移」です。遷移でURL自体が書き換わります。

以下はAjax型の「画面遷移」です。JavaScriptによって、元のURLの画面の一部を書き換えているだけです。

というわけで、普通にAjaxを使うと「戻る」ボタンが使えないという問題が起きます。戻り先URLなるものが存在しないので当然です。

それでも「戻る」ボタンを使いたい

一般にウェブブラウジングでは「戻る」ボタンが必要ない場合もあるかと思います。ただ、私の作っているQ-pediaは、事典サイトという都合上、用語間を行き来したいと思いますので少々致命的です。そこで、それでもなおかつ「戻る」ボタンを使えるようにしてみたいと思います。

「戻る」ことができるということは、当然ながら戻り先のURLが存在するということです。従って異なるURLを呼び出さねばならないわけです。

従って、次のようにします。

用語リンクをクリックすると、隠しiframeのURLを遷移させる(show.php?用語)
隠しiframeではonLoadで、メイン画面に対して指定された用語をAjaxで再描画させる
戻るボタンが押されると、iframeで「戻る」ので、再びonLoadで適切な用語がロードされる

例えば「コンピュータ」→「インターネット」→「WWW」→「戻る」と操作したときは、次のようになります。

現在メイン画面では「コンピュータ」の説明が書かれている
「インターネット」がクリックされたので、iframeでshow.php?インターネットがロードされる
show.php?インターネットがロードされると、onLoadでメイン画面に「インターネット」をAjaxで書く
「WWW」がクリックされたので、iframeでshow.php?WWW がロードされる
show.php?WWW がロードされると、onLoadでメイン画面に「WWW」をAjaxで書く
「戻る」ボタンが押されたので、iframeは show.php?インターネットとなる。
show.php?インターネットがロードされたので、再びonLoadでメイン画面に「インターネット」をAjaxで書く

という感じになります。

しかし、実は一番最初にロードしたページだけは、わざとAjaxを経由せずに書いてあります。これはGoogleなどのロボットがページ収集にきたときのためです。Ajaxを経由していない部分については、別の方法で「戻る」に指せねばならないのです。そこだけはフラグで判定しています。(初回ロードだけは、ロボット対策でAjaxを用いずに書き、次回からはAjaxで書く。)

以上の手法によって、少なくとも表面的にはAjaxのみを用いながらも、なおかつ用語遷移についてのみは、全て「戻る」「進む」を用いることができます。

意味があるのか?

上記の「戻る」ボタンについて、

そもそもiframeを使っているのだったら、最初からiframeで単語を表示すればよいのでは?

という不粋なツッコミもあるかもしれませんが、そのようなことをいう人には「夢のない人だね」と一言断っておくだけにいたしましょう。

いや、確実なるメリットは、CSSだのを再度読み込まなくてよいということかと思いますが、大してメリットがないような気もしないでもない今日このごろです。