MODXを30分で理解する!簡易チュートリアル

はじめに

ここで解説するのはMODX Evolutionの使い方です。MODX Revolutionも基本的には同じですが、タグの書き方などが異なるためご注意ください。

独特の語感の専門用語

MODXのコンテンツ管理体系は素直な構成になっていますが、用語が独特なため難解に感じる人が多いです。難しく考えなければ簡単に習得できます。

習得しなければ使いこなせないというものではないので、必要に応じて理解を深めてください。

コンテンツの基本単位は「リソース」

MODXは「リソース」という単位でページを管理します。ページをひとつ作るということはリソースをひとつ作ることを意味します。

リソースは「リソース名(ページのタイトル)」「内容(本文)」「投稿日」「公開予約日」「テンプレート」など37種類の属性情報で構成されています。これらの属性情報は「リソース変数」と呼ばれ、MODXを理解するうえで重要な概念です。リソース変数は、投稿画面上の各入力フィールドそのものと考えるとイメージしやすいです。

たとえば「リソース名」は、「pagetitle」というリソース変数名が割り当てられています。この場合、以下のように用いることができます。

[*pagetitle*]

テンプレートや本文内に上記のように記述することで、リソース名(pagetitle)として入力された値を表示することができます。投稿画面上の入力フィールドをひとつずつ眺めて、テンプレートまたは投稿画面内にこう書けばここがこう反映されるのかと理解できればオーケーです。

パソコンのファイルシステムになぞらえて考えることもできます。

というような感じです。この調子で全部で37種類の属性情報があって、贅沢なファイルシステムのようなものです。

本文 [*content*] もリソース変数である点に注意してください。通常はテンプレートから呼び出しますが、本文内で本文を呼び出すとループ状態になります。MODXは自由度の高いCMSなので、そのような無理な呼び出し方もやろうと思えばできます。無限ループ事故を考慮してループ回数の上限が定められているのでご安心ください。

タグはどこにでも書ける

リソース変数はテンプレート・投稿画面・チャンク・スニペット・プラグインなどあらゆる場面で同じように使える汎用的な変数です。

管理画面操作 - ページを編集する

管理画面左側のリソースツリー(サイトツリー)上の任意のリソースをクリックしてみてください。

クリックするとリソースを編集できる状態になりますので、試しに、リソース名や本文などを適当に書き換えて保存してみてください。

リソース編集画面右上の「アクションバー」の「保存」をクリックします。

このように、MODXではページの編集がとても簡単です。

編集したページを表示する

アクションバー右上の「プレビュー」ボタンをクリックします。すると、今編集したページが表示されます。編集後に表示するため厳密にはプレビューではありませんが、あまり深く考えずに次へ行きましょう。

「リソース」という言葉は「URI」の「R」を意識しています(Uniform Resource Identifier)。MODXでいうところのリソースは、URIでアクセスできる単位(つまりページ)を指していると考えることができます。

リソース変数を使ってみる

さっきと同じように、リソース編集画面を開いてください。

[*pagetitle*]

本文欄に上記のように記述し保存してください。プレビューすると、そこにリソース名が表示されています。リソース変数はこのようにして呼び出すことができます。

よく使われるリソース変数

[*id*] リソースID。この変数は、投稿画面上に入力フィールドを持ちません。リソース新規作成時にシステム側で自動的に割り当てられ、変更することはできません。
[*pagetitle*] リソース名。管理画面のリソースツリーに表示されます。テンプレートを作る場合も、ページ名として用いることが多いです。
<title>[*pagetitle*]</title>
たとえばこのように用います。
[*content*] 本文。通常のサイトを作るには必須です。
[*longtitle*] タイトル・または長いタイトル。pagetitleは横幅が狭いリソースツリーで用いられるため、あまり長い名前をつけると管理画面が使いにくくなります。できるだけ、テンプレートではlongtitleを用いることをおすすめします。
[*alias*] エイリアス名。フレンドリーURL設定時には、URL表現として用いられます。URLが商品番号などを兼ねる場合は、テンプレートでaliasを用いると便利です。
[*description*] metaタグなどで用います。
<meta name="description" content="[*description*]" />
たとえばこのように用います。

[*id*] 以外は投稿画面上の個々の入力フィールドと対応しています。

リソースツリーの操作

管理画面左側のリソースツリーのリソース名を右クリックすると、コンテキストメニューが表示されます。

このメニューを用いて、そのリソースに対する移動・複製・削除・公開・非公開などのひととおりの操作ができます。

テンプレートを作る

