HTML5 History APIについて
2013.02.26
この記事は最終更新日から1年以上が経過しています。
History APIとは
History APIはHTML5の機能のひとつとなります。Historyとは履歴のことで、historyという名前のオブジェクトで存在します。
ブラウザの戻る進むボタンのイベントを取得してページの内容を動的に変えることができるものです。
まず、historyについてなんですが、history自体は昔からあり、いくつかメソッドを持つオブジェクトでした。よく使われているメソッドの一つにhistory.backが存在します。
history.back();
では実際に用意しましたので押してみましょう。以下のボタンを押すと一つ前に見たページと戻るかと思います。
<input onclick="history.back()" type="button" value="戻る" />
「戻る」とは逆に「進む」場合はhistory.forward()を使用します。
また、引数を与え、任意の数だけ進んだり戻ったり（2つ先に進む、3つ前に戻る等）行う場合に利用するhistory.goがあります。
history.go(2); history.go(-3);
history.go(2);のように正の数値は「進む」history.go(-3);の様に負の数値は「戻る」となります。上記の例だと、2つ進むと3つ戻る。となります。
履歴の追加：スタック
それでは本題に。HTML5になり、新機能として追加されたのは履歴の追加となります。
ブラウザの履歴の一つ一つの記録をスタックといい、一つ履歴が増える度にスタックが増えることになります。
HistoryAPIを使うとこのスタックをページ推移を行わなくても追加できるようになりました。
それでは実際に履歴の追加を行いましょう。
上記のボタンを押すと、URLの部分が
https://www.webcyou.com/history-test
となるのが確認できるかと思います。
実際、URLのページを確認してみますと、ページとしては存在しない状態なのが確認できます。
ブラウザで「戻る」をやってみましょう。またもページが変わらずに、URLが元のように戻ったと思います。つまり、これが意味するのは、このボタンによって、実際にページが変わったわけではないけれども履歴が追加されたということです。「進む」を押してみるとまたURLが変わるはずです。
このように履歴（スタック）を追加するメソッドはhistory.pushStateとなります。
history.pushState
history.pushState(null,'history-test','/history-test')
history.pushState()には、3つの引数がありますが、この時の「第一引数はstate」であり、これはその履歴と関連付けられた情報となり、「第二引数はタイトル」となっています。この第一引数、第二引数は省略することはできないため、「null」の値を入れております。
最後の第三引数だけ省略可能であり、値は変更するURLとなっていることがわかるかと思います。省略した場合、URLはかわらず履歴（スタック）だけが追加されることとなります。
戻る・進むイベントを監視
さて、このHistory APIなんですが、履歴を追加して果たして何の役に立つのかってところかと思いますが、追加するだけでは使い道も微妙なので、履歴を移動した。というイベントを取得できるpopstateイベントと組み合わせて利用してみましょう。
window.addEventListener('popstate', function(e) {
},false);
上記のpopstateで移動した際にイベントを取得し、先ほど追加したstateに、履歴に関連付けられた情報がイベントオブジェクトのstateプロパティに入っています。上記の場合だとe.stateとなります。これを用いてどういう履歴か判別可能となっております。
使用箇所
使われる箇所なんですが、タブメニューがあるページなんかで使用することができます。
デモページでは、タブメニューがクリックされた時に、history.pushState()で履歴を追加し、履歴を移動した際は、popstateでイベントを取得し、e.stateでstateプロパティを取得し、該当するタブコンテンツを表示させています。
http://webcyou.com/demo/js/history/history.html
history
history.state
現在のstateを確認することができます。
history.back()
一つ前の履歴に戻ります。
history.forward()
一つ先の履歴に進みます。
history.go(num)
指定した履歴へジャンプします。
history.length
現在の履歴の数を表示。
locationハッシュ
また手軽さといえばハッシュを利用することが手軽かと思います。ハッシュとは、https://www.webcyou.com/index.html#hogegeというような、「#」をハッシュタグといい、「#」以降の部分を用いることです。
Javascriptでは、locationオブジェクトを使い、このハッシュを用いた操作をすることができます。
locationオブジェクトも、古くからありURLを扱うのに用いられます。現在のURLを取得するlocation.hrefなどがよく使われているのではないでしょうか。このlocation.hrefは値を代入すると、そのページへ移動することができます。
ハッシュの部分だけを変更する際は、location.hashを使用します。先程のlocation.hashには”#hogege”と入っていますが、これに代入して変更すると、pushState同様にURLをへんこうすることができます。履歴にも（スタック）追加されます。履歴に入るということは、popStateも使えるということになります。
先ほどのタブの例を、pushStateではなくlocation.hashを用いるように変更したデモページ
これは、pushStateの部分がlocation.hashへの代入になり、popStateイベントのほうもlocation.hashを調べています。
ここで注目すべきことは、popStateが呼び出された時点でlocationのURL情報は履歴移動後のものになっているということです。ですから、例えばpushStateの第三引数にURLを指定した場合、location.hrefを調べることでURLをもとにした処理ができます。
hashchangeイベント
popstateと似たイベントとして、ハッシュだけが変更した際に発生するhashchangeイベントも存在します。ハッシュのみが変更した際なのでpushStateの第三引数によってURLも変わってしまった場合の履歴移動などでは発生しないイベントとなります。
hashchangeイベントのイベントオブジェクトにはoldURLとnewURLという2つのプロパティが存在し、移動元・移動後のURLを両方取得することが可能となっております。
hashchangeイベントを用いたデモページは以下になります。
http://webcyou.com/demo/js/history/history2.html
location
location.href
指定したURLへジャンプ
location.protocol
現在ページURLのプロトコル（通信手段）を取得
location.hostname
現在ページURLのホスト名を取得
location.pathname
現在のドメインを覗いたディレクトリパスを取得。
location.search
現在のURLの?の後ろのパラメータを取得
location.hash
