JavaScript

History API を「あらためて」使ってみる

以前、「History API を使ってみる」という記事を書いた。読み返したら非常に分かりにくかったため、History API の使い方をあらためて調べたので、自分なりの解を備忘録として残します。

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

ライブラリ

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

これらは、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を読み込み済みのサンプルで動作確認しました。

Windows8
IE11 Chrome43 Firefox38
Intel Mac OS X 10.x
Chrome43 Safari8 Firefox39
iPhone/Androidのデフォルトブラウザ
iPhone5S SC-06D SO-03D L-06D
iOS 8.0 Android 4.1.2 Android 4.0.4 Android 4.0.4

さいごに

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

最近の記事

ES6(ES2015)の主な変更点

オブジェクト指向 クラス定義 JavaScriptは厳密にはクラスがない、プロトタイプベースのオブジェクト指向言語。ES6でclass構文が導入さ・・・

JavaScript

JavaScriptスタイルガイド

書籍「メンテナブルJavaScript」と Google JavaScript Style Guide 和訳 を参考に自分なりのJavaScriptスタイルガ・・・

JavaScript

投稿を公開したときに指定したページにアクセスする

この記事では「管理画面で投稿やカスタム投稿の公開ステータスを更新したときに何かしらの処理をする」方法の備忘録です。 functions.php を修正し・・・

WordPress

ローカルフォントをWebフォント指定する

Google Fonts はとても便利だが、適用するまでの遅延が気になったので、同様の効果をローカルにあるフォントを利用して実現させる。 事前に用意する・・・

CSS

[ソフト] Web font用のwoff、woff2にフォントを変換する無料サービス

WOFFコンバータ ダウンロードhttps://opentype.jp/woffconv.htm 以下、リンク先の「概要」を抜粋。 フォント・・・

CSS

JSON

JSON.parse() 配列とオブジェクトのリテラル記法を組み合わせた文字列をデータとして取り扱えるようにする。 // JSONデータ let ・・・

JavaScript

いろいろな判定

真の場合。偽の場合は、!== を使う。 プリミティブ値の判定 文字列の判定 if (typeof a === 'string') {} ・・・

JavaScript

Custom Post Type UI で 投稿画面にタクソノミー が表示されなくなった場合 → REST API

数ヶ月前、WordPress本体をバージョンアップして、エディタがガラリと変わった。その際、それまでサイドナビに、Custom Post Type UI(CP・・・

WordPress

なるほどデザイン

書籍「なるほどデザイン」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。テキストのみで備忘録として残しておくが実際はイラストと合わせ・・・

デザイン

グーグルの考えるデザインガイドライン

使えるデザインになっている?→ デザインは正しいインプットによって、人の暮らしや夢を助けるツールサクサクと動く、機能するデザインになっている?→ デザインが機・・・

デザイン

人気の記事

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress

http://localhost:8888/ → http://localhost/

http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・

MAMP

イラストレーターでレイヤーごとにPNGで書き出す

【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・

Illustorator

背景画像の拡大・縮小 → background-size !

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・

CSS

アーカイブページでカスタムフィールドやタクソノミーで絞り込みした状態でリスト表示する

<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・

WordPress

Advanced Custom Fields を使った条件分岐(セレクトボックス、チェックボックス、ラジオボタン、真偽)のテンプレート記述方法

前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・

WordPress

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress

カウントアップ、カウントダウンするJavaScript

ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・

JavaScript

WEB制作マークアップJavaScriptHistory API を「あらためて」使ってみる | シンプルシンプルデザイン