Blog

ブログ

改修しやすいテンプレート作りを考える

複数人がチームを組んでCMS連動サイトを作る場合、テンプレートの担当者以外が後日、ソースコードの改修をすることがよくあります。

私の場合、制作会社から依頼を請けることが多いので、そこの担当者=ディレクター、またはその会社の、MovableType/WordPressのスキルを持つ制作の方がコードを見ることがあります。

個人でテンプレートの構築をしていた頃は、変数や独自タグを駆使してけっこう複雑なコーディングもしていたのですが、チーム制作に関わるようになってからは
「自分以外のテンプレート制作者が見ても、理解しやすい構造になっているか」
を考慮するようになりました。

特に質問されることが多いのが、自分以外には見通しが利きにくい、以下の二つです。

  • 何度も使い回す関係でモジュール化して、インクルードで読み込んでいる部分
  • mt:SetVarやPHPの変数を使用している部分

特にMovableTypeの「mt:Include」には多彩な機能があり、下のようにモディファイアに変数の値を渡したり、

<$mt:Include module="Module_Hoge" foo="Var"$>

(↑読み込み先の「Module_Hoge」モジュールで変数名fooに値Varが渡されます)

mt:IncludeBlock」という、変数の値を渡すことを前提としたタグもあります。& lt;/p>

<mt:IncludeBlock module="Module_Hoge2">
Movable Typeへようこそ!
<mt:IncludeBlock>

(↑読み込み先の「Module_Hoge2」モジュールで変数名contentに値「Movable Typeへようこそ!」が渡されます)

ですが、私はこういった変数の渡し方はできるだけ避けています。

このような変数の渡し方をコード全体に渡ってやってしまうと、モジュール側の方のコードを見て
「あれ?ここで参照されてる、変数fooってなんだろう」
と思ったときに、読み込み元と思われるベーステンプレートを上から下まで探さなければいけなくなります。
繰り返しや条件分岐などの一時変数以外は、わかりにくい場所で変数を宣言するのは避けるべきです。

私の場合、サイト内で頻繁に利用されることがわかっている固定値は、
mt:SetVars」「mt:SetVarBlock」などを使い、テンプレートの先頭でまとめて宣言してしまうようにしています。

全テンプレートに使用する変数はやはりモジュールとなりますが、少なくとも変数について訪ねられたら
「グローバルテンプレートの『Module_Config』を見てください」
とか
「テンプレートの文書宣言の次辺りに書いてあります」
と、簡単に変数を宣言している場所を答えることができます。

モジュールの呼び出し方に関しても、

と、外側のレイアウト用のdivが残るように、かつHTMLタグを分断しないように呼び出し、各テンプレートのHTML構造を見通せるよう気を付けています。

また、複雑な条件分岐などをしているところでは、mt:IgnoreやPHPコメントなどで説明を添えることも多くなりました。<mt:Ignore>### ○○のときは△△を表示します ###</mt:Ignore>

これまでのTipsでもう出てきていますが、変数やモジュールの命名に関しても
「Global_」や「Module_」などの接頭語を統一して、それらが何に使われているのかが名前を見ればわかるようにしているのも、テンプレートをわかりやすくするための工夫のひとつです。


…と、何だか高度なことをやっているような書き方をしましたが、これらはシステムそのものを作り、かつ日常的にチーム制作をしているプログラマにとっては、基本中の基本だろうと思います。

「デザイナー」を名乗っていると、デザインをテンプレートで再現することに集中しがちになりますが、HTML/CSSコーディング同様、テンプレートの構築もプログラミングの一種です。
テンプレートコーディングに関しても、より早い構築・改修ができるよう、定期的にブラッシュアップをはかりたいものです。