チャレンジ! Movable TypeをCMSとして使ってみよう!

第2回MTタグの基本的な書き方・各テンプレートの説明

連載第2回目の今回は、各テンプレートの説明とMTタグの基本的な書き方をおさらいしたうえで、Movable Type4.1以降で本格的に使えるようになった変数を使う練習をしてみましょう。テンプレートやMTタグ関連の用語が3.xから変わったところがあるので、そのあたりもフォローしていきます。

テンプレートの種類をおさらいしよう

ほげ山くん:4.xって、3.xのときと比べて、テンプレートの数とか名前がいろいろ変わってますよね。そのあたりでまず戸惑ったので、説明してもらえないでしょうか?

くれま先輩:はいはい。では、さらっと説明するね!2008年6月25日現在入手できる4.2RC2のテンプレート管理画面だと、1ページでほとんどのテンプレートを見渡すことができるので、これを見ていくことにしようか。4.1ではテンプレートの種類ごとに一覧ページが分かれているけれど、内容は同じだよ。

図1 Movable Type4.2RC2のテンプレート管理画面。ウィジェット以外のテンプレートをすべてここで見ることができる。
図1 Movable Type4.2RC2のテンプレート管理画面。ウィジェット以外のテンプレートをすべてここで見ることができる。
図2 Movable Type4.1のテンプレート管理画面。テンプレートの種類ごとにページが分かれているので、右側のメニューを使って移動する。
図2 Movable Type4.1のテンプレート管理画面。テンプレートの種類ごとにページが分かれているので、右側のメニューを使って移動する。
図3 Movable Type3.xのテンプレート管理画面。テンプレートの種類ごとにページが分かれていて、上部のタブで移動する仕組みだった。
図3 Movable Type3.xのテンプレート管理画面。テンプレートの種類ごとにページが分かれていて、上部のタブで移動する仕組みだった。

くれま先輩:それでは、それぞれのテンプレートの種類を見ていくね。