まずは簡単なテンプレートを作ってみましょう。管理画面グローバルメニューの「エレメント」→「エレメント」管理から「テンプレート」のタブを開いてください。

「テンプレートの作成」をクリックし、下記のようなコードを記述します。

<html>
<head>
<title>[*pagetitle*]</title>
</head>
<body style="color:green;">
<h1>[*pagetitle*]</h1>
<div>[*content*]</div>
</body>
</html>

適当に名前をつけて保存してください。[*pagetitle*]がリソース名、[*content*] が本文です。

画像やスタイルシートを用いる場合は、適当なディレクトリにファイルを配置します。システム的にはテンプレート関連のファイルの置き場所は特に定められてませんので、扱い慣れたディレクトリ構成をMODXでもそのまま用いるとよいでしょう。

テンプレートを適用する

リソース編集画面を開き、作ったテンプレートを選んで適用してください。プレビューすると、このテンプレートを適用した状態でページが表示されます。

【ポイント】 リソース変数は、テンプレート・リソースのどちらからも同じように呼び出すことができます。

テンプレートを適用しない

リソース編集画面のテンプレート選択で「blank」を選ぶと、テンプレートを用いず、リソースの内容をそのまま出力することができます。実際には「本文」の内容だけを出力します。当然、<html>から</html>までを、まるごと記述する必要があります。

既存のサイトをそのままMODXに載せ替えるケースなどに便利です。テンプレート化を後回しにして、とりあえず各ページの内容をhtml構成まるごと貼り付けるだけですむため、手軽です。そのままでは不便なので、時間がある時に少しずつテンプレート化していくとよいでしょう。

リソースID

リソースツリー上のリソース名の右端に(1)(2)などの番号が表示されています。これはリソースIDと呼ばれるもので、各リソースを識別するためのID番号として扱われます。リソースIDを出力したい場合はリソースまたはテンプレート内に [*id*] と記述します。

リンクタグ(リソースリンク)

任意のリソースのURLを出力できます。テンプレートまたはリソース編集画面内で [~2~] と記述すると、リソースIDが2番のリソースのURLをそこに出力します。

<a href="[~2~]">会社概要</a>

上記のように、任意のリソースへのリンクを張る場合などに便利です。リンクタグを用いると、サイト構成の変更に追随して各ページのURLも動的に書き換わるため、サイト構成のチューニングをしやすくなります。

リンクタグは地味な機能ですが、サイト内リンクに関して他のCMSとの考え方の違いを象徴しており、そういう意味では重要です。サイト構成を自由に行なうために、リンクタグは必須です。

チャンク

管理画面グローバルメニューから「エレメント管理」を開き、「チャンク」をクリックします。

<title>[*pagetitle*]</title>

実例。上記のようなチャンクを作り、「html要素」など適当な名前をつけて保存します。

<html>
<head>
{{html要素}}
</head>
<body style="color:green;">
<h1>[*pagetitle*]</h1>
<div>[*content*]</div>
</body>
</html>

上記のようなテンプレートを作り、任意のリソースに適用します。

チャンクはこのように、html各部をパーツとして切り分けて管理するために用いることができます。

たとえばチャンクを用いて、html要素・ヘッダ・フッタ・コンテンツ部分・サイドバーなどに分割すると、テンプレートがすっきり見やすくなります。

<div class="banner">
<img src="summer_sale.jpg" width="550" />
</div>

上記のように、サイト内の随所のページで呼び出すバナー広告などをチャンクとして作るのも便利です。チャンクひとつの中身を書き換えると、サイト内の全バナーを一括で変更することができます。

green

上記のような内容のチャンクを作って「イメージカラー」などの名前をつけて保存し、下記のようなテンプレートを作ります。

<html>
<head>
{{html要素}}
</head>
<body style="color:{{イメージカラー}};">
<h1>[*pagetitle*]</h1>
<div style="border:1px solid {{イメージカラー}};">[*content*]</div>
</body>
</html>

このように、値の管理に用いるのも便利です。

担当者名が定期的に変わる部署であれば {{担当者名}} とするのもよいでしょう。サイト内の複数のページに記述された担当者名を、必要なタイミングで一括で変更することができます。

1.0.25J

当サイトにおいても、{{Evo最新版のバージョン}}というチャンクを上記のように作り、最新版のバージョンコードである「1.0.25J 」などの文字列をサイト内の複数のページで一括管理しています。当サイトでは5つのページで用いてますが、最新版をリリースするたびに各ページを編集する必要がないため便利です。

