ちゃんとHTML5を理解しよう History API
斜め読みしたパーフェクトJavascriptを片手に何となく使っていたHTML5で追加されたAPIをちゃんと学んでみましょう。
History APIを学ぶ
HTML5でHistory APIが追加されました。
History APIを活用するメリットを考えてみました。
History APIとは
クライアントのアプリケーションにajaxを活用すると、画面遷移が発生しないインターフェイスを実現することが可能です。
画面遷移が発生しないためブラウザの履歴と対応するURLにも変化が生じません。
遷移と履歴が連動しないので、ブラウザの戻るボタンを押すと意図しない画面へ遷移してしまいます。
[ajaxの場合]
1)アプリケーション起動
2)画面遷移1
3)画面遷移2
4)戻るボタン押下
5)アプリケーション起動へ戻ってしまう
History APIはブラウザの履歴と対応するURLを任意の値に差し替える為のAPIです。
History APIを活用すると画面遷移はajaxのままブラウザの履歴とURLを差し替える事が可能になります。
[History APIを利用した場合]
1)アプリケーション起動
2)画面遷移1
3)History APIで履歴を差し替え
4)画面遷移2
5)History APIで履歴を差し替え
6)戻るボタン押下
7)画面遷移1へ戻る
History APIの基本
History APIはhistoryオブジェクトを介して操作します。
試しにURLと履歴を差し替えてみましょう。
historyオブジェクトのpushStateメソッドを利用して実現することが出来ます。
if(confirm('遷移しますか？')){
history.pushState(null,'初めての遷移','/first/move');
}
確認ダイアログのOKを押すとURLが「/first/move」に差し替わります。
履歴を保存することは出来ましたが、実際の画面描画はどのように行うのでしょうか？
History APIはサーバーサイドへリクエストは送らないので、ajaxで最新データを取得したりjavascriptから静的htmlを出力する必要があります。
pushStateを行うとpopstateイベントが発生します。
popstateを監視して画面描画を行いましょう。
jQueryを利用します
$(window).on('popstate', function(event) {
// コンテンツを操作するコード
$(document .body).html('<h2>初めての遷移</h2>');
});
クライアントだけの機能で画面遷移と描画が行えました。
History APIの応用
画面描画は行えましたが、urlに対応する各画面を描画するロジックを構築する必要があります。
routerですね。
URLのパス情報から値を取得する方法もありますが、任意のパラメーターを渡したい場合にコードが汚くなりそうです。
pushStateメソッドの第一引数を思い出して下さい。
サンプルではnullを渡しいますが、第一引数をオブエジェクト式にしてpopstateへ値を渡すことが可能です。
if(confirm('遷移しますか？')){
var data = {
pref : 'home',
next : 'about'
}
history.pushState(data,'初めての遷移','/first/move');
}
$(window).on('popstate', function(event) {
// コンテンツを操作するコード
$(document .body).html('<h2>' + event.state.text + '</h2>');
});
仕様通りであれば上記のコードで動くはずですが、実際は動きません。
(jqeury1.11.0で確認)
代わりに独自イベントを発行して動かします。
$(window).on('popstateWrap', function(event,data) {
// コンテンツを操作するコード
$('#header').html('<h2>' + data.text + '</h2>');
});
出来上がったサンプルコード
相変わらずつたないコードですいません。
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<select id="moveTo" name="moveTo">
<option value="1">TOP</option>
<option value="2">HOME</option>
<option value="3">ABOUT</option>
</select>
<div id="header"></div>
</body>
</html>
<script>
<!-- javascript部分を参照 -->
</script>
下記コードをhtmlへ反映させて下さい。
$('#moveTo').on('change',function(event){
var data = {
value : $('#moveTo').val(),
text : $('#moveTo option:selected').text()
}
history.pushState(data,'初めての遷移','/first/move/' + data.value);
$(window).trigger('popstateWrap',data);
});
$(window).on('popstateWrap', function(event,data) {
// コンテンツを操作するコード
$('#header').html('<h2>' + data.text + '</h2>');
});
このページを読んだ人にオススメのブログ記事です！
About The Author
