CMSのポテンシャルを引き出す─MODxで作る商用サイト

第5回スニペットとチャンクを制する者はMODxを制す

はじめに

待ちに待った大型連休が近づいて参りました。連休中にやることと言えば、家族サービス、そしてMODxを含む、オープンソースソフトウェアの検証です!

読者の皆さんの多くは、4/28にリリースされるUbuntu-11.04を心待ちにしていらっしゃるでしょうが、MODxのことも忘れないでくださいね。

もうすぐ母の日

ゴールデンウィークとともに、母の日も近づいてきました。感謝の気持ちを伝えるために、新茶をプレゼントしてみてはいかがでしょうか? なかみつ園では薫風という少し高級なお茶をご用意しておりますが、5月1日より新茶での提供が始まります。

備考欄に【母の日】と書いていただき、メッセージを添えていただければ、オリジナルラッピングとともにメッセージカードをお付けいたしますので、ぜひ検討してみてくださいね。

嬉しいニュースがありました

技術的な話に戻りますが、MODx Revolutionを導入するうえで、ひとつの障壁となっていたのが「CentOS-5.5におけるPHPはバージョンが低く要件を満たしていない」ということでした。そこで、本連載の第1回ではphp-5.2.xをtestingリポジトリ経由で導入し、ワークアラウンド的な対応を行っていました。

ところが、嬉しいことに最近リリースされたCentOS-5.6からは、php53というパッケージが標準リポジトリから導入できるようになりました。具体的には、CentOS-5.6上で

# yum -y install php53*

とすることで、php-5.3.3本体や関連モジュールをインストールすることができます。これまで、PHPの依存関連が原因で導入に踏み切れなかった方々は、ぜひこの機会にチャレンジしてみてください。

リッチテキストエディタ、TinyMCEの導入

これまで4回に分けてMODxの重要な機能を紹介してきましたが、CMSとして重要な機能をまだ紹介しきれていません。そのひとつが今回紹介するリッチテキストエディタで、環境によってはWYSIWYGエディタなどとも呼ばれています。

WordPressなどを代表とする近年のCMSの魅力のひとつは、JavaScriptによるリッチテキストエディタにより、誰でも簡単にワープロ感覚でドキュメントを作成できることです。しかし、すでにお気づきのように、MODxをインストールしたばかりの状態では、このようなエディタは含まれていません。

これは、⁠MODx Revolutionには最低限の機能しか含めず、追加機能が必要な人のみパッケージマネージャから導入を行ってもらう」というある種の美徳なのかもしれませんが、コンテンツの豊富な商用サイトを作成するうえでは、絶対に入れておきたい機能です。

例のごとく、このような追加パッケージは「システム⁠⁠→⁠パッケージマネージャー⁠⁠→⁠プロバイダから取得⁠⁠→⁠TinyMCEと検索⁠⁠→⁠ダウンロード⁠⁠→⁠インストール」と進んで導入を行ってください。

パッケージをインストールすることで、図1のようにコンテンツ作成部分に編集用のボタンが現れ、ずいぶんと操作がしやすくなったはずです。

図1 TinyMCE導入後のリソース作成画面
図1 TinyMCE導入後のリソース作成画面

TinyMCEの設定

インストールしただけでもいろいろと便利なTinyMCEですが、なかみつ園のサイトでは、商品紹介ページなどでテーブルを多用することがあります。しかし、デフォルトの状態ではテーブル関連のボタンが無いため、少し不便です。

編集用のパーツがもう少し欲しい場合には、TinyMCEの設定を見直してみましょう。システム全体や個別パッケージに関する設定を変更、確認するには、例のごとく「システム⁠⁠→⁠システム設定」に移り、⁠core」と表示されている部分から「tinymce」を選択して、TinyMCE関連の設定情報を表示します。

ここで、⁠キー名: tiny.custom_plugins」にテーブル用プラグインである「table」を追加し、パーツを表示するために「キー名: tiny.custom_buttons3」の内容を「tablecontrols」としておきます。最後に各コンテンツの編集画面に戻ってみると、図2のように編集パーツがよりリッチになっていることがわかるはずです。

図2 TinyMCEの拡張
図2 TinyMCEの拡張

TinyMCEが使用可能なプラグインや機能については、MODxではなくTinyMCE自身に準拠しますので、興味のある方はTinyMCEリファレンスの「Buttons/controls」の項を参考にしてみてください。

スニペットとチャンク

スニペットとチャンクを制する者はMODxを制すと言っても過言ではありません。CMSをより便利に効率的に活用するために必要なのがこの2つです。

これらの言葉は日常ではあまり耳にしませんので、イメージが掴みにくい方もいらっしゃるかもしれませんが、なかみつ園でも見えない部分でこれらを活用することで、効率的に情報を発信しています。