コンフィグ変数

ページ単位で紐づけられた情報がリソース変数であるのに対し、サイト単位に紐づけられた全体的な値を司るのがコンフィグ変数です。コンフィグ変数のほとんどは、管理画面グローバルメニューの「グローバル設定」で値を管理します。チャンクもサイト全体から参照できる値を管理できますが、コンフィグ変数はサイトの機能に関係するものであり、チャンクのように自由に追加変更できるわけではありません。

よく用いられるコンフィグ変数は、[(site_name)] と [(site_url)] の2つです。他はテンプレートやリソース編集などで用いることはあまりなく、コンテンツワーク・デザインワークに関してはコンフィグ変数の理解の必要性はあまり高くありません。

コンフィグ変数は、スニペットやプラグインなど動的処理を行なう場合に、高い頻度で用いられます。MODXをPHP開発のベースとして用いる場合は重要です。デザイナーにはあまり縁がないかもしれません。

ここまでのまとめ

スニペット

管理画面グローバルメニューの「エレメント管理」を開き、「スニペット」のタブをクリックします。スニペットを新規作成します。

return date('m月d日');

上記のようにPHP文を記述し、「今日の日付」などの名前をつけて新規スニペットとして保存します。

次に、リソース編集画面またはテンプレート編集画面を開き、

[[今日の日付]]

このように記述します。すると、今日の日付が出力されます。このように、アクセスしたタイミングなどにより動的に変化する値を出力したい場合はスニペットを用います。タイミング以外にも、アクセスしたユーザやクライアント環境、サイト構造などさまざまな条件によって出力値を変更できます。

eForm・Jot・WebLoginなどのように、インタラクティブな操作を必要とする場合にもスニペットを用います。

スニペットの働きは、動的出力を行なうタグとしての機能に限定されており、いわゆる汎用的な機能拡張としての性格を持つものではありません。しかし多機能・高機能なスニペットもあり、事実上の拡張機能と考えられることも多いです。

キャッシュ

return date('H時i分s秒');

上記のような内容のスニペット「現在時刻」を作ったとして、これを出力した場合、そのページに最初にアクセスした時点の時刻が表示されます。2回目以降のアクセスも同じ値が出力され、いつアクセスしても時刻が更新されません。これは、MODXのキャッシュ機能によるもので、一度出力した値は記憶され、次回からのアクセスに関しては、処理を省いて値をダイレクトに出力するものです。これにより軽快なページ表示を実現しています。

しかしキャッシュが有効だと、今回のケースでは実際の現在時刻を出力できないため役に立ちません。

[!現在時刻!]

上記のように記述すると、この部分に関してはキャッシュせず都度処理させることができます。いつアクセスしても、秒単位で正確な時刻を出力します。

MODXのキャッシュ機能は、シンプルで合理的な仕組みになっています。MODXがキャッシュ管理する情報は2種類あり、ひとつはページ単位のキャッシュ。もうひとつは、サイト単位のキャッシュ。前者は他のCMSでもよく見られますが、後者はMODX独特の考え方です。

キャッシュはライフタイムなどのプロパティを現在のところほとんど持っておらず、リソース編集やグローバル設定の更新時など、何か管理操作を行なうたびに全体を一律に初期化する仕組みになっています。いっけん非効率的ですが、副作用が発生しにくく、運用上の理解も最小限に抑えることができるというメリットがあります。

スニペットに値を渡す

スニペットは動的な出力を行なうブラックボックス的なパーツなので、与える値によって出力を変化させることができます。たとえば色を自由に選ぶことができるカレンダーを出力するスニペットを作ったとして、以下のように記述して値を与えることができます。

[[カレンダー?color=グリーン&backcolor=白]] (※最初のパラメータは&が不要)

または

[[カレンダー? &color=`グリーン` &backcolor=``]] 

