Movable Typeで製品情報のテーブルを作る

Movable Typeで製品情報のテーブルを作る

Posted at November 11,2011 1:55 AM
Tag:[Customize, MovableType]

Movable Typeで、次のように製品別に各情報(ソフトウェア/FAQ/ダウンロード)の有無を、テーブル形式で表示する方法を紹介します。

ソフトウェアFAQダウンロード
製品A×
製品B×
製品C×

このエントリーは、MTQのフォーラムで質問された回答の情報展開です。

1.ブログの構造

まず「製品」ブログがあり、そこに投稿されているブログ記事のタイトルは次のようになっています。

  • 製品A
  • 製品B
  • 製品C

「製品」ブログと別に、「ソフトウェア」「FAQ」「ダウンロード」の各ブログがあり、そこに「製品」ブログと同じブログ記事タイトルのブログ記事を必要に応じて作成します。ここでは次のような状態になっていると仮定します。また各ブログ記事にはブログ名と同じカテゴリもひもづいています。

  • 「ソフトウェア」ブログ
    ブログ記事:製品A・製品B(カテゴリ:ソフトウェア)
  • 「FAQ」ブログ
    ブログ記事:製品B・製品C(カテゴリ:FAQ)
  • 「ダウンロード」ブログ
    ブログ記事:製品A・製品C(カテゴリ:ダウンロード)

上記の状態で、冒頭のような製品別に情報有無を示すテーブルを作成します。

ソフトウェアFAQダウンロード
製品A×
製品B×
製品C×

2.テンプレート

テーブルを作成するためのテンプレートは次のようになります。

<mt:SetHashVar name="list">
  <$mt:SetVar name="1" value="ソフトウェア"$>
  <$mt:SetVar name="2" value="カタログ"$>
  <$mt:SetVar name="3" value="FAQ"$>
</mt:SetHashVar>
 
<mt:SetVarTemplate name="foo">
  <$mt:SetVar name="pname_cat" value="0"$>
  <mt:TopLevelCategories category="$category">
    <$mt:CategoryLabel setvar="catname"$>
    <mt:If name="catname" eq="$pname">
      <$mt:SetVar name="pname_cat" value="1"$>
      <mt:If tag="CategoryCount">
<td>○</td>
      <mt:Else>
<td>×</td>
      </mt:If>
    </mt:If>
    <$mt:SubCatsRecurse$>
  </mt:TopLevelCategories>
  <mt:Unless name="pname_cat">
<td>×</td>
  </mt:Unless>
</mt:SetVarTemplate>
 
<table>
  <thead>
    <tr>
      <th></th>
<mt:Loop name="list">
  <th><$mt:GetVar name="__value__"$></th>
</mt:Loop>
    </tr>
  </thead>
  <tbody>
<mt:Entries>
  <$mt:EntryTitle setvar="pname"$>
    <tr><td><$mt:GetVar name="pname"$></td>
  <mt:Loop name="list">
    <$mt:GetVar name="__key__" setvar="blog_id"$>
    <$mt:GetVar name="__value__" setvar="category"$>
    <mt:Blogs include_blogs="$blog_id">
      <$mt:GetVar name="foo"$>
    </mt:Blogs>
  </mt:Loop>
    </tr>
</mt:Entries>
  </tbody>
</table>

3.テンプレートの解説

まず、最初のMTSetHashVarタグでブログIDとブログ名のハッシュを用意します。

<mt:SetHashVar name="list">
  <$mt:SetVar name="1" value="ソフトウェア"$>
  <$mt:SetVar name="2" value="カタログ"$>
  <$mt:SetVar name="3" value="FAQ"$>
</mt:SetHashVar>

サンプルテンプレートでは、MTSetHashVarタグの次にMTSetVarTemplateタグがありますが、この説明は後回しにして、最後のtable要素出力用のサブテンプレートについて説明します。

<table>
  <thead>
    <tr>
      <th></th>
<mt:Loop name="list">
  <th><$mt:GetVar name="__value__"$></th>
</mt:Loop>
    </tr>
  </thead>
  <tbody>
<mt:Entries>
  <$mt:EntryTitle setvar="pname"$>
    <tr><td><$mt:GetVar name="pname"$></td>
  <mt:Loop name="list">
    <$mt:GetVar name="__key__" setvar="blog_id"$>
    <$mt:GetVar name="__value__" setvar="category"$>
    <mt:Blogs include_blogs="$blog_id">
      <$mt:GetVar name="foo"$>
    </mt:Blogs>
  </mt:Loop>
    </tr>
