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 を使ってみる」の焼き直しとなってしまった・・。結局のところ使い方はほぼ変わっていないというオチ。とはいえ、最新環境での動作確認とサンプルがより自分的にわかりやすくなったのでよしとします。

最近の記事

MacBook Air Mid 2013 を中古で購入して、Big Sur を入れてみた

ソフマップで、MacBook Air Mid 2013 を中古で購入した。なつかしのOS X Lion。だがしかしッ!工場出荷時に初期化してアップデートしよう・・・

徒然なままに

cronっぽいことをPHPでjsonとして実装する

外部のAPIを利用する際、リクエスト回数が制限されることがある。また、リクエスト回数が制限され、かつ毎日更新をルールとする外部のAPIもある。 そんなと・・・

php

Instagram API を使ってインスタに投稿した画像データを取得する

インスタに投稿した画像を自動でホームページでも更新されるようにしたい。もっとも簡単に実現する方法を紹介する。 公式リファレンスInstagram・・・

API

名刺代わりの超絶ミニマムなブランディングページ

このたび、ハンドメイドアクセサリー作家さんのWebサイト制作させていただきました! Sunny Side Accessory(サニーサイド アクセサリー・・・

お仕事・制作日記

インタラクションデザイン

5年くらい前に購入した書籍「インタラクションデザイン」。この書籍内ではたくさんの事例が紹介されている。残念ながらその多くは現在閲覧することができなくなっていた・・・

デザイン

Advanced Custom Fields 名前を変更して、データも反映させる

WordPressを自作する上でもはや欠かせないプラグインの一つが、「Advanced Custom Fields」。 名前を変更しようと思って、Wor・・・

WordPress

配列の重複を削除する

配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・

JavaScript

MAMP を 5.7 から 6.2 にアップデートした

5年以上前と比べると、アップデートが簡単で驚く。とくに記事にするまでもないと思いつつ、一応備忘録。 インストールすると、既存のディレクトリはそのままに別・・・

MAMP

Briefly unavailable for scheduled maintenance. Check back in a minute. → . maintenance を削除

プラグインを更新中に、誤って、違うページにアクセスしまいました。すると、管理画面だけでなく、公開中のすべての画面が「briefly unavailable f・・・

WordPress

GulpでERRが出てテンパった → gyp: No Xcode or CLT version detected! → PostCSS plugin autoprefixer requires PostCSS 8

Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・

制作効率化

人気の記事

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

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

WordPress

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

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

JavaScript

iframeの高さを自動調整する

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

JavaScript

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

favicon.icoをWordPressの管理画面からアップロードできない→ wp-config.php を一時的に修正

いつもは直接アップロードしているので気にしていなかったが、WordPress管理画面のメニュー「メディア」からfavicon.icoをアップロードしようとした・・・

WordPress

管理画面のカスタム投稿一覧で並び順を変更する

WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・

WordPress

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

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

WordPress

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

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

JavaScript

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

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

WordPress

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