このように記述します。「 ` 」はバックティック(バッククォート)です。シングルクォートと間違えないよう注意してください。

上記の2種類の記述スタイルはどちらも同じように処理が行なわれますので、好みに応じてスタイルを選ぶことができます。前者は、URLのクエリストリングを意識したスタイルです。eFormのように多数のパラメータを連ねるスニペットがあるため、見やすくするために後者のスタイルが考案されたという経緯があります。

パラメータ名「&color(前者の場合はcolor)」は、スニペット内部では「$color」として値が渡されます。PHPの読み書きができる場合は、このことを覚えておくとよいでしょう。

同梱スニペットの使い方

[[Wayfinder]]

上記のように記述すると、そのページを基点としたナビゲーションを出力します。

[[Wayfinder?startId=0&hideSubMenus=true]]

上記のように記述すると、トップページを基点としたグローバルナビゲーションを出力します。Wayfinderは、ナビゲーションやサイトマップの出力に適したスニペットです。多彩なパラメータによる高度な表現力を持ちます。

[[TopicPath]]

パン屑リストを出力したい場合はTopicPathスニペットを用います。

[[Ditto]]

記事一覧の表示にはDittoを用います。上記のようにパラメータを何も与えずに記述した場合、ブログのような出力形式になります。デフォルトの出力パターンがそうなっているためです。

[!eForm?tpl=form&report=mailtpl!]

問い合わせフォームを設置する場合はeFormスニペットを用います。上記の記述では、&tplパラメータでフォームの実体を、&reportパラメータで送信文のフォーマットを指定しています。送信ボタンをクリックした後に「お問い合わせありがとうございます」などの表示に変わるため、スニペットコールはキャッシュオフ書式( [!スニペット名!])で記述する必要があります。

[[AjaxSearch]]

サイト内検索の実装にはAjaxSearchスニペットを用います。上記のように記述するだけです。

プレースホルダ

■お問い合わせ内容
お名前:[+お名前+] 様
メールアドレス:[+email+]
お問い合わせ内容:
[+問い合わせ内容+]

たとえばeFormスニペットの場合、送信メールの書式を上記のように設定することができます。[+お名前+]や[+email+] はプレースホルダと呼ばれ、特定のスニペット単位で使うことができるミニスニペットのような働きを持ちます。WayfinderやDittoなど、多くのスニペットがプレースホルダによるカスタマイズに対応しています。

WayfinderやDittoのようにリソース単位のパターン出力を行なうものに関しては、チャンクの中でしかプレースホルダの値を出力できませんが、基本的には親スニペットが呼び出されたページ内であればどこでもプレースホルダを記述することができます。

ちなみにプレースホルダという言葉は、MODXの独自用語というよりは、欧米圏ではシステム問わず一般的に用いられる言葉です。たとえば日本語で例えたら、「入力欄」は「入力欄」ですよね。それと同じ感じです。英語が分からないとピンとこないですが、MODXで使われる用語はこういうパターンが多いです。

タグの入れ子

スニペットやリンクタグなど、パラメータで値を与えることができるタグに関しては、与える値としてタグの出力を指定することができます。

[~7~]

たとえば上記のように記述してリソースID=7のページのURLを決め打ちで出力するところを、

[~[*id*]~]

このように記述して、表示しているページのURLをページごとにそれぞれ出力することができます。

<li>[+date+] <a href="[~[+id+]~]">[+pagetitle+]</a></li>

Dittoでページのタイトル一覧のパターンを作る場合など、上記のように記述できます。

プラグイン

システムの機能拡張にはプラグインを用います。投稿画面のカスタマイズを行なうManagerManagerやログイン時に編集操作バーをページ上部に表示するQuickManagerなどはプラグインとして実装されています。一般的なCMSでいうところのプラグイン機構のイメージと同等です。管理画面の機能拡張で用いられることが多いですが、ページの出力内容を半角・全角に揃える・エンコードをShiftJISに変換するなどの処理も可能です。

モジュール

MODXの管理画面内に独自のオプション画面を追加したい場合は、モジュールを用います。プラグインの場合は、管理画面内の各部をカスタマイズしたりすることはできます。

プラグインとモジュールの違い

MODXをはじめてさわる人はプラグインとモジュールの違いが分かりにくいと思いますが、試しにそれぞれ2つ・3つ適当に好みのものを探してインストールしてみると感覚的に理解できます。

PHPプログラミングが多少分かる人なら、hello worldコードを書いた場合どこに出力されるかという違いを意識するとピンとくるでしょう。モジュールは自分自身が画面を持っていて、基本的にはそこに出力されるだけです。意外と低機能で使い道が少ないですが、複数のプラグインやスニペット、チャンクなどを管理するためのインターフェイスは(いちおう)備わっています。

プラグインの場合は、関連づけたイベントによって管理画面内のさまざまな場所に任意の出力を行なうことができます。MODXをシステム的にパワーアップしたいなら、まずプラグイン探しから始めるとよいでしょう。

他のCMSでは、モジュール的な機能もプラグインとしてまとめて扱うことが多いです。MODXの場合は用途が違うものとして分けているので、見通しのよい機能拡張をしやすいです。やや開発者向けの思想を感じられるかもしれませんが、いざという時に問題を解決しやすく、少し慣れれば扱いやすいです。
※モジュールとして登録するためのイベントを用意すれば、プラグインだけでモジュールと同等の仕組みを作ることができるはずなので、今後の課題として検討中です。

フレンドリーURL

http://example.com/index.php?id=7

MODXで作るサイトのURLは基本的に上記のようになりますが、

http://example.com/dir/page.html

上記のように静的htmlサイトのような分かりやすいURLを表現することもできます。フレンドリーURLと呼ばれる機能で、管理画面のグローバル設定で設定します。階層構成は、管理画面リソースツリーの親子関係をそのまま反映します。

相対パス・絶対パス

フレンドリーURLの出力を有効にした場合、URLはサイトのURL基準の相対パスとして出力されます。そのため、階層がひとつ深くなるだけでも、参照するパスがずれてしまい、リンクが無効になってしまいます。これを防ぐため、baseタグを用いて基準を示す必要があります。

プラグインとして実装されているTinyMCEの機能により、実際には記事内で自動的にサイトのURLを補うため、baseタグを使わなくてもパスがずれることはありません。しかしこの場合、CMSとしてはデータ活用の柔軟性を多少損ないます。ある程度MODXに慣れたら、TinyMCEプラグインの設定を相対パス(rootRelative)に変更することをおすすめします。

テンプレート変数

投稿画面にカスタムフィールドを追加することができます。これをテンプレート変数と呼びます。通常のテキストフィールド以外に、チェックボックス・ラジオボタン・テキストエリアなど、さまざまなインターフェイスを用いることができます。ファイルをアップロードするためのボタンを設置することもできます。

[*商品画像*]

「商品画像」というテンプレート変数を作った場合、上記のように記述して出力します。リソース変数と同じです。

テンプレート変数はテンプレート単位の紐づけになっているため、テンプレートの変更と連動して投稿画面の構成も変更するということができます。たとえば商品ページであれば、商品ページ専用のテンプレートデザインと、商品情報入力に特化した投稿画面構成がセットになります。

またテンプレート変数は、入力と出力それぞれを自由に司ることができます。入力に関しては、アットマークバインドと呼ばれるコマンドを利用すれば、任意のテキストファイルやデータベースの内容を入力値の代わりに用いることができます。出力に関しては、ウィジェットと呼ばれるUIを用いて、フィルター的な整形処理を通して値を出力することができます。たとえば画像のパスを入力した場合、自動的にimgタグを作って出力できます。

アットマークバインドとウィジェットを組み合わせると、任意のディレクトリにアップロードしたCSVファイルを読み込んで一覧表として出力するような処理を、拡張機能を使わずに行なうことができます。
※アットマークバインドはリソース変数でも利用できます。

エレメントの入れ子

各エレメントは、それぞれ入れ子で呼び出すことができます。チャンクの中からスニペットやテンプレート変数を呼び出したり、テンプレート変数の中からチャンクやスニペットを呼び出すなど、思いつく限りのあらゆるパターンの入れ子呼び出しが可能です。

スニペットやプラグイン・モジュールはPHPで記述されているため、これらのエレメントから他の各エレメントを呼び出す場合は、$modx->documentObject['変数名']や$modx->getChunk('チャンク名')などのように、$modxオブジェクトとして呼び出します。

自分で自分を呼び出すと、合わせ鏡のようなループ状態になります。当ページの最初のほうでも少し触れましたが、たとえば本文内に[*content*]と記述すると本文が何度も連続して表示されてしまいます。無限に出力され続けることを防ぐため、内部的には入れ子出力に対して20段階までの制限を設けています。

ここまでのまとめ

これからやってみるべきこと

簡単なテンプレートを作ってみましょう。MODXのタグとして使うのは、最初のうちは [*pagetitle*] [*content*] [(site_name)] の3つだけで十分です。

少し慣れたら、テンプレートの各部(ヘッダ・フッタなど)を{{チャンク}}に分割してみましょう。

他のページにリンクを張る時は [~リンクタグ~] を用いてください。

[[Wayfinder]] [[TopicPath]] [[Ditto]] [!eForm!] などの基本的な [[スニペット]] を使えるようになれば、基本的なことはほぼ習得できています。

[!eForm!] はキャッシュを無効にします。

[[Ditto]] を使う場合は [+プレースホルダ+] の使い方を覚える必要があります。

PR

  • KAGOYA
  • ASP at AKIHABARA Japan
  • CMS AWARDS 2007 Winner
ページトップへ