MODXを導入してみた

2014/10/05

MODXとは？

CMSのひとつ。
Webサイトの更新やメンテナンスの作業負担を減らすことの出来るツールです。
テンプレートを用意すれば、あとは記事の内容を書くだけでサイトの更新ができます。
サイトのデザイン変更をするときは１箇所書き換えるだけで全ページに反映されるので大変便利。
MODX以外にはWordPressとか有名です。

メリット・選んだ理由

今使用しているサーバーがCGIを使えない環境だったので、ローカル環境でHTMLファイルを作成し アップロードする方法が大前提でした。
メンテナンスを容易にするために、CMSの導入が必要でした。
しかしCMSはサーバー環境を用意しないと動作しません。これはWebMatrixを導入することで解決しました。
これを使えば簡単にローカルPC上に環境構築と各種インストール作業を行うことが出来ます。

さてあとはどのCMSにするかというところで、実際に幾つかCMSを入れて使ってみました。これが手軽にできるのは非常にありがたかったです。
標準でHTML出力に対応していて一番融通が効きそうで、自分のスタイルにも合っていそうなのがMODXだったわけです。

インストール

まずはWebMatrix2をインストールします。
WebMatrix2 : http://www.microsoft.com/web/webmatrix/

インストールが終わったら次はMODXのインストールです。
WebMatrix2起動して、アプリギャラリーを選択してください。
様々なアプリがここからインストールできますが今回は MODX Evolution 日本語版 を選択。あとは画面の指示に従ってインストールするだけです。
基本的にはデフォルトの設定で進めて構いません。
ただ私の場合は「Quick Manager」プラグインが邪魔だったのでインストールの時点で外しました。
人によっては便利なんですが、今回はローカル環境での運用ですし、私のやり方ではソースが勝手に汚されるプラグインは気に入らないのも理由のひとつです。
あとはこれといって特に悩むことなくインストールできた印象です。

またこれとは別にWebMatrix2の拡張機能にはiPhoneシミュレーターやWindowsPhoneエミュレーターといった ものがあります。モバイル機器での表示確認をしたい方はこちらもインストールするといいでしょう。

さて何について書こう

詳細な解説なんかは各解説サイトにまかせます。
今回は主にエレメントについて語ってみようかと思います。
エレメントはwebページを効率よく作成し、またメンテナンスも容易にする事ができる便利機能です。
プログラムをされる方なら、変数や関数のようなものだと思っていただけるとわかりやすいと思います。

テンプレート

テンプレートです。そのままその名の通りに１個のhtmlファイルの一番大枠となるテンプレートです。
サンプル見れば使い方はすぐに理解できるでしょう。

テンプレート変数

MODXでは「１ページ分のデータ」をリソースと読んでいます。HTMLファイルの数だけリソース編集ページがあります。
リソース編集ページにはデフォルトで入力ボックスが幾つか用意されています。タイトルや説明を入れる事ができる入力欄です。 これらはリソース変数として利用できますが、これとは別にユーザー独自の入力ボックスが設置出来ます。それがテンプレート変数です。

本文内でこの変数を使うとその場所に入力ボックスに入力した内容を表示できます。
本文を直接書き換えると余計なとこまで間違って編集しちゃったりするので上手に使えれば便利です。

チャンク

すべてのページで共通の変数…定数を作ることができます。
よく使うんだけど全ページでは使わいからテンプレートには書けないしなー、とか。
本文の途中に入れるんだよっていうときとか。
そんな時に使うと便利です。

スペニット

簡易的な関数が作れます。
チャンクに引数を付けることが出来て、その引数によって出力結果が変えられる。そんなイメージ。
中身はphpの書式で記述できるので手軽に作成出来ます。

スペニットを自作した

スペニットは上で説明したとおり、簡単にいえば関数です。
ここからは私が自作して頻繁に使用しているスペニットを紹介してみましょう。

リソースごとにactiveクラスを付けたり付けなかったりさせる

私のサイトでは Bootstrap (from Twitter) を活用してサイトを作成しています。 ナビバーとか簡単にかっこ良く作れて便利なんですよね。

このスタイルシートでは「actieクラスにするとその要素だけ強調表示される」といった 使い方が頻繁にされています。Bootstrapの標準的な使い方と言っていいでしょう。

