Home > 備忘録 > javascript/jQuery > defunkt版pjaxの説明

defunkt版pjaxの説明

pjaxとはAjaxでコンテンツを入れ替えるのと同時にURLも変更してくれるjQueryのプラグインの名前です。
Githubのようなスムーズでイケてるページ遷移を行います。

javascriptの「pushState」などの新しいヒストリー関数とAjaxやサーバーサイドスクリプトを組み合わせて作られているので実際はjQueryプラグインじゃなくても実装は可能です。実際この技術がなんと呼ばれるのかはわかりませんが、とりあえずpjax（pushState + ajax = pjax）で浸透してるみたいです。Chrome、Firefox、IE10以降などのブラウザで動作し、非対応のブラウザでは通常のページ遷移をします。

PHPで作られた素敵なCMS「」だとpjaxも非常に簡単に実装できます。

Headline
  • ダウンロード
  • jQuery.pjax.jsの基本的な使い方
  • サーバー処理を使わず静的サイトで手軽にpjaxしてみる
    • pjaxに対応するHTMLを書く
  • 切り替えエフェクトの付け方
  • pjaxのイベント
  • UTF-8以外の文字化け対策
  • が設定されている時挙動がおかしくなる対処
  • 一方通行にした場合のChrome対策

ダウンロード

jQuery本体と、jquery.pjax.jsをダウンロードします。
9月以降のバージョン(Verが書いてないけどVer1.0かららしい)ではAPIが変わっていますが以下は最新版の書き方です。

jQuery.pjax.jsの基本的な使い方

サーバーサイドの処理にPHPを使った場合の遷移は以下の様な感じになります。
いまいち分かりにくくてすみません(´・ω・)

1.0から譲渡でイベントを発生させているようなので、リンクの親要素をイベント発生源にします。（documentやbodyなど）jQuery本体とjquery.pjax.jsを読み込んで、documentや$(document).readyで親要素に対してpjaxを割り当てます。

$(document).pjax('a.pjax', '#pjaxContent');

documentの中にあるpjaxというクラス名が付いたリンクをクリックすると#pjaxContentが入れ替わります。

pjaxからヘッダー（またはパラメータ）付きのAjaxリクエストが発生するので、PHPなどを使って「ヘッダーのX-PJAXがtrueの場合はコンテナ部分だけを出力する」という条件で動的にHTML出力するようにします。PHPのgetallheaders()関数が使用できない場合は$_GET['_pjax']で判定する事ができます。

$header = getallheaders();
if ($header['X-PJAX']) {
  // pjaxリクエストの場合の処理＆コンテナ内のHTMLだけ出力
} else {
  // pjaxリクエストじゃない場合の処理＆全てのHTMLを出力
}
?>

サーバー処理を使わず静的サイトで手軽にpjaxしてみる

jquery.pjax.jsに結果の一部を抽出できる「fragment」パラメータが用意されているので、これを使用する事でサーバー側の処理を使わずに静的HTMLでpjaxを実装することも出来そうなので試してみました。

サーバー処理を使わずに「fragment」だけで実装した場合の遷移は簡単に説明すると以下のようになります。

Ajaxで全てのページ内容を取得したあとに必要な部分だけを取り出します。

サーバーサイドのスクリプトを使って必要な部分だけ受け取るのと違って、全て受け取ってから必要な部分だけを抜き出すため転送量的には通常の遷移と変わりませんが体感速度は割りと早くなりました。検索エンジンライクなので「CMSとか使ってないけどエフェクトとかローディングとか入れてこじゃれたサイトを作りたい」という場合には実装してみるのも良いかも...？

ちなみに、fragmentはサーバー処理をしつつさらに抽出するということももちろん出来ます。例えばMODXのcontent内の一部をpjaxで遷移させるという事も可能です。（Dittoの解説ページがそん��感じになっています）

pjaxに対応するHTMLを書く

遷移させたいコンテンツを適当なID、以下は「pjaxContent」というIDで囲みます。
pjaxに対応している場合この中だけが遷移先のIDの中身と入れ替わるので、pjax元とpjax先のページではこのIDのコンテナが存在するようにしておきます。

$(document).pjax('a.pjax', {
  container:'#pjaxContent', // 置き換えるコンテナのID
  fragment: '#pjaxContent'  // 取り出すコンテナのID 相互に遷移させる場合はcontainerと同じもの
});

遷移元（発火点）「page1」のHTML



page1






pjaxテスト

ここはページ1

ページ1の中身

遷移先「page2」のHTML



page1





pjaxテスト



  
ここはページ2

  
ページ2の中身

処理が早いとちゃんと遷移しているのか分かりにくいですが、page2でリロードするとリンクがなくなる事でコンテナだけ遷移したことが確認できると思います。

切り替えエフェクトの付け方

基本的にはpjaxのイベントに関連付ける事でエフェクトや処理を追加する事ができます。

Inエフェクト

スライドしながらフェードインするエフェクトをつける例です。

$(document).on('pjax:end', function() {
        $('#pjaxContent').animate({
                left : 0,
                opacity : 1
        }, 'fast');
});

Outエフェクト

