- Coding Methodology
- 第32回 Movable Type 変数
第32回 Movable Type 変数
Movable Typeでは、テンプレート内で「変数」を使って情報を制御するためのタグが用意されてます。これらを使用することにより、 Movable Type （MT）でのサイト制作において、より効果的・効率的にコンテンツを管理するためのツールとして活用することが可能になります。
MTでスタイルシートを管理
大規模サイトではスタイルシートの量も多くなり、各ページ内では少しの修正でも、テンプレート数が多くなると、変更箇所が多くて大変です。変更工数を減らし、変更漏れを防ぐ為に、スタイルシートを右のソースように、変数を使ってまとめておくことで、変更があった場合にいくつもの箇所を修正する必要がなく、一度に置換することができます。
各カテゴリでclassを変える
カテゴリごとにページ内のデザイン変えたり、ローカルナビのカレント設定をする場合に、bodyにclassを与えることがあります。カスタムフィールドを使って、サイトの更新者がクラス名を書くという方法もありますが、更新箇所が増えてしまう上、手作業になるため、更新忘れなどの入力ミスの可能性が生じます。そのようなことを避ける為に、変数と条件分岐を使って自動的にclass名を取得できるようにします。
01行目でカテゴリの名前が"カテゴリA"の時に変数"bodyclass"に"l01"を与えています。02,03行目も同様に定義します。04行目で該当の記事が属しているカテゴリのbodyclassを取得しています。
これにより、更新者が記事エントリの際にカテゴリを選択するだけで、カレント設定やデザインの変更を自動で行うことができます。
変数を使った演算式とheightline.jsの連動
下の図のように2種類のカテゴリが並列に並んでいた場合、エントリしていくとテキストの量や画像サイズの違いで、赤枠のようにエントリ毎に高さが変わってしまいます。デザイン上、青枠のように左右のエントリーの高さを揃える場合に、heightline.jsを使えば再現することができますが、左右のエントリ毎でheightlineのclass記述を揃えなればなりません。
※ heightline.jsの詳細： http://blog.webcreativepark.net/2007/07/26-010338.html
heightlineのclass名を揃える為に、変数を使った演算式を利用します。02行目のsetvarで0という値をcountに代入して、04行目のsetvarでopモディファイアを使い、エントリ毎にcountに1を足していくという記述をしています。このように記述することで、クラス名はclass="heightLine-group1","heightline-group2"と連番で出力されます。
MTにはいろいろな設定が準備されているため、少しの工夫が、デザインの再現性や運用更新のしやすさに大きく影響してきます。単に「MTを導入する」というだけではなく、使い勝手の良い組み方をすることこそが、生きたサイトを作る第一歩と考えています。
