WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

History.pushStateとpopStateの味な使い方

      2015/08/18

先日ホームページをリニューアルしたとき、トップページにちょっとした細工をしました。 どんな細工かというとHTML5の機能のうち、もっとも不遇というか、使い道に困る存在であったアレを使ったものです。History APIです。今回はこれを使ってサイトのトップページにて履歴操作を行いました。具体的にいうと、トップページの更新情報のうち、「開発中のRPG」というリンクをクリックすると、当該ページに飛ぶ直前に「更新情報のカテゴリーページ」の履歴を差し込むスクリプトを書きました。これによって、ユーザーが「開発中のRPG」ページを見た後にブラウザの「戻る」ボタンを押すと、トップページには戻らずスクリプトで差し込んだ更新情報のカテゴリーページに戻るようになります。 何のためにそうするかというと、サイトのトップページという比較的重いページとコンテンツページを直接行き来しないようにするためです。たとえば、更新情報のリンクをクリックしたユーザーが、そのリンク先を確認したあと、他の更新情報にも目を向けるかもしれないと考えるのは自然なことです。そうなると再表示に少し時間がかかるかもしれないトップページへ戻すより、更新情報のリストがある、より軽くて詳細なカテゴリーページに誘導してワンクッション置く風にした方がユーザーの負担にならないのではないか、というわけです。 ただし、ユーザーからしてみれば、履歴を勝手に書き換えられたわけですから、むしろ反発を覚える人がいるかもしれません。とはいえ、もう一度ブラウザバックすればトップページに戻るので、そこまでまずいやり方でもないのではないでしょうか。 また、今回は更新情報のリンクでテストしていますが、企業サイトなどではもっと他の使い道があるかと思います。分かりやすい例で、トップページのサイドバーにQ&Aコーナーのあるサイトを考えてみます。そして、そこに訪れたユーザーがQ&Aにちょうど自分のに合った質問のリンクがあったので、リンク先のページに移動したとします。ユーザーはそのページの回答に満足したものの、別のQ&Aも見たくなりました。 しかし、そのユーザーはそのページ内のQ&Aカテゴリーページへのリンクを探すよりも楽な「戻るボタン」を押してトップページに戻るかもしれません。その回答ページにトップページと同様にQ&Aリストがあるとしてもです。トップページから深いページに進むと、ユーザーはそのサイトから離脱しにくくなります。ネットユーザーの傾向として、初めて訪問するサイトではいつでも離脱できるよう浅い階層に留まり、重奥深い階層には行きたがらないものです。戻るボタンを押すのが面倒だからです。でも、ワンクリックでトップページに戻れる範囲なら、ユーザーに歓迎されるでしょう。それも重くてごちゃごちゃしたトップページとの行き来をしなくて済む構造にできればなおのことです。 今回の細工の狙いはそのようなところでして、発展性があるかどうかは未検証です。また、History APIの組み込みに結構苦労しました。個人サイトの規模だから何とかなったのだともいえます。ユーザーの反応も未知数ですから、そのあたりはご意見お願いしたいと思います。長くなりましたが、ひとますまここまでに。

 - JavaScript/Ajax , , ,