MODXでpjaxしてみる
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で遷移先のページの内容を読み込んで今見ているページの差分だけを更新します。レスポンスを早くしたり、ページ切り替えのエフェクトをつけたり出来ます。
デモ
demo（こんな感じに動きます ブラウザが対応していればスマホでも動きますね）
ダウンロード
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>
名前はとりあえず「通常用のテンプレート」にしておきましょう。
中にあるID10、ID11のリンクは作成したリソースの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リクエストを判断するためのプラグインを登録する
探して特に無かったのでsimplePjaxというプラグインを作ってみました。
pjaxリクエストの場合元々リソースに設定されているテンプレートの代わりにpjax用のテンプレートを使うようになります。
オプションの書き方は、「元のテンプレートID=pjax用テンプレート」複数ある場合はカンマで区切ります。
ダウンロードはこちらから (MODXプラグインのインストールの仕方)
上で作った2つのテンプレートIDを指定します。
通常用が2でpjax用が3なら設定タブのテンプレートの変更ルールに以下のように書きます。
2=3
準備完了！なにかリソース���作ってみる
これでもう使用可能です。既にあるテンプレートなら、更新させたいエリアのIDを#pjaxContentを変えて考えてもらうか、エリアを囲む感じでpjax用のエリアのタグを追加して下さい。
準備はできたので適当にリソースを作ってみましょう。
リソース編集ページで設定するテンプレートは先に作った「通常用のテンプレート」です。
あとはテンプレートを作りこんだり、イベントに関連付けてGithubみたいなエフェクトを付けてみたり色々遊んでみると楽しいです。
pjaxするようなもの
元々個別のURLをもっているコンテンツの遷移に使用するため、メニューなどの小さいコンテンツをpjaxで置き換えるというのはあまり向いていないと思います。メニューや小窓などAjaxは#（フラグメント）を使用するのがいいのではないかと個人的感想です。
