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

最近の記事

DaVinci Resolve 17 プロジェクト設定と環境設定

プロジェクト設定と環境設定について詳しく解説されている情報がなかなか見つからないので、要所要所で知り得た情報を更新していきます。 プロジェクト設定 ・・・

DaVinci Resolve

項目”Clipy”は開いているため、ゴミ箱に入れることができません。←アンインストールしようとしたときの話し

Clipyが超絶便利そうだったので、macOS Big Sur にインストール&再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・

徒然なままに

setTimeout は requestAnimationFrame に変えるべき?

requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimati・・・

JavaScript

書籍「小さなチーム、大きな仕事」からピックアップ

6年ぶりに読み返したが、今なおハッとさせられることが多く見つかる。 この本で忘れないようにしたい項目をピックアップするだけでも役に立ちそ・・・

起業向け情報

書籍「完全網羅 起業成功マニュアル」からピックアップ

この記事では、以前に読んだ際に付箋を付けていたが、その部分だけを備忘録としてピックアップするため、本の要約ではない。実際は、何倍も濃い内容で、練・・・

起業向け情報

書籍「はじめの一歩を踏み出そう」から気になったフレーズをピックアップ

もう一回、全部読み返したいところだが、書籍がありすぎるので、当時付箋紙をつけていたところだけをピックアップ。書籍内ではより具体的な説明があるので・・・

起業向け情報

書籍「起業して3年以上「続く人」と「ダメな人」の習慣」からフレーズ・ピックアップ

この記事でメモしたのは、6年前に独立したときに読んだ箇所に付箋紙をつけていたところで、本の中の一部。起業家資質かどうか知る意味で読んでも面白いと・・・

起業向け情報

書籍「金持ち父さんの起業する前に読む本」を読んで

従業員という働き方ではない道を選ぶ前に読んでおきたい本。独立するときに読んだが、そのときに付箋紙がたくさん付いていたので、その部分を備忘録として・・・

起業向け情報

大きなインパクトを世界に与え続けてきた企業=ビジョナリー・カンパニーに学ぶ

この記事は、名著「ビジョナリー・カンパニー」から見直したいと思った箇所を備忘録として書き記す。 十二の崩れた神話 下記は、ビジョナ・・・

起業向け情報

ビジョナリー・カンパニーの基本理念

この記事は、名著「ビジョナリー・カンパニー」にて、実際のビジョナリー・カンパニーの基本理念が紹介されていたので抜粋。基本理念をつくる上での参考に・・・

起業向け情報

人気の記事

iOS Safariで絶対配置(position:fixed)して惰性スクロールしてもロックしない、フリーズ回避方法

iPhoneやiPadで position: fixed; で絶対配置したエリア内をスクロールするとき、最上部をより上にスクロールしようとしたり、最下部をより・・・

JavaScript2021年4月28日

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

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

WordPress2018年10月11日

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

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

API2021年2月22日

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

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

JavaScript2017年7月19日

iframeの高さを自動調整する

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

JavaScript2015年3月17日

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

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

WordPress2019年2月11日

配列の重複を削除する

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

JavaScript2020年12月14日

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

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

Illustorator2018年2月2日

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

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

WordPress2020年8月4日

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

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

MAMP2015年2月3日

コメントありの記事

えっ!?Yahooの検索結果から遷移しようとしたら全く違うサイトにリダイレクトされてしまった...

「>前田さん コメントありがとうございます。 環境は分かりかねますが、修正したいファイルのパーミッションを604や644に変更すると書き込みできるようになりま・・・」

お仕事・制作日記

Sony Eマウント フルサイズ対応のカメラレンズを収集するページを作ってみた

「レンズ情報追加しました 150-600mm F5-6.3 DG DN OS | Sports 超望遠レンズ。一本は持ってみたい!」

お仕事・制作日記

記事の投稿IDなどの投稿者(ユーザー)情報を取得する方法 → get_the_author_meta

「アバターを取得する「get_avatar」についても追記しました!」

WordPress

jQueryでformを操る【nameの値を取得する/クリアする】

「「値をクリアする」を追加しました。チェックボックスやラジオボタンの値を何も選択していない状態に戻すときについて触れています。」

JavaScript

iframeの高さを自動調整する

「>匿名さん コメントありがとうございます。 サンプルでは、beforeは何も処理していないので期待する表示にならない、で正解です。 クリックした後が、対応・・・」

JavaScript

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

「コメントに嬉しいお言葉、ありがとうございます!」

API

MAMPでMySQL Serverが突然起動しなくなった時 → ログファイル削除

「(匿名)さん コメントありがとうございます。何も設定変更していないのに、それまで使用できていたサーバーが突然使えなくなるのは辛いですよね、、。 ここで紹介したや・・・」

MAMP

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

「コメントありがとうございます! そもそもできるかはわかりませんが、ソースを書き換える必要はあります。 下記記事などが参考になるかもしれません。 illustra・・・」

Illustorator

05_各種キーワードツール

「公開から14年振りの更新w デッドリンクを削除しました。ツール系は「SEO対策に役立つ便利ツール」に集約します。」

SEO

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

「「特定の「タイプ」に関連付けられた投稿を表示する場合」を一つの場合を追記し、複数の場合と分けました。」

WordPress

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