History – Mach3.laBlog https://blog.mach3.jp Sun, 15 Dec 2013 01:18:38 +0000 ja hourly 1 https://wordpress.org/?v=6.9 "Pjax" – Alphabetical Advent Calendar 2013 https://blog.mach3.jp/2013/12/15/jaac2013-p-pjax.html Sun, 15 Dec 2013 01:18:38 +0000 http://blog.mach3.jp/?p=3736 “P” は Pjax の “P”。

P

Pjax

Pjax とは、pushState + Ajax から作られた言葉で、 History の pushState メソッドでURLを管理しつつ、 コンテンツの遷移を Ajax を使って行う手法です。

おおまかな流れはこのような感じ。

  1. ページ内のリンクをクリックした時にページ遷移を行わずに、 対象のHTMLファイルの内容を Ajax で取得します。
  2. 取得に成功したら History.pushState でURLを変更して履歴に追加します。
  3. ファイルの内容から必要なコンテンツ部分を抽出して、コンテンツのコンテナに流し込みます。

ページごと遷移しない為余計な部分の再描画が必要なく、 遷移時に好みのエフェクトをかけられる点などが特徴です。 また、サイト全体に共通にかかるような JavaScript などの処理をページ移動毎に行わなくて済む為、 高速化にも一役かっています。

その実用性についてはこちらにまとまっていましたので、ご参考までに。

Pjax コンテンツを習作してみる

実装の仕方は様々あると思いますが、ここで一例習作してみましょう。 （例をシンプルにする為にjQueryを使用します）

HTML構造を共通化する

<ul id="navi">
    <li><a href="/" data-pjax>Home</a></li>
    <li><a href="/foo.html" data-pjax>Foo</a></li>
    <li><a href="/bar.html" data-pjax>Bar</a></li>
    <li><a href="/baz.html" data-pjax>Baz</a></li>
</ul>

<div id="content">
    <!-- ここの内容を差し替えます -->
    <h1>Hello, Pjax</h1>
</div>

まずこのようなHTMLを想定します。 上のナビゲーション部分のリンクをクリックすると Ajax でリンク先のHTMLファイルを取得し、 #content の内容を差し替えます。

HTMLの構造は、遷移元・遷移先共に共通にしておきましょう。 例えば下のコードは Foo をクリックした時に表示する為の foo.html です。

<!-- foo.html -->
<head>
    <title>Page Foo</title>
</head>
...
<ul id="navi">...</ul>

<div id="content">
    <h1>Foo</h1>
    <p>Lorem ipsum ...</p>
</div>

pushState のサポートをチェックする

if(! history.pushState || ! history.replaceState){
    return;
}

この例では pushState / replaceState 共に実装されていなければ正常に動かないので、 サポートしていない環境では以降の処理をスキップし、そのままネイティブの機能でページを移動してもらいます。

リンクの制御

クリックの制御は イベントのバブリング を利用して document にて行う事にします。 これならば、コンテンツ部分に新たに生成されるリンクも制御できます。 Pjax で遷移するリンクを明示する為に、ここでは data-pjax 属性を使用しています。

$(document).on("click", "[data-pjax]", function(e){
    e.preventDefault();
    var href = e.currentTarget.href;
    $.get(href, function(html, status, xhr){
        // コンテンツを更新する
        updateContent(html);
        // 履歴に追加する
        history.pushState({url: href, html: html}, "", href);
    }, "html");
});

コンテンツの更新

上のコードで使用している updateContent() 内でHTML文字列から必要な部分を抽出してコンテンツを更新します。 今回必要とするのは #content の中身と title です。

var updateContent = function(html){
    var title = (function(){
        var m = html.match(/<title.*?>([\s\S]+?)<\/title>/i);
        return m ? m[1] : "";
    }());
    var content = (function(){
        var m = html.match(/<body.*?>([\s\S]+?)<\/body>/i);
        if(m){
            var content = $("<div>").append(m[1]).find("#content");
            return content.length ? content.html() : "";
        }
        return "";
    }());
    document.title = title;
    $("#content").hide().html(content).fadeIn();
};

content のパースは厄介なので、jQueryで一時的に要素を生成してフィルタリングしています。 遷移時にはコンテンツ部分がフェードインするようにしてみました。

popstate イベントの設定

これだけではリンクをクリックした時だけしかコンテンツが変わらないので、 ブラウザの進む・戻るボタン等で履歴を移動した場合にもコンテンツが切り替わるように、 popstate イベントの設定をします。

$(window).on("popstate", function(e){
    var state = e.originalEvent.state;
    if(state && state.html){
        updateContent(state.html);
    }
});

jQuery.fn.on でイベント設定した場合は e.state ではなく e.originalEvent.state と辿らなければいけないので注意が必要です。 pushState で登録しておいた html が state から取得出来るので、それを使用してコンテンツをその時の状態に戻します。

現在いるページで初期化をする

一番最初に訪れたページの内容で、state の初期化を行います。 そうしなければ、ページ遷移を行ったあとに一番はじめのページまで履歴をさかのぼった時に state が空っぽな為、コンテンツを更新してくれません。

history.replaceState({url: location.href, html: $("html").html()}, "", location.href);

ファイナルコード

シンプルな構成ですが、こんな感じになりました。 実際にはエラー時の処理や、コンテンツのキャッシュ等も入るかもしれません。

