HTML5のお勉強 第5回 ～HistoryAPI～

HTML5になって「HistoryAPI」という新たな機能が登場しました。
今回はこの「HistoryAPI」についてご紹介させていただきます。

HistoryAPIは、ブラウザが保持しているページの履歴を書き換えることができます。
読むよりも見てもらったほうがわかりやすいと思います。
下記URLのページを開いてみてください。
そして、おもむろに「戻る」ボタンを押してみてください。

http://s.codepen.io/jsp-t/debug/qbEEjJ

どうでしょうか。アクセスした覚えがないのに、
「HistoryAPIを使用して履歴を書き換えました。」というURLに飛びませんでしたか？

今お見せしたのはHistoryAPIの機能の一部です。
機能は他にもありますので、簡単に紹介していきます。



HistoryAPIを使用するには「history」という
グローバルオブジェクトを使用します。
historyには大まかに3つの機能があります。
・ページを遷移するAPI
・履歴を書き換えるAPI
・書き換えた履歴にアクセスすると呼ばれるイベント
それぞれ説明します。


◆ページを遷移するAPI
history.back();　　 // 前のページに戻る
history.forward();　// 次のページへ進む
history.go(-2);　　 // 2ページ前に戻る
history.go(2);　　　// 2ページ先へ進む
console.log(history.length);　// 履歴に記録されたページ数を確認する。


◆履歴を書き換えるAPI
履歴を書き換えるAPIには下記の2つがあります。
history.pushState
history.replaceState

・pushStateは現在のページから別のページへと遷移したことにするAPIです。
　実行するとURLが書き換わり、
　ブラウザの「戻る」でpushState実行前のURLに戻ることができます。

・replaceStateは履歴を変更せずに現在のURLを変更するAPIです。
　実行するとURLが書き換わりますが、pushStateと違って履歴は変更されません。

pushState, replaceStateのどちらも
下記のように3つの引数を渡す必要があります。

var state = { msg: "hogehoge" };
var title = "タイトル文字列";
var url = "URL";
history.pushState(state, title, url);

・state
　ブラウザの「戻る」「進む」機能で遷移した際の
　popStateイベントで渡されるオブジェクトです。
　history.stateからも参照することができます。
・title
　現在は使用されません。
　将来的に何かに使う文字列のようです。
・url
　ブラウザのURL欄に表示するURLです。
　同じオリジン※である必要があります。
　※オリジン ... 「http://domain.com:80」のような、
　　プロトコル、ドメイン、ポート番号の組み合わせ

少し注意しないといけないことがあります。
pushState, replaceStateを利用することで、
実際には存在しないページのURLを表示させることができます。
しかし、その状態でページの再読み込みをすると、
「404 Not Found」なページが表示されてしまいます。
そのため、Webアプリケーションなどで使用する場合は、
ユーザが更新ボタンを押しても問題のないように作ると良いですね。


◆書き換えた履歴にアクセスすると呼ばれるイベント
pushState, replaceStateで編集したURLに遷移すると、
'popstate'というイベントが発生します。
このイベントを利用することで、「○○というURLを開いたら××を表示する」
といった処理が実現できます。
具体的には下記のように使用します。

// page1へのリンクをクリックしたので履歴に追加する
history.pushState({page: 1}, null, "?page=1");

// 戻るボタンを押すと'popstate'イベントが発生する。
window.addEventListener("popstate", function(e) {
　// このイベントが発生した時点でURLは書き換わっています。

　// pushState, replaceStateで渡したstateオブジェクトを確認する
　console.log(e.state);

　// 開いたページによって処理を変える
　switch(e.state.page) {
　　case 1:
　　　// page1.htmlを開いたときの動作
　　　break;
　}
});



画面を再読み込みすると初期画面に移動してしまうような
Webアプリケーションなんて嫌ですよね。
Ajaxで画面内容を動的に更新しているような場合は
そういった問題がよく起こると思います。

HistoryAPIを使うことでそういった
「ユーザーが望まない動作」を減らすことができますね。
ぜひ活用してきましょう。

monipet
　　動物病院の犬猫の見守りをサポート
　　病院を離れる夜間でも安心

ASSE/CORPA
　　センサー、IoT、ビッグデータを活用して新たな価値を創造
　　「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
　　短納期HEMS開発をサポート！

GuruPlug
　　カードサイズ スマートサーバ

株式会社ジェイエスピー
　　横浜に拠点を置くソフトウェア開発・システム開発・
　　製品開発(monipet)、それに農業も手がけるIT企業