ナビバーなどはチャンクを使って共通パーツにしてしまうと便利です。
ですが、リソースごとにactiveクラスをつけたり付けなかったりする必要があります。
これを解決するためこんなスペニットを作成しました。 


// 変数 [*id*] を取得
$tmplvar_info = $modx->getTemplateVar('id');
if ($tmplvar_info !== FALSE) {    // 問題なく情報が取得できた場合
  $id = $tmplvar_info['value'];    // テンプレート変数の入力値を取得
} else {
  return;
}

// 引数取得
if (isset($tid)==FALSE){ $tid = '0'; }
$tids = explode(',', $tid);

// リストの中にidが見つかったら「 active 」を出力
if ( in_array($id, $tids) ){
    echo ' active ';
}

書式：[!hogehoge? &tid='id,id,id,...'!]
「active」という文字列を入れたい場所で、こんなかんじの書式で使用します。
idはカンマ区切りでいくつ入れても構いません。

使用例：[!スペニット名? &tid='1,3,10'!]
このように書くと、リソースidが１または３または１０のリソースでは文字列「active」を 出力しますがそれ以外のリソースでは何も表示しません。

baseタグを使いたくない！相対パスを実現する

既存のサイトを移植する際、フォルダ構成は変えたくないですよね。
それに普通は相対パスで書いてるほうが多いと思うのでなんとか絶対パスは回避したいところです。
でもMODXのHTMLエクスポートはBASEタグを使用した絶対パスを推奨しています。

私の場合も旧コンテンツは全部相対パスで書いてましたので問題になっていました。
そこで何とか頑張って相対パスにしてしまうスペニットを書いてみました。 


// リソース変数 [*parent*] を取得（親ドキュメントのID）
$parent= $modx->documentObject['parent'];
if($parent == '') { $parent='0'; }

// 引数取得
if (isset($fs)==FALSE){ $fs = '0'; }
// fs=0のとき「/」あり、fs=1のとき「/」なし
if ($fs=='0'){
  $path_suff='/';
} else {
  $path_suff='';
}

// 追加するパス
switch ($parent) {
    case '0':　←一番浅い階層
    echo '.'.$path_suff;
    break;
    case '4':　←親コンテナが4のリソース
    echo '..'.$path_suff;
    break;
    case '56':　←親コンテナが56または60または…のリソース
    case '60':
    case '62':
    case '66':
    case '68':
    case '80':
    case '83':
    case '88':
    case '90':
    echo '../..'.$path_suff;
    break;
    default:
    echo '..'.$path_suff;
}

コンテナが増えたら手動で書き直す手間はかかりますが、これで何とか相対パスにできます。実際に使用するときは次のように記述します。

書式１：[[スペニット名]][~id~]
出力結果：「../../hogehoge.htm」

書式２：[[スペニット名? &fs='1']]/hogehoge.htm
出力結果：「../../hogehoge.htm」（最後の/を出力しない。）

要するにコンテナの階層に合わせて「../」を入れているだけです。
私は[~id~]の前に常にこれを入れて使っています。

スペニットは便利ですね

あとはこれらの応用で似たような簡単なスペニットを作ったりしています。

作ったスペニットはテンプレートやチャンク内で利用しています。同じものを使い回しするには上記のような 対策が必要なんですよね。階層を単純化したりすれば本来こんな対策必要ないのですが、外部からのリンクなどが あるので、すでに出来上がっている階層構造はできるだけ変えたくなかったんです。

そんなこんなで移植作業が完了。現在もMODXを活用しています。

解説サイトのためのテクニック

このようなMODX関連記事を書いていると、チャンクやスペニットなどの表記が面倒ですね。
公式サイトにはプラグインを使った方法の説明がありましたがプラグインよくわからないです。
なので原始的な方法を考えてみました。要するに変数として反応する原因となる文字を捜して 別の反応しない文字に置き換えればいいんですよ。

MODXの各種変数を見つけるための正規表現 

\[(\*|\(|\[|\~|\+|\^|\!)|{{|(\*|\)|\}|\]|\~|\+|\^|\!)\]|}}

MODXで変数として反応しないよう文字コードで置き換えるための文字コード

記号文字コード
[[
]]
{{
}}

関連記事

  1. MODXスニペット　MODXのスペニットを変更 　これまでMODXでサイト作成し...
  2. MODXを再導入した　目次 やらかしたのでやり直し リソースへのパスを相対パスにす...