MODXでPjaxしてみる

シームレスなページ遷移ができる Pjax を MODX で実装する Tips です。

CMS でページの一部分を Pjax する場合テンプレート内で表示の分岐をさせるスクリプトを記述をする必要がありますが、MODX では元々テンプレートがしっかり分離されているのでテンプレートを切り替える数行のプラグインを作るだけでいいので非常に簡単でした。私がMODX贔屓だからじゃなくて…いくつかの CMS で試してみましたが MODX はほんとにびっくりするぐらい簡単なのです。

Pjaxとは?

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

備忘録で汎用向けの Pjaxの記事 を書いています。先にこっちを読んでもらえるといいかも!

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

Pjax を使うとリンクをクリックしたとき普通にページに飛ぶのではなく Ajax で遷移先のページの内容を読み込んで今見ているページの差分だけを更新します。レスポンスを早くしたり、ページ切り替えのエフェクトをつけたり出来ます。

デモ

作成中です

このサイトのコンテンツ部分をPjaxで遷移させています。

ダウンロード

jQuery本体と、jquery.pjax.jsをダウンロードします。

MODXでpjaxを使う!

Pjax が実行されると Pjax は MODX に「Pjax からのリクエストだからそれ用の更新したい所だけのデータをください~」と言ってくるので、MODX はそれに応えて必要ない部分を省いた HTML を吐いて Pjax に返します。

通常用のテンプレートを作る

非 Pjax 用のテンプレートを作成します。すごく簡単な例はこんな感じです。
以下の例はクラス名にpjaxが付いているリンクをクリックしたときに#pjaxContentを書き換えます。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
  <base href="[(site_url)]">
  <title>[*pagetitle*] | [(site_name)]</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.pjax.js"></script>
  <script type="text/javascript">
  $.pjax({
area : '#pjaxContent', // 置き換えるコンテナのIDまたはクラス
 link : 'a.pjax' // .pjaxクラスがついたリンクをクリックした時だけ
}); </script> </head> <body> <h1>[(site_name)]</h1> <a href="[~10~]" class="pjax">pageID:10</a><br> <a href="[~11~]" class="pjax">pageID:11</a><br> <div id="pjaxContent">
  <h2>[*pagetitle*]</h2>
<div class="content">[*content*]</div>
</div> </body> </html>

名前はとりあえず「通常用のテンプレート」にしておきましょう。

中にあるID10ID11のリンクは作成したリソースのIDに置き換えてください。
Wayfinder などで動的に吐いてもいいと思います。(その場合もクラス名に pjax をつけます。)

pjax用のテンプレートを作る

ヘッダーやフッターなど必要ない部分を取り払った#pjaxContentだけのテンプレートを作成します。これが元のページの#pjaxContentの中身と入れ替わるようにしてページ遷移をします。
<title>を入れておくと Pjax した時のブラウザのタイトル部分も更新します。

最初のページからID10のリンクをクリックしたときID10のテンプレートは以下のシンプルなものが使われて元のページのエリア部分だけを書き換えます。

<title>[*pagetitle*] | [(site_name)]</title>
<div id="pjaxContent">
<h2>[*pagetitle*]</h2>
<div class="content">[*content*]</div>
</div>

これだけです。名前はとりあえず「Pjax用のテンプレート」にしておきましょう。

Pjaxリクエストを判断するためのプラグインを登録する

探して特に無かったので simple Pjax というプラグインを作ってみました。
Pjax リクエストの場合元々リソースに設定されているテンプレートの代わりに Pjax 用のテンプレートを使うようになります。

オプションの書き方は、「元のテンプレートID=Pjax用テンプレート」複数ある場合はカンマで区切ります。
ダウンロードはこちらから (MODXプラグインのインストールの仕方)

上で作った2つのテンプレートIDを指定します。
通常用が2で Pjax 用が3なら設定タブのテンプレートの変更ルールに以下のように書きます。

2=3

準備完了!なにかリソースを作ってみる

これでもう使用可能です。既にあるテンプレートなら、更新させたいエリアのIDを #pjaxContent を変えて考えてもらうか、エリアを囲む感じで Pjax 用のエリアのタグを追加して下さい。

準備はできたので適当にリソースを作ってみましょう。
リソース編集ページで設定するテンプレートは先に作った「通常用のテンプレート」です。

あとはテンプレートを作りこんだり、イベントに関連付けて GitHub みたいなエフェクトを付けてみたり色々遊んでみると楽しいです。

Pjaxするようなもの

元々個別の URL をもっているコンテンツの遷移に使用するため、メニューなどの小さいコンテンツを Pjax で置き換えるというのはあまり向いていないと思います。メニューや小窓など Ajax は #(フラグメント) を使用するのがいいのではないかと個人的感想です。

Edited on 2017.04.09 Created on 2012.11.07 MODX Webデザイン チュートリアル Evo Pjax JavaScript