まず、スニペットとは、プログラミングで言う関数のようなものです。PHPで記述されたスニペットをコールすることで、処理結果をテキストとして表示したり、引数を与えて処理させることもできます。

なかみつ園ではたくさんのスニペットを活用していますが、その中でもシンプルなスニペットを、ページフッタ部分のコピーライト表示で使っています。コピーライト部分は2011年4月時点で

© Copyright 2009 - 2011 お茶のなかみつ園

となっていますが、時間が流れ2012年になった場合には、自動的に表示年もカウントアップされるようになっており、後々の更新忘れミスや手間を事前に防止することができるのです。

このコピーライト用のスニペットの作りは非常に簡単です。管理画面の左側ウインドウより「エレメント⁠⁠→⁠スニペット」を右クリックし、⁠スニペットを作成」というメニューを選択し、次のような内容のスニペットを作成してみてください。

スニペット名: ShowCopyright

<?php
$this_year = strftime("%Y");
return "Copyright 2009 - " . $this_year . " お茶のなかみつ園";

あとは、コピーライトを表示したいテンプレートやリソース中で、スニペットをコールするための記述を行います。スニペットコールのためには特殊なMODxタグを使って

[[!ShowCopyright]]

と記述します。そうすると、実際のページの表示は図3のようになります。

図3 TinyMCEの拡張
図3 ShowCopyrightスニペットの動作確認

スニペットとキャッシュ

先ほどは、

[[!スニペット名]]

という形でスニペットをコールしましたが、

[[スニペット名]]

という書式も可能です。⁠!」の有無により、スニペットがキャッシュされるか否かをコントロールすることができます。

実際に、キャッシュの有無による挙動の違いを確認してみましょう。次のスニペットを作成してみてください。

スニペット名: ShowCurrentTime

<?php
return strftime("%Y/%m/%d %H:%M:%S");

ご想像の通り、このスニペットは現在時刻をYYYY/MM/DD HH:MM:SSという形式で表示します。では、適当なリソースの中で、

[[!ShowCurrentTime]]

という形でスニペットをコールし、実際のページを何度かリロードしてみてください。リロードするごとに、最新の時刻が表示されるはずです。一方、

[[ShowCurrentTime]]

とした場合には、リロードしてもキャッシュされた値が使用されます。このキャッシュは、リソースの内容を更新すればクリアされるため、スニペットの内容に応じて管理者がキャッシュの有無を指定することで、パフォーマンスの向上やリアルタイムデータの表示などをコントロールすることができます。

具体的な例を挙げるとすれば、コピーライトの表示内容は滅多に変わるものではありませんので、キャッシュを指定しておくのが吉です。また、スニペット内で画像ファイルの読み込みを行うような機能も低パフォーマンスの原因となりますので、なるべくキャッシュさせるようにします。

一方で、⁠閲覧者ごとにランダムなメッセージを表示させたい」場合にはキャッシュが邪魔になりますので、多少のパフォーマンスは犠牲になりますが、[[スニペット名]]という形でコールします。

スニペットとチャンク

チャンクもスニペット同様、特殊なMODxタグを使用して、

[[$チャンク名]]

のようにコールしますが、PHPで記述されるスニペットと異なり、チャンク自体はHTMLのかたまりで、プログラム部分とデザイン(HTML)部分を分離するためにスニペットと併用して使われることが一般的です。

たとえば、前述のShowCopyrightスニペットを例に挙げると、これは非常にシンプルなスニペットではありますが、PHPで記述されているため、プログラミングの知識の全くないデザイナーがコピーライト部分の表記を変更するのは困難かもしれません。

一方で、スニペットとチャンク両方を使ってコピーライト表示機能を実現するとすれば、次のような形になり、PHPに詳しくないデザイナーでも簡単にチャンク内でデザインを変更することができます。

また、スニペット開発についても役に立つガイドラインが存在しますので、時間があれば「MODxのスニペット開発のガイドライン」で検索してみてください。チャンクやスニペットの使い分けについても知ることができます。

スニペット名: ShowCurrentYear

<?
return strftime("%Y");

チャンク名: ShowCopyright

<string>Copyright 2009 - [[ShowCurrentYear]] お茶のなかみつ園</strong>

チャンクの呼び出し

[[$ShowCopyright]]

最後に

今回はMODxの強力な機能であるスニペットやチャンクについて簡単に解説してきましたが、これらの知識は独自スニペットやチャンクを作成する場合だけでなく、パッケージマネージャーから様々なパッケージをインストールする場合にも役に立ちますので、是非とも簡単な実験とともに、その意味合いを理解しておくようにしてください。

次回は引数を伴ったスニペットや便利なパッケージの紹介を行う予定です。お楽しみに。

おすすめ記事

記事・ニュース一覧