スタッフブログ Staff Blog

Movable TypeのプラグインでMTMLをシンプルにする

MTML (Movable Type Markup Language)にビュー以外のロジックを記述すると、冗長なテンプレートとなり可読性が落ちると感じます。例えばアーカイブページにおいて、以下のような仕様でカテゴリと属する記事の一覧を出力するとします。

  • カテゴリは親/子の2階層にて運用(孫カテゴリは作成しない)
  • 親 or 子カテゴリに記事が1件以上投稿されていれば該当カテゴリを出力する

Movable Type 標準の mt:CategoryCount タグにて現在のコンテキストの記事数は取得可能ですが、子カテゴリも含めた記事数の取得は標準機能では実現出来ません。そのため、MTML で子カテゴリの記事数を取得しようと思うと mt:SubCategories タグで子カテゴリをループして記事数を取得することになりますが、MTMLにそういったロジックを記述するとテンプレートの可読性が落ちてしまいます。

ブラッシュアップの余地はあるかもしれませんが、MTMLだけで実装すると以下のようなコードになりました。

<mt:SetVarTemplate name="entries_template">
    <mt:Entries>
        <mt:EntriesHeader><ul></mt:EntriesHeader>
            <li><mt:EntryTitle></li>
        <mt:EntriesFooter></ul></mt:EntriesFooter>
    </mt:Entries>
</mt:SetVarTemplate>

<mt:TopLevelCategories>
    <mt:SetVar name="has_entry" value="0">
    <mt:SetVar name="sub_category_count" value="0">
    <mt:HasSubCategories>
        <mt:SubCategories>
            <mt:If tag="CategoryCount">
                <mt:SetVar name="sub_category_count" value="1" op="+">
            </mt:If>
        </mt:SubCategories>
    </mt:HasSubCategories>
    <mt:If tag="CategoryCount">
        <mt:SetVar name="has_entry" value="1">
    <mt:ElseIf name="sub_category_count">
        <mt:SetVar name="has_entry" value="1">
    </mt:If>

    <mt:If name="has_entry">
        <h2><mt:CategoryLabel></h2>
        <mt:Var name="entries_template">

        <mt:SubCategories>
            <mt:If tag="CategoryCount">
                <h3><mt:CategoryLabel></h3>
                <mt:Var name="entries_template">
            </mt:If>
        </mt:SubCategories>
    </mt:If>
</mt:TopLevelCategories>

親 or 子カテゴリに記事が1件以上投稿されているか?を判定するために14行程記述しています。そこで、mt:SubCategoryCount タグをプラグインで実装してサブカテゴリの記事数を取得出来るようにします。

<mt:SetVarBlock name="has_entry"><mt:If tag="CategoryCount">1<mt:ElseIf tag="SubCategoryCount">1<mt:Else>0</mt:If></mt:SetVarBlock>

サブカテゴリの記事数がタグ一つで取得出来るようになると、以前は14行記述していたところが1行で済むため MTML ではビューの記述に集中出来ます。最初のコードと置き換えると以下のように MTML からロジックの記述を減らす事が出来ました。

(今回のケース専用にするのであれば、親 & 子カテゴリの記事数を取得するタグとして実装すれば変数を利用しなくても済みます)

<mt:SetVarTemplate name="entries_template">
    <mt:Entries>
        <mt:EntriesHeader><ul></mt:EntriesHeader>
            <li><mt:EntryTitle></li>
        <mt:EntriesFooter></ul></mt:EntriesFooter>
    </mt:Entries>
</mt:SetVarTemplate>

<mt:TopLevelCategories>
    <mt:SetVarBlock name="has_entry"><mt:If tag="CategoryCount">1<mt:ElseIf tag="SubCategoryCount">1<mt:Else>0</mt:If></mt:SetVarBlock>

    <mt:If name="has_entry">
        <h2><mt:CategoryLabel></h2>
        <mt:Var name="entries_template">

        <mt:SubCategories>
            <mt:If tag="CategoryCount">
                <h3><mt:CategoryLabel></h3>
                <mt:Var name="entries_template">
            </mt:If>
        </mt:SubCategories>
    </mt:If>
</mt:TopLevelCategories>

実は、mt:SubCategoryCount タグはプラグイン作成者とテンプレート作成者(私)を分業した案件において必要になり、プラグイン作成者に開発を依頼したのが始まりでしたが、弊社安部の Movable Type のプラグイン開発時に変数の内容を確認する方法を利用することでプラグイン開発時のデバッグが JavaScript の console.log() 感覚で容易に行えます。

上記のデバッグ方法を活用して本記事の執筆時に自身でも mt:SubCategoryCount タグを実装しましたが開発が捗りました。 Movable Type のプラグイン開発時にデバッグ方法でお困りの方は一度お試しください。

次回は mt:Categories タグでは提供されていますが、mt:SubCategories タグでは提供されていない show_empty モディファイアをプラグインで実装してみたいと思います。

お問い合わせ Contact

制作のご依頼、ご相談などは下記のフォームからご連絡ください。