MODX Revolutionを自信を持ってオススメできるようになるまでの道のり

何か良いCMSないかと聞かれると「僕はMODX Revolutionを推してるけど、ちゃんと触ったことがない」と言いつづけていたので、MODX日本語公式のデモサイトとちょっと触って作ってみたサンプルページを見ながら使い方の簡単な説明と感想などをレポートさせてもらいます。

MODXとは

MODXはオープンソースのCMSです。5年くらい前に次世代CMSナンバー1に選ばれていましたが全然メジャーになりませんね…。
現在、MODXには軽快さがウリのEvolution（以下Evo）と拡張性など多機能さがウリのRevolution（以下Revo）の2種類があります。（※注　EvoとRevoの互換性がないことや、Evoの開発が進んでいないこともあり、2つを混ぜ合わせたMODX3が2013年中にリリースされることが決まりました）
僕がCMS使って作るとしたらサッカーゲームの情報サイトとかになるのでどっちかというとコンパクトなEvoの方が合ってそうな気はしてます。
Revoは拡張性の高さからWebアプリケーションのフレームワークに最適…らしいのですが、プログラミングはさっぱりなのでどう使えるのか全然わかってないです…。

Revoの特徴

公式の説明を読むのが一番早いので割愛。

Revoのざっくりした使い方

MODXはコンテンツをテンプレートやチャンク、スニペットを駆使して構築していきます。
Revoにはビルトインのテンプレートなどはほぼ何も入っていないので、自分で作成していかねばなりません。
以下、デモサイト（id:modx,pass:modxmodx)を見ながらどのように操作するのか簡単に説明させてもらいます。

ページの編集


上記の画面がWebコンテキストのHomeページ（リソース）の編集画面です。

右カラムがこのリソースの編集画面です。
上部にあるのがリソースのテンプレート変数と呼ばれるメタ情報や情報を記述する部分、下部がコンテンツ入力欄です。
タイトル以外に長いタイトルやメニュータイトルがありちょっとややこしいのは昔からです…。

左カラムにあるのはシステムのファイル（ページ）ツリーです。
WebとWeb2とありますが、これはWordPressで言うマルチサイト機能と同じような機能で、ひとつのシステムで複数のサイトを管理できます。


次に左右のカラムのタブの真ん中を表示させた図です。
右カラムの設定ではコンテンツの属性全般を設定できます。

親リソース
親リソースのドロップダウンリストをクリックしたら左カラムのリソースツリーからそのページの親ページを指定し、階層構造を実現できます。
リソースタイプ
ドキュメント以外にアップロードした静的ファイルを読み込んでシステム上のコンテンツに見せかける「静的コンテンツ」やWordPressでいうブログロールにあたる「ウェブリンク」というものがあります。他のリソースへのシンボリックリンクの「シムリンク」があります。
コンテンツタイプ
HTMLのほかにCSSやJS、JSONまであり、コンテンツの入力欄にソースを書くことで外部ファイルとして他のリソースに読み込むことができます。後述する私が作ったサンプルサイトではJSONを吐かせています。
コンテンツの渡し方
ページとして表示させるインラインとダウンロードコンテンツとするアタッチメントがあります。
公開日時系
設定は公開「終了」予定日時の設定もできます。

以上の設定でページを出力できます。

http://revo1.demo.modx.jp/

左カラムはページを構成する要素の一覧です。

テンプレート
共通のHTML、テンプレート変数は自分で好きなように設定できるカスタムのテンプレート変数（右カラムの上部の入力フォーム部分もテンプレート変数）
スニペット
使いまわしにするPHPのプログラムでWordPressでいうとテーマファイル群のfunction.phpに書く内容をパーツごとに記述したり、簡単なプラグインという感じ
チャンク
複数のテンプレートで使いまわすHTMLや、スニペットで繰り返し出力するHTMLのテンプレートとして使います。
プラグイン
スニペットよりもっと大掛かりなものでシステムに関わってくるものが多い…という認識。
カテゴリ
上記の要素の分類を行うことができます

テンプレートの設定


このキャプチャは最初から入っているBaseTemplateのものです。
テンプレートは基本的に素のHTMLとテンプレート変数の組み合わせです。
テンプレート変数やチャンクなどの呼び出し方についてはここに詳しく書いてます。
デフォルトで条件分岐が使えないのでスニペットで拡張するなり、設計に気をつける必要があります。

システム設定


こちらはシステム設定の画面です。
特徴はEXT JSで実装されていてシームレスに設定を変更することができるのですが、設定項目が多すぎて慣れるまでどこに何があってどうすればいいのかわかり辛いです。

私が作ったサンプルサイトのライブデモ

（以下、自宅作業のため画像のテイストが違いますがご勘弁を。）
サンプルにumaumapのMODX版をつくってみました。

サイトのリソース構成は以下の画像のようになっています。

トップページと更新履歴、お店のリストのJSONを吐くコンテナの下に各お店のデータを配置しています。

トップページ

テンプレートをなしにしてコンテンツ部分にソースを直に書いても良かったのですが、ちょっと格好わるいかと思ったので分離しています。

JSON


コンテンツ部分は「getResources」というスニペットを呼び出しています。
各々パラメータは以下の通り。

&parents=`[[*id]]`
出力するコンテンツリストの親リソース。この指定は自分自身になります。
&tpl=`json`
データを出力するHTMLテンプレート（チャンクを呼び出す）の名前。
&tplFirst=`jsonF`
1つめに出力するHTMLテンプレート名。JSONの場合カンマが必要になり、末尾の余分なカンマの存在が怪しかったので基本tplには文頭にカンマを入れて、1つ目にはそれが入らないようにしています。
&tvPrefix=“
カスタムテンプレート変数（自分で作ったやつ）の接頭辞を指定。空指定なのでチャンクに書く場合は接頭辞なしで認識されます。
&includeTVs=`1`
よくわからない部分。カスタムテンプレート変数をこのスニペットで使えるようにするパラメータっぽい。。
&processTVs=`1`
よくわからない部分。カスタムテンプレート変数をこのスニペットで使えるようにするパラメータっぽい。。
&limit=`100`
表示件数。初期値は5っぽかったのでとりあえず100にしています。

上部の設定で「URIを固定」という項目があります。
基本的にドキュメントタブ内のエイリアスで指定した名前と設定タブのコンテンツタイプに対応した拡張子にファイル名が決まりますが、このオプションを使えばそのルール関係なしの好きな名前をつけることが出来ます。

各お店


このページはタイトルと説明とカスタムテンプレート変数の住所と緯度・経度のデータだけを持ったものになっています。
テンプレート変数はその名の通りテンプレートに紐付けるもので、住所と緯度・経度の入力フィールドはumaumapというテンプレートを設定しているリソースのみ持っています。

こんな簡単なサンプル程度では全然MODX Revolutionの良さを感じられませんでした…。
umaumap自体もスプレッドシートを使った方が簡単に作れると思いますし、データが増えた場合の見通しの良さも断然いいでしょう。
JSでシームレスに更新してくれるのは良いですが、ページを遷移したらレンダリングし直さざるを得ない部分や、設定が多岐にわたりページを行ったり来たりしないといけないので慣れるまでが大変です。
権限できることを制限するとシンプルになるかもしれませんが、クライアントもWebに慣れてないと更新が苦痛になりそうな気もしました。あとはレガシーブラウザだとまともに表示できなさそうな点も気がかり。

個人的にはこういうのは好きなのでもっと皆さんにお勧めできるようにもっと別の物も作ってみようと思う所存です。