</mt:Entries>
  </tbody>
</table>

MTLoopタグで、さきほどのハッシュを読み込んでthead要素とth要素を出力します。

<mt:Loop name="list">
  <th><$mt:GetVar name="__value__"$></th>
</mt:Loop>

tbody要素ではMTEntriesタグでブログ記事を順番に読み出します。テーブルの一番左にブログ記事タイトルを出力するため、一旦変数pnameにブログ記事タイトルを保持して、それを出力します。

<mt:Entries>
  <$mt:EntryTitle setvar="pname"$>
    <tr><td><$mt:GetVar name="pname"$></td>

次のMTLoopタグでは、ハッシュ変数listのキーと値をそれぞれ読み出して、変数blog_idと変数categoryに保持します。変数blog_idはMTBlogsタグのblog_idモディファイアに利用して各ブログの情報を読み出します。

  <mt:Loop name="list">
    <$mt:GetVar name="__key__" setvar="blog_id"$>
    <$mt:GetVar name="__value__" setvar="category"$>
    <mt:Blogs include_blogs="$blog_id">
      <$mt:GetVar name="foo"$>
    </mt:Blogs>
  </mt:Loop>

MTBlogsタグブロックで冒頭の表の○×部分の情報を出力しますが、ここでさきほどスキップしたMTSetVarTemplateタグの内容(変数foo)を利用します。

<mt:SetVarTemplate name="foo">
  <$mt:SetVar name="pname_cat" value="0"$>
  <mt:TopLevelCategories category="$category">
    <$mt:CategoryLabel setvar="catname"$>
    <mt:If name="catname" eq="$pname">
      <$mt:SetVar name="pname_cat" value="1"$>
      <mt:If tag="CategoryCount">
<td>○</td>
      <mt:Else>
<td>×</td>
      </mt:If>
    </mt:If>
    <$mt:SubCatsRecurse$>
  </mt:TopLevelCategories>
  <mt:Unless name="pname_cat">
<td>×</td>
  </mt:Unless>
</mt:SetVarTemplate>

MTSetVarTemplateタグではTopLevelCategoriesタグを使って各ブログのカテゴリを順次読み出します。

  <mt:TopLevelCategories category="$category">
    <$mt:CategoryLabel setvar="catname"$>

読み出したカテゴリがブログ名と等しいカテゴリ名であれば、そのカテゴリに属するブログ記事数をMTIfタグとMTCategoryCountを組み合わせて判定し、記事が投稿されていれば○を、投稿されていなければ×をtd要素と組み合わせて出力します。

    <mt:If name="catname" eq="$pname">
      <$mt:SetVar name="pname_cat" value="1"$>
      <mt:If tag="CategoryCount">
<td>○</td>
      <mt:Else>
<td>×</td>
      </mt:If>
    </mt:If>

また、ブログ名と等しいカテゴリが1つも存在しない場合を考慮して、次の部分で×を出力します。

  <mt:Unless name="pname_cat">
<td>×</td>
  </mt:Unless>

変数pname_catはカテゴリ繰り返し処理の前に「0」を設定して、カテゴリ名とブログ名が等しい場合に「1」を設定するようにしています。

  <$mt:SetVar name="pname_cat" value="0"$>
    …中略…
    <mt:If name="catname" eq="$pname">
      <$mt:SetVar name="pname_cat" value="1"$>

最終的な形は、これに「Movable TypeでMTPagesタグとMTEntriesタグを入れ子にして動作させる方法」を組み合わせています。

具体的には、table要素全体をMTPagesタグで括って、ウェブページに作成した製品情報からブログ記事を取り出し、さらに各ブログの情報を取り出しています。ブログ記事を取り出す際にMTPagesのコンテキストと競合しないよう、MTEntriesタグにinclude_blogsモディファイアを与えます。

そのサブテンプレートについては以下の記事のコメント欄の最後の部分をご覧ください。

MTQフォーラム - 製品関連情報をマトリックスで表示したい

前述の記事や本エントリーで紹介するテンプレートを組み合わせれば、ブログ・カテゴリ・ウェブページ・ブログ記事の情報を組み合わせた、さまざまなテーブルを作ることができると思います。色々試してみてください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)