100pxスライドしながらフェードアウトするエフェクトをつける例です。
Outエフェクトの場合pjax:startなどに関連付けてもエフェクトが飛んでしまったり、アニメーション中に内容が切り替わってしまう場合があります。Outエフェクトが完全に終わったあとにpjaxを実行させたい場合は、クリックイベントのアニメーションのコールバックで$.pjaxを使用するのが簡単かなーと思います。
エフェクトの終わりを待つ場合、時間を余分に考えてtimeoutを指定しないとタイムアウトして通常遷移してしまう場合があります。
クリックイベント内でpjax対応ブラウザのみ処理をする場合は$.support.pjaxで分岐できます。

$(document).on('click', 'a.pjax', function(event) {
        event.preventDefault();
        var href = $(this).attr('href');
        // フェードアウトエフェクトの処理
        $('#pjaxContent').animate({
                left : -100,
                opacity : 0
        }, 'fast', function() {
                // コールバックでpjaxを実行する
                $.pjax({
                        url: href,
                        container : '#pjaxContent',
                        fragment : '#pjaxContent',
                        timeout : 1000
                });
        });
});

ローディング中エフェクト

pjax:sendでエフェクトを開始して、pjax:completeでエフェクトを終了させます。

$(document).on('pjax:send', function() {
  $('#loading').show();
})
$(document).on('pjax:complete', function() {
  $('#loading').hide();
})

pjaxのイベント

以下のようなイベントが登録されています。
エフェクトなどを付ける場合はコンテナのこのイベントにエフェクト処理をバインドします。

全てを展開

pjax:start

pjaxが開始されたときに発生します。

pjax:end

pjaxが終了したときに発生します。

pjax:beforeSend

ajaxリクエストが開始される前に発生します。

pjax:send

ajaxリクエストを開始した後に発生します。

pjax:complete

ajaxリクエストが終了した後に発生します。

pjax:success

ajaxリクエストが成功した後に発生します。

pjax:error

ajaxリクエストが失敗した後に発生します。

pjax:timeout

ajaxリクエストがタイムアウト時に発生します。

pjax:popstate

ブラウザの戻る進むなどを行った時に発生します。

UTF-8以外の文字化け対策

UTF-8以外のコードをajaxで読み込むと文字化けを起こすため、HTMLをShift_JISなどで書いている場合はpjax:beforeSendイベントでXMLHttpRequest用の文字コードを設定します。

  $(document).on('pjax:beforeSend', function(e, xhr){
      xhr.overrideMimeType("text/html;charset=Shift_JIS");
  });

が設定されている時挙動がおかしくなる対処

jQuery.pjax.jsでは、HTMLにが設定されている時、発火点に戻るとBaseHrefのURLに戻ってしまう。
pjax294行め付近の以下の行を

 window.history.replaceState(pjax.state, document.title)

以下のように書き換えました。あとでもう少し調べてみようかとおもいます。

 window.history.replaceState(pjax.state, document.title, pjax.state.url)

一方通行にした場合のChrome対策

遷移先でpjaxが読み込まれていない時に、chromeではpage2でリロードを行った後にブラウザで戻ると正常なコンテンツを表示できなくなりました。遷移先に以下のような処理を加えることで回避出来るようです。

if ( $.inArray('state', $.event.props) < 0 ) $.event.props.push('state')

jquery.pjax.jsのルートで同じ処理を行なっているのでjquery.pjax.jsを読み込むだけでも回避は出来るようです。


PHP

  • ￥が付いていないカンマで区切る
  • 動的エレメントを操作する（Flexy）
  • 引数に結合した文字列を送る（Smarty）
  • PHPã‚’CGIモードで動かす(Xrea)
  • Concrete5でpjax！

javascript/jQuery

  • pjaxでスムーズなページ遷移
  • スムーズスクロールについて考える
  • 固定サイドバーについて考える
  • ヘッダーの一部だけ固定する

MySQL/SQLite

  • ビューのメモ(SQLite)
  • トリガーのメモ(SQLite)
  • 逆方向のキーワード検索

Photoshop

  • ガイド機能
  • グループ化機能
  • 水玉テイストな飾り用カスタムシェイプ
  • プリセット機能
  • 変数定義とデータセット
  • 可愛いドットモザイクを作る
  • 画像を自動で作成するスクリプト
  • フォントを素早く変更する
  • 5秒で出来るとろけるようなエフェクト
  • テキスト1行づつ分割するスクリプト
  • レイヤーをランダムに操作するスクリプト
  • ハートと星のポイントカスタムシェイプ

Illustrator

  • パスを変形したらなんか崩れて困る

その他

  • バーチャルホストの設定(Windows)
  • eclipseのオートフォーマットが崩れる

Tags

正規表現 (1) PHP (6) SQLite (2) MySQL (1) Photoshop (12) Apache (1) Windows (2) Flexy (1) Smarty (1) Illustrator (1) チュートリアル (3) 配布ツール (5) Webデザイン (8) jQuery (4) Javascript (4) pjax (1) CSS (1)
Edited 2015.07.04 Created 2014.05.11

PAGETOP