このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2013.02.26

HTML5 History APIについて

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の部分が

http://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.statestateプロパティを取得し、該当するタブコンテンツを表示させています。

デモページ

http://webcyou.com/demo/js/history/history.html

history

history.state

現在のstateを確認することができます。

history.back()

一つ前の履歴に戻ります。

history.forward()

一つ先の履歴に進みます。

history.go(num)

指定した履歴へジャンプします。

history.length

現在の履歴の数を表示。

locationハッシュ

また手軽さといえばハッシュを利用することが手軽かと思います。ハッシュとは、http://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
  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。