ライブラリ

そもそも、便利なライブラリがすでにいくつか用意されている。

• History.js
• devote

これらは、History API に対応していないブラウザでのケアや、ページ内に「戻る」「進む」ボタンを設置した場合の制御もケアされているようだ（使ったことはないです）。これはすごい。これらを使う。以上。

ではあるが、ここではライブラリを使わずに、もっとライトにシンプルにHistory APIを導入してみる。

ユーザーにやさしい

History API を使うメリットは、なんといってもユーザー体験が優れるということ。実際にページ遷移するわけではなく、「擬似的」に遷移させることが可能となり、ページ遷移することなくページURLが切り替わる。

たとえば、あたかもページが遷移したかのようで実はAjaxでの実装でページ遷移していない場合、前に戻ろうとブラウザや端末の「戻る」ボタンをクリック（タップ）すると想定外の画面が表示してしまうことがある。このようなとき、History API を用いることで擬似的にページ遷移したとみなすことができ、ブラウザや端末の「戻る」ボタンをクリック（タップ）しても期待する画面を表示させることができる。

History API

W3Cによる2015年7月17日時点での最新情報はこちら「Session history and navigation」。

一見、容易に実装ができる印象。だがしかし、実用レベルで考えた際、面倒なことがある。そこで、オリジナルのルールを決めることで、シンプルな実装をイメージしてみた。

3つの面倒なこと

• History APIに対応していないブラウザ・端末がある
• ファイル読み込み時に、popState（「進む」「戻る」をクリック（タップ）した際のイベント）を実行してしまうブラウザ・端末がある（想定外）
• history.pushState（履歴を追加するメソッド） が使えても、history.state（履歴追加時にセットした情報） が使えない場合がある

オリジナルルール

面倒なことを避けるために、オリジナルルールを用いる。

• History API に対応していないブラウザや端末はケアしない
• ファイル読み込み時かどうかを判別する
• history.state に対応していないブラウザや端末はケアしない（history.stateを使わずに処理できることもありケースバイケース。サンプルでは、history.state に対応していなくても、HIsotry APIを使う例を紹介）

実装イメージ

オリジナルルールを踏まえて用意したJavaScript。

JavaScript（jQueryを読み込み済みの場合）

var isHistoryPush = false;
function historyPushState(data, title, url) {
    if (history && history.pushState && history.state !== undefined) {
        history.pushState(data, title, url);
        isHistoryPush = true;
    }
}

function setHistory(func) {
    if (history && history.pushState && history.state !== undefined) {
        $(window).on('popstate', function(event){
        if (func && isHistoryPush) func(event.originalEvent.state);
    });
    }
}

JavaScript（jQueryを読み込んでいない場合）

var isHistoryPush = false;
function historyPushState(data, title, url) {
    if (history && history.pushState && history.state !== undefined) {
        history.pushState(data, title, url);
        isHistoryPush = true;
    }
}

function setHistory(func) {
    if (history && history.pushState && history.state !== undefined) {
        window.addEventListener('popstate',function(e){
            if (func && isHistoryPush) func(e.state);
        });
    }
}

使い方

History API を利用する場合は、setHistoryメソッドを実行する（setHistoryメソッドの引数にはブラウザ（端末）バックした際に実行するメソッド（メソッドA）をセット）。ちなみにメソッドAの引数には、historyPushStateを実行（履歴を追加）した際の第1引数がセットされる。

サンプル：History API を「あらためて」使ってみる

ざっくりポイント

History API を使えるか

if (history && history.pushState) {

    // 使えます
}

history.state に対応しているか

if (history && history.state !== undefined) {

    // 対応しています
}

history.stateについては、Android端末ではとくに、Android2.1以前、Android3.x, 4.0では未対応。history.state に対応していないらしい。とはいえ、端末依存の可能性も否めないため、単純にユーザーエージェント判別による振り分けは避けたい。あらゆる実機での検証は非現実的。とはいえ、history.stateを使わない実装であれば、この条件文は外してしまう（サンプルでは、history.state を使わない場合を用意してみた）。

サンプル：History API を「あらためて」使ってみる

ファイル読み込み時の処理かどうか

// jQuery読み込み済み
$(window).on('popstate', function(event){
    if (event.originalEvent.state && func) func(event.originalEvent.state);
});

// jQuery読み込みなし
window.addEventListener('popstate',function(e){
    if (e.state && func) func(e.state);
});

ファイル読み込み時かの判別として、event.originalEvent.state（e.state）に値があるか判別する方法を紹介する記事ばかりを見つけた。ただ、この方法には下記に注意する必要がある。

• 履歴を追加後、ブラウザ・端末の「戻る」をクリック（タップ）して初期画面に戻った際に何も処理されない（ファイル読み込み時と同等の扱いとなる）。
• 履歴を追加する際、history.pushStateメソッドの第一引数を必須とする。この設定を行わないとブラウザ・端末の「進む」「戻る」をクリックしても画面の表示は変わらない（popstateが実行された際、event.originalEvent.state（e.state） が、nullとなるため）。

そこで、ファイル読み込み時のみの判別をするために、history.pushStateメソッド（履歴を追加するメソッド）が実行されたかの判別を行う。具体的には真偽値の変数（サンプルではとりあえず、isHistoryPushという変数名）を用意して判別を行う。

// jQuery読み込み済み
var isHistoryPush = false;
function historyPushState(data, title, url) {
    if (history && history.pushState && history.state !== undefined) {
        history.pushState(data, title, url);
        isHistoryPush = true;
    }
}

function setHistory(func) {
    if (history && history.pushState && history.state !== undefined) {
        $(window).on('popstate', function(event){
            if (func && isHistoryPush) func(event.originalEvent.state);
        });
    }
}

サンプル：History API を「あらためて」使ってみる

History API と SEO

ちなみにHistory API と SEOの関係はどうなるんだろうかと思ってググってみると、2014年3月に書かれたこんな記事が見つかった。

Googleジョン・ミューラー、新しいサイトには「#!」のAjaxよりも「HTML5のHistory API/pushState」を推奨 | 海外SEO情報ブログ

要は、設計次第。よくよく考えてみれば当たり前のことだったので、今にも通ずる内容で深く同意できた。

この記事の動作確認環境

jQueryを読み込み済みのサンプルで動作確認しました。

さいごに

結局のところ、2年以上前に書いた記事「History API を使ってみる」の焼き直しとなってしまった・・。結局のところ使い方はほぼ変わっていないというオチ。とはいえ、最新環境での動作確認とサンプルがより自分的にわかりやすくなったのでよしとします。