プラカンブログSTAFF BLOG

2018.11.19

スムーズなページ遷移を実現するpjax

デザイナーのSUGIYAMAです。
今回はスムーズなページ遷移を実現してくれる「pjax」をご紹介します。

pjaxって?

「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。
HTML5のpushStateに対応していないIE9以前のブラウザではこの機能を使うことはできませんが、その場合は通常のページ遷移となり、ページが見られなくなるということはありませんので、ご安心ください。
(そもそもIE9以前ってどんだけ古い環境なんだ…orz)


準備

pjaxプラグインはいくつかありますが、今回はfalsandtru版pjaxについての導入方法を説明します。
動かすには「jQuery」が必須になりますので、本家からダウンロードするか、Googleにホストされているファイルを読み込みましょう。


JavaScript

 $(function(){
    $.pjax({
        areas: ['#container','side'],
        link : 'a:not([target])',
        update: {head: 'base, meta'},
        wait : 500
    });
});
areas 更新する範囲の指定。複数ある場合はコンマ区切り
link pjaxを適用させるリンクを設定
update 更新させたいものを指定できます。baseタグ、metaタグ、linkタグ、scriptタグを指定する事ができます。
wait リンクをクリックしてからの遅延時間

基本的に、「areas」と「link」をしてすれば、動作可能です。


各種イベント

さまざまなポイントでイベント実行することが可能です。

データ取得前に実行

$(document).on('pjax:fetch', function(){
  // ここに処理を記述
});

データの取得後、ページの更新前にwindowオブジェクトから実行

$(window).on('pjax:unload', function(){
  // ここに処理を記述
});

DOMの更新後、documentオブジェクトから発生します。

 $(document).on('pjax:content', function(){
  // ここに処理を記述
});

DOMの更新、かつスクロール位置を更新した後、documentオブジェクトから発生します。

 $(document).on('pjax:ready', function(){
  // ここに処理を記述
});

データの取得後、ページの更新前にwindowオブジェクトから実行

$(window).on('pjax:unload', function(){
  // ここに処理を記述
});

すべての画像とフレーム(Iframeなど)の読み込み後、windowオブジェクトから発生します。

$(window).on('pjax:unload', function(){
  // ここに処理を記述
});

まとめ

遷移時のストレス軽減や、アニメーションをつけれたりと、すばらしいプラグインですが、注意も必要です。
特に、Googleアナリティクスなどの解析ツールを使用する場合は、各イベントなどを使用してちゃんと取得できるかを検証してください。

+dc(杉)

この記事は、SUGIYAMA が書きました。