(function(){

    if(! history.pushState || ! history.replaceState){
        return;
    }

    var updateContent = function(html){
        var title = (function(){
            var m = html.match(/<title.*?>([\s\S]+?)<\/title>/i);
            return m ? m[1] : "";
        }());
        var content = (function(){
            var m = html.match(/<body.*?>([\s\S]+?)<\/body>/i);
            if(m){
                var content = $("<div>").append(m[1]).find("#content");
                return content.length ? content.html() : "";
            }
            return "";
        }());
        document.title = title;
        $("#content").hide().html(content).fadeIn();
    };

    $(document).on("click", "[data-pjax]", function(e){
        e.preventDefault();
        var href = e.currentTarget.href;
        $.get(href, function(html, status, xhr){
            updateContent(html);
            history.pushState({url: href, html: html}, "", href);
        }, "html");
    });

    $(window).on("popstate", function(e){
        var state = e.originalEvent.state;
        if(state && state.html){
            updateContent(state.html);
        }
    });

    history.replaceState({url: location.href, html: $("html").html()}, "", location.href);

}());

ライブラリを利用する

上の説明用のコードは単機能で汎用性にも欠け、いささか面倒です。 既に Pjax のライブラリは多くの方が公開していると思いますので、 それを利用させてもらいましょう。

jquery-pjax

https://github.com/defunkt/jquery-pjax

jquery-pjax は名前の通り Pjax の面倒な処理ひと通りこなしてくれるjQueryプラグインです。

$(document).pjax("a[data-pjax]", "#container");

jquery-pjax は Ajaxのリクエストに X-PJAX というヘッダを追加してくれます。 サーバサイドでそのヘッダを検知して、共通レイアウトを省いたコンテンツ部分のみを出力するようにすれば、 データ量の節約になるという寸法です。

レイアウトを省かないHTMLを読み込んで部分だけ使用したい場合（上であげたコードのようなケース）は、 fragment オプションでセレクタを指定する必要がありますので注意しましょう。

$(document).pjax("a[data-pjax]", "#container", {
    fragment: "#container"
});

参考資料

]]> "History" – Alphabetical Advent Calendar 2013 https://blog.mach3.jp/2013/12/07/jaac2013-h-history.html Sat, 07 Dec 2013 00:10:32 +0000 http://blog.mach3.jp/?p=3670 “H” は History の “H”。

H

History による履歴操作

一画面で構成される様なWebアプリケーションで ユーザーに「戻る」ボタンなどの履歴移動機能を提供したい場合、 旧来は location.hash を使用していました。

window.addEventListener("hashchange", function(){
    /* location.hash が変更された時の処理 */
}, false);
location.hash = "foo"; // "#foo" に移動

URL末尾のハッシュは更新されますが 表示されているドキュメント自体は切り替わらず、 そのハッシュの名前によってページの一部を切り替えたり、 少し変わったトランジションをかけてページを移動したりする事が出来ます。 URLの文字は変更されているので、その状態をブックマークする事も出来ます。

最近ではその役割に、Historyオブジェクトに新たに実装された pushState が取って代わりつつあります。

History.pushState を使う

まず、History オブジェクト自体は一度は使った事がある代物だと思いますが、 window にぶらさがっているあの history の事です。 配列のように履歴の情報をスタックしていけるようなオブジェクトで、 go/back/forward() メソッドを使うことでその履歴間を行き来する事が出来ます。

pushState() は、Historyオブジェクトに新しく履歴のエントリを追加し、そこに移動するメソッドです。 例えば http://example.com のページで次のような処理をした場合。

var url = "/foo";
history.pushState({url: url}, "", url);

アドレスバーのURLは http://example.com/foo に切り替わりますが、ページの表示はそのままです。 pushState をコールした後に自分で好きなようにドキュメントを弄ってください。

pushStateの引数は1つ目から順に stateオブジェクト、タイトル、URL となっています。

  • stateオブジェクト : 履歴のエントリと状態を結びつけるためのデータ。

    その履歴に戻った時にページの状態を戻すための情報を格納しておきます。
  • タイトル : MDN曰く、現在は無視されているパラメータ。将来的に使う事になるでしょう。
  • URL : アドレスバーの表示を切り替える為のURL。

ちなみに replaceState というメソッドも実装されていて、同様の引数で利用できます。 こちらは履歴のスタックに push するのではなく、現在いるエントリを上書きするメソッドです。

ターゲットURL と ページ

指定したURLに実際にページが存在しない場合、 ページをブラウザでリフレッシュしたり改めてアクセスしたりすると Not found になってしまいますので、 実際にファイルを設置するか、mod_rewrite や サーバサイドのスクリプトでどうにかする必要があります。

あるいは、URLに “#foo” などを指定する事も出来ます。 これならば同じページで展開する事が出来ます…が、pushState である必要性が少し薄くなる気もします。

history.pushState({hash: "#foo"}, "", "#foo");

popstate イベント

location.hash における hashchange イベントと似た役割を持つのが popstate イベントです。

window.addEventListener("popstate", function(e){
    e.state; // {url: "/foo"} など
}, false);

イベントハンドラに渡される Event オブジェクトには state オブジェクトがぶら下がっていますが、 これは pushState で設定した state オブジェクトです。 ここから情報を参照して、ページの状態を復元する事になります。

注意しなければならないのはイベント発火のタイミングです。 hashchange イベントは location.hash を変更した時点で発火しましたが、 popstate イベントは pushState をコールした時点では発火せず、 次の方法で「履歴を移動した時点」で発火します。

  • ページロード時
  • ブラウザの「戻る」「次へ」ボタンや、そのショートカットキーで移動
  • history.go/back/forward() で移動

要するに、popstate イベントは pushState 以外の操作で履歴を移動した場合にページをその履歴の時点の状態に戻す為に使用するイベントだ、という事です。

これらの機能を使いつつ Ajax と連携してコンテンツを遷移する “pjax” という手法もありますが、それはまた別のお話。

参考資料

]]>