インデックステンプレート
図4 インデックステンプレート
図4 インデックステンプレート
出力するHTML(などの)ファイルが1つだけの場合に使用するテンプレート。デフォルトでは、メインページ(サイトのトップページ)やアーカイブインデックス(アーカイブ一覧ページ⁠⁠、そしてCSS・JavaScript・Atom(フィード)などのファイルが、このインデックステンプレートで作成されている。テンプレートが出力するファイル名を直接指定する事ができるのも特徴。
アーカイブテンプレート
図5 アーカイブテンプレート
図5 アーカイブテンプレート

「ブログ記事」「ウェブページ」テンプレートは、データベース内にある複数の記事をそれぞれ個別のHTMLファイル(など)として出力するもの。3.xのときには、⁠エントリー・アーカイブ」が、⁠ブログ記事」と同じ役割だった。⁠ウェブページ」は4.0から加わったもので、⁠ブログ記事リスト」のような一覧ページを出力しない独立したページを作成するのに使用する。

「ブログ記事リスト」テンプレートは、ブログ記事の一覧をカテゴリ・時系列・投稿者などのいろいろな切り口で作成するもの。3.xのときには、⁠カテゴリー・アーカイブ」「日付アーカイブ」というものが同じ役割だった。

テンプレートモジュール
図6 テンプレートモジュール
図6 テンプレートモジュール
テンプレート内の一部分だけを切り出して部品とし、複数のテンプレートから読み込むようにできるのが「モジュールテンプレート⁠⁠。サイトのいろいろなページで繰り返し使う部分はモジュールとして切り出しておくと、変更が1ヵ所で済むなどのメリットが生まれ、サイトの運用が効率的になる。
システムテンプレート
図7 システムテンプレート
図7 システムテンプレート
検索結果出力やコメント投稿のプレビューなど、ユーザの動作に合わせてシステムが結果を返す際に使用するテンプレートが、ここに分類されている。4.2では検索結果画面をページ分割できる機能が加わったので、ぜひ活用したいところ。
ウィジェット
図8 ウィジェットセットを編集している様子
図8 ウィジェットセットを編集している様子
「ウィジェット」「モジュールテンプレート」と似ていて、テンプレート内の一部分だけを切り出して部品とし、複数のテンプレートから読み込むようにできるのだが、⁠ウィジェットセット」を作成して管理画面からWYSIWYGで表示非表示を切り替えることができるのが特徴。コーポレートサイトの運用においては、一時的なキャンペーンや季節ごとのバナーなど、頻繁に表示非表示を切り替えたい部品を「ウィジェット」にしておくと便利だろう(4.2RC2の場合は、上部メニューのデザイン→ウィジェットからアクセス。4.1の場合は、右側のクイックフィルタからアクセス⁠⁠。

ほげ山くん:なるほど、基本的には3.xのときのテンプレートと似ていますよね。感じは大体掴めてきました!アーカイブテンプレートのところって、バージョンごとにいろいろ変化しているんですね。3.xでは、⁠カテゴリー・アーカイブ」⁠日付アーカイブ」でしたし、4.1のときには単なる「ブログ記事リスト」だけ、そして4.2RC2では「カテゴリ別ブログ記事リスト」⁠月別ブログ記事リスト」になってるんですね。

くれま先輩:そうそう。デフォルトのアーカイブテンプレートは、少しずつ変更されている感じだね。でも4.0以降では、⁠ブログ記事リスト」編集画面の「アーカイブマッピング」の設定のところで、様々な切り口のアーカイブを作成する事ができるようになっているので、それを利用して自分が必要なアーカイブページを作ると良いと思うよ!

図9 ⁠ブログ記事リスト」編集画面。⁠アーカイブマッピング」で、日別アーカイブを始めとして、さまざまな切り口のアーカイブを出力する設定が可能。
図9 「ブログ記事リスト」編集画面。「アーカイブマッピング」で、日別アーカイブを始めとして、さまざまな切り口のアーカイブを出力する設定が可能。

MTタグの基本

ほげ山くん:MTタグの用語も、なんだか変わりましたよねぇ。

くれま先輩:実際の働きが変わったわけではなくて、名前が変わったんだけなんだけどね。ほげ山くんも知っているとおり、MTタグには2種類あるよね。

ブロックタグ
<MTxxxxxxx>という開始タグと</MTxxxxxxx>という終了タグがセットになっているもの。このタグの中に他のタグを入れた組み合わせで、さまざまな出力結果を得ることができる。なお、ブロックタグに囲まれた一連のMTタグの塊のことを「サブテンプレート」という。3.xでは、⁠コンテナタグ」という名称だった。
ファンクションタグ
開始タグ終了タグの組み合わせではない、単体のタグ。movabletype.jpのドキュメントや多くの書籍では<$MTxxxxxxx$>というように、前後に「$」を入れた表現をされることが多い(この「$」は、なくてもきちんと動作する⁠⁠。どんなテンプレートのどんなブロックタグの中で使われるかによって、出力結果が異なることがあるので注意しよう。3.xでは、⁠変数タグ」という名称だった。

ほげ山くん:「ブロックタグ」⁠ファンクションタグ」という名前になったんですね!これはもう覚えましたよ。あ、あと、前回に習ったと思うんですけど、⁠<mt:xxxxxxx>~</mt:xxxxxxx>」という区切り文字を使った書き方ができるんですよね。僕、今回の勉強では、この書き方を使ってみます。

くれま先輩:了解。じゃあ次は、具体的なMTタグの使い方を見ていこうかな。まずは、3.xのときと同じ書き方でできるものを、ほげ山くんに書いてもらおっと。

ほげ山くん:(どきどき)

くれま先輩:簡単なのだから大丈夫だよ!インデックステンプレートの「メインページ」に記述するという前提にしようね。ブログ記事の一覧を出力するサブテンプレートは、どんな感じ?ブログ記事へのリンクも出力させてね。

ほげ山くん:あ、それだったら、できます!

ブログ記事の一覧を出力する

<mt:Entries>
	<mt:EntriesHeader>
		<ul>
	</mt:EntriesHeader>
		<li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
	<mt:EntriesFooter>
		</ul>
	</mt:EntriesFooter>
</mt:Entries>

ほげ山くん:これでどうでしょう?

くれま先輩:はい、よくできました!ちょっと説明してみると、<mt:Entries>でブログ記事の一覧を取得する。<mt:EntriesHeader>に囲まれた部分は、ブログ記事をループするときの一番最初に一回だけ内容を出力する。<mt:EntryLink />で個別のブログ記事のURLを出力する。<mt:EntryTitle />でブログ記事のタイトルを出力。<mt:EntriesFooter>に囲まれた部分は、ブログ記事をループするときの一番最後に一回だけ内容を出力する。という感じだね。

ほげ山くん:これを再構築すると、こんなHTMLソースが出力されるんですよね。

再構築して出力されるソース
<ul>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx010.html">タイトル010</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx009.html">タイトル009</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx008.html">タイトル008</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx007.html">タイトル007</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx006.html">タイトル006</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx005.html">タイトル005</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx004.html">タイトル004</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx003.html">タイトル003</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx002.html">タイトル002</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx001.html">タイトル001</a></li>
</ul>

※ここで出力されるブログ記事の件数は、⁠設定→ブログの設定→ブログ記事→ブログ記事の表示数]での設定で決まる。デフォルトは10件。

MTタグの働きをコントロールする

くれま先輩:では、これを少し変えてみよう!「りんご」というカテゴリーの最新5件をリストアップするように、変更してみてくれる?

ほげ山くん:はい。その場合は、MTタグにアトリビュートを設定すればいいんですよね。

くれま先輩:ちょっと待って!3.xでは、MTタグの出力結果をコントロールするのに「アトリビュート」を使ったんだけれど、4.0以降では「モディファイア」という名前に変わってるから注意してね!

ほげ山くん:ここも、名前が変わってたんですね。了解しました!では、⁠モディファイア」をこんな風に設定すればいいですよね。

ブログ記事の一覧を出力する(「りんご」というカテゴリーの最新5件)

<mt:Entries category="りんご" lastn="5">
	<mt:EntriesHeader>
		<ul>
	</mt:EntriesHeader>
		<li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
	<mt:EntriesFooter>
		</ul>
	</mt:EntriesFooter>
</mt:Entries>
図10 モディファイア。HTMLのタグにおける「属性」と似た書き方で、MTタグの動作をコントロールすることができる。
図10 モディファイア。HTMLのタグにおける「属性」と似た書き方で、MTタグの動作をコントロールすることができる。

くれま先輩:そうそう。⁠モディファイア」に名前が変わったけど、使い方は一緒だからね。

再構築して出力されるソース
<ul>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx005.html">りんごのお話005</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx004.html">りんごのお話004</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx003.html">りんごのお話003</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx002.html">りんごのお話002</a></li>
	<li><a href="http://xxxxxx.xx/xxxxx/xxxxx001.html">りんごのお話001</a></li>
</ul>

ほげ山くん:ここまでは、僕でもちゃんと分かりました。で、4.1以降で加わったMTタグについてもちょっと知りたいんですが…。

変数と条件分岐

くれま先輩:4.1以降で加わったMTタグといえば、変数や演算子を扱うものだよね。今日はその中で、MTタグの出力結果を変数として扱えるMTタグを紹介するね。

MTタグの出力結果を変数の値として設定する

<mt:SetVarBlock name="count"><mt:BlogCategoryCount /></mt:SetVarBlock>
<p>このブログのカテゴリの数は、<mt:GetVar name="count" />個です。</p>

くれま先輩:たとえばこのように書くと、何が行われているかわかるかな?

ほげ山くん:うーん。<mt:BlogCategoryCount />は、ブログの総カテゴリ数ですよね。それを<mt:SetVarBlock>の中に入れている…。あ、あと「name="count"」というのが2ヵ所に書かれてるのが関係ありますよね!

くれま先輩:そうそう。<mt:SetVarBlock>~</mt:SetVarBlock>の部分で、⁠count」という名前の変数に、<mt:BlogCategoryCount />(ブログの総カテゴリ数)を値として設定しているの。それを次の行で<mt:GetVar>を使って呼び出しているんだよ。

ほげ山くん:MovableType.jpのテンプレートタグリファレンスを見ると、<mt:GetVar>のところに「MTSetVar, MTSetVarBlock, MTSetVarTemplate タグで定義した変数から値を呼び出します。」って書いてありますね。なるほど。では、これを再構築すると、

このブログのカテゴリの数は、28個です。

とかになるわけですね。

くれま先輩:ま、これだけだと、直接<mt:EntriesCount />を書けばいいって訳で、あんまり意味はないので、次に条件分岐について説明するね。例えば、カテゴリの数が10以下の場合と11以上の場合で、違う動作をするようにしてみよう。

ブログのカテゴリの数が10以下の場合と11以上の場合で条件分岐する

<mt:SetVarBlock name="count"><mt:BlogCategoryCount /></mt:SetVarBlock>
<mt:If name="count" le="10">
	<p>このブログのカテゴリの数は10以下です。</p>
<mt:Else>
	<p>このブログのカテゴリの数は11以上です。</p>
</mt:If>

ほげ山くん:今度は<mt:If>を使うんですね。えっとテンプレートタグリファレンスを見ると、⁠MTIfブロックタグは条件を満たした場合にのみ実行します。」って書いてありますね。leというモディファイアは、⁠変数が foo 以下の場合にのみ実行します。」って書いてあるから…。つまり、変数「count」が10以下の場合のみ実行する、ってことですよね。

くれま先輩:よくできました。<mt:Else>以下の部分は、その条件に合わない場合に実行されるのよ。

ほげ山くん:なるほどー!これを活用すると、条件に応じて出力結果をいろいろ操ることができますよね!練習してみます!

タグリファレンスを活用しよう

くれま先輩:今日は、ごくごく簡単なMTタグしか解説しなかったけれど、もっと興味のある人は書籍やWebサイトでMTタグの働きについて調べてみるといいよ。ここでは、本家シックス・アパートのサイトのテンプレートタグリファレンスを紹介しておくね。

ほげ山くん:僕も新しいMTタグが出てきたら、常にここをチェックするようにしています!

参考URL
テンプレートタグリファレンス | MovableType.jp
http://www.movabletype.jp/documentation/appendices/tags/

このテンプレートタグリファレンスをもっと便利に使うこんな方法もあるよ。Open Search Discoveryをサポートしているブラウザ(Firefox, Internet Explorer 7など)では、ブラウザの検索窓に、このテンプレートタグリファレンスを追加することができるの。 追加する方法は、ブラウザでテンプレートタグリファレンスのページを表示している状態で、検索エンジンを選択するプルダウンメニューを表示させると、下の方に「"MTタグ検索"を追加」というような文字列が出てくるので、それを選択すればOK。こうしておけば、思い立ったときにすぐにブラウザからMTタグを検索できるので、とっても便利だよ!

図11 Firefoxにテンプレートタグリファレンスを追加している様子
図11 Firefoxにテンプレートタグリファレンスを追加している様子
参考URL
Movable Type 4 に対応したタグリファレンスを活用する | MovableType.jp
http://www.movabletype.jp/blog/tag_reference.html

次回予告

くれま先輩:では、次回からいよいよ、実際のサイトを一部分ずつ作っていってみよう!

おすすめ記事

記事・ニュース一覧