以前、「History API を使ってみる」という記事を書いた。読み返したら非常に分かりにくかったため、History API の使い方をあらためて調べたので、自分なりの解を備忘録として残します。
サンプル:History API を「あらためて」使ってみる
そもそも、便利なライブラリがすでにいくつか用意されている。
これらは、History API に対応していないブラウザでのケアや、ページ内に「戻る」「進む」ボタンを設置した場合の制御もケアされているようだ(使ったことはないです)。これはすごい。これらを使う。以上。
ではあるが、ここではライブラリを使わずに、もっとライトにシンプルにHistory APIを導入してみる。
History API を使うメリットは、なんといってもユーザー体験が優れるということ。実際にページ遷移するわけではなく、「擬似的」に遷移させることが可能となり、ページ遷移することなくページURLが切り替わる。
たとえば、あたかもページが遷移したかのようで実はAjaxでの実装でページ遷移していない場合、前に戻ろうとブラウザや端末の「戻る」ボタンをクリック(タップ)すると想定外の画面が表示してしまうことがある。このようなとき、History API を用いることで擬似的にページ遷移したとみなすことができ、ブラウザや端末の「戻る」ボタンをクリック(タップ)しても期待する画面を表示させることができる。
W3Cによる2015年7月17日時点での最新情報はこちら「Session history and navigation」。
一見、容易に実装ができる印象。だがしかし、実用レベルで考えた際、面倒なことがある。そこで、オリジナルのルールを決めることで、シンプルな実装をイメージしてみた。
面倒なことを避けるために、オリジナルルールを用いる。
オリジナルルールを踏まえて用意したJavaScript。
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);
});
}
}
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 を「あらためて」使ってみる
if (history && history.pushState) {
// 使えます
}
if (history && history.state !== undefined) {
// 対応しています
}
// 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);
});
そこで、ファイル読み込み時のみの判別をするために、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 と SEOの関係はどうなるんだろうかと思ってググってみると、2014年3月に書かれたこんな記事が見つかった。
Googleジョン・ミューラー、新しいサイトには「#!」のAjaxよりも「HTML5のHistory API/pushState」を推奨 | 海外SEO情報ブログ
要は、設計次第。よくよく考えてみれば当たり前のことだったので、今にも通ずる内容で深く同意できた。
jQueryを読み込み済みのサンプルで動作確認しました。
IE11 | Chrome43 | Firefox38 |
---|---|---|
○ | ○ | ○ |
Chrome43 | Safari8 | Firefox39 |
---|---|---|
○ | ○ | ○ |
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 を中古で購入した。なつかしのOS X Lion。だがしかしッ!工場出荷時に初期化してアップデートしよう・・・
外部のAPIを利用する際、リクエスト回数が制限されることがある。また、リクエスト回数が制限され、かつ毎日更新をルールとする外部のAPIもある。 そんなと・・・
インスタに投稿した画像を自動でホームページでも更新されるようにしたい。もっとも簡単に実現する方法を紹介する。 公式リファレンスInstagram・・・
このたび、ハンドメイドアクセサリー作家さんのWebサイト制作させていただきました! Sunny Side Accessory(サニーサイド アクセサリー・・・
5年くらい前に購入した書籍「インタラクションデザイン」。この書籍内ではたくさんの事例が紹介されている。残念ながらその多くは現在閲覧することができなくなっていた・・・
WordPressを自作する上でもはや欠かせないプラグインの一つが、「Advanced Custom Fields」。 名前を変更しようと思って、Wor・・・
配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・
5年以上前と比べると、アップデートが簡単で驚く。とくに記事にするまでもないと思いつつ、一応備忘録。 インストールすると、既存のディレクトリはそのままに別・・・
プラグインを更新中に、誤って、違うページにアクセスしまいました。すると、管理画面だけでなく、公開中のすべての画面が「briefly unavailable f・・・
Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・
めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・
まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・
http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・
【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・
いつもは直接アップロードしているので気にしていなかったが、WordPress管理画面のメニュー「メディア」からfavicon.icoをアップロードしようとした・・・
WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・
<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・
ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・
やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・
WEB制作マークアップJavaScriptHistory API を「あらためて」使ってみる | シンプルシンプルデザイン