CMSのデータをテンプレートタグで出力する方法をご紹介

こんにちは！　シックス・アパート株式会社製品企画シニアマネージャーの早瀬です。

「はじめての Movable Type」も第4回となりました。

今回はまず、前回のMovable Type を使ったサイト構築の基本と設計パターンで説明した、Movable Type でのサイト構築の基本となる流れをおさらいから始めたいと思います。

ページを構成するコンテンツごとに
必要な入力フォーム（コンテンツタイプ）を用意
↓
その入力フォームを使ってコンテンツ（コンテンツデータ）を投入
↓
入力したコンテンツデータをテンプレートで
MTタグを使って合成して出力

前回までの記事を読まれた方は、ここまでなんとなく理解いただけているでしょうか？

今回の記事では、上に書いた「コンテンツデータをテンプレートでMTタグを使って合成して出力」の部分を、具体的に解説していきたいと思います。

MTタグとは？

それでは早速、前回のテンプレートの説明などでもたびたび登場している「MTタグ」について詳しく説明しましょう。

MTタグは、Movable Type のテンプレート内で特定のデータや機能を読み込むための独自の言語です。HTMLタグに近いマークアップ記法なので、通常のウェブ制作ができる方であれば比較的容易に習得することができるのが特長です。

ウェブページのtitle要素に、Movable Type の管理画面で設定したサイト名を適用するというシンプルな利用例でご説明します。

サイト名設定画面

通常、サイト名をウェブサイトのHTMLのtitle要素として表示したい場合、

<title>ABC株式会社 ウェブサイト</title>

と記述します。

これを、サイト名を表示するためのMTタグ<$mt:SiteName$>を使って、下のサンプルのように書き換えます。

<title><$mt:SiteName$></title>

こうすると、自動的にサイトの「名前」に入力した「ABC株式会社ウェブサイト」が、<$mt:SiteName$>のところに出力されます。

同じような形で、サイト名を表示したいところのHTMLのソースコードに<$mt:SiteName$>を入れておくと、サイト名が変わったときに、サイトの「名前」の設定を変えるだけで一気に該当箇所を変更できます。

このようにHTMLを扱う感覚で、いろいろなデータを多様な形で出力することができるのがMTタグの特長です。

また、MTタグは大きく分けて、条件によって処理を分けることができる「ブロックタグ」と、タグのある箇所にデータを当てはめるための「ファンクションタグ」の2種類があります。

ブロックタグ

ブロックタグは開始タグと終了タグを持ち、ひとまとまりのテンプレートを囲みます。たとえば、ニュース記事のコンテンツデータの一覧をリスト形式で出力したい場合は、<mt:Contents> 〜 </mt:Contents>の中で、タイトルなどのデータを出力する記述を行うという形で使用します。

content_type="ニュース" は「ニュース」というコンテンツタイプを指定、lastn=”5” は「最新の5件を表示」と指定しており、これを「モディファイア」と呼びます。モディファイアは、MTタグと合わせて記述することで、MTタグの出力結果をさまざまな形で加工・修正する仕組みのことを言います。

<ul>
<mt:Contents content_type="ニュース" lastn=”5”>
<li><$mt:ContentLabel$></li>
</mt:Contents>
</ul>

タグごとに用意されているので、それぞれのドキュメントをご覧ください。

例：MTContents タグ

MTContents - テンプレートタグリファレンス | CMSプラットフォーム Movable Type ドキュメントサイト

ブロックタグには大きく分けて2種類あり、上に書いた <mt:Contents> のようにリストを表示するタグと、<mt:If> のように条件文を作成するタグがあります。

例：MTIf タグ

MTIf - テンプレートタグリファレンス | CMSプラットフォーム Movable Type ドキュメントサイト

ファンクションタグ

ファンクションタグは、実際にCMSが出力するコンテンツの内容を設定します。MTタグが使われるテンプレートの種類や場所によって、適切な内容に置き換えられます。たとえば、<$mt:SiteName$>だとサイトの名前に、<$mt:ContentLabel$>だとコンテンツデータの識別ラベルの値になります。
テンプレートの種類とファンクションタグの組み合わせによっては、ファンクションタグの内容が特定できないことがあります。特定できない、あるいはテンプレート内で、そのテンプレートの対象とは異なる内容を出力したい場合には、ブロックタグを使って特定できるように設定します。

コンテンツタイプで作成したニュースデータの出力方法

データの出力には、テンプレートを作成する必要があります。ここでは、コンテンツタイプで作成したニュースの情報を出力する方法を紹介します。

ニュースには、次の5つのコンテンツフィールドを用意しました。※ 各要素名の後の括弧内は、対応するコンテンツフィールドの種類です。

タイトル（テキスト）
本文（テキスト（複数行））
カテゴリ（カテゴリ）
ogimage（画像アセット）

以下は用意したコンテンツタイプの編集画面です。

コンテンツタイプ編集画面

用意したコンテンツタイプにニュースのデータを入力します。入力画面のイメージは以下を参考してください。

ニュースデータの入力画面入力します

入力したデータを埋め込んだページを生成するために、テンプレートを作る必要がありますので、ここでは最初にニュースの個別ページのテンプレートを作成してみます。

まず、ページのデザインは、通常のウェブサイトのデザインと同じように、HTML＋CSS等で作成することが前提です。ここに、ニュース記事のタイトルや本文やカテゴリなど、Movable Type で作成したデータを出力するMTタグを挿し込んでいくイメージです。

ニュースの個別ページは、「コンテンツタイプアーカイブ」という種類のテンプレートを使い、このテンプレートで出力するコンテンツタイプをあらかじめ選択して作成します。そのため、ブロックタグの説明で書いたように「テンプレート内で <mt:Contents content_type=“ニュース”> 〜 </mt:Contents>のようなタグで囲まなくても、各コンテンツフィールドの値を出力することができます。

個別ページのニュース記事部分には次の情報が出るようにします。

公開日（年月日）
記事のカテゴリ
タイトル
本文

まずこれをHTMLで書いてみましょう。

<div>
  <p><time>年月日</time></p>
  <p>記事のカテゴリ</p>
</div>
<div>
  <h4>タイトル</h4>
  <p>
      本文
  </p>
</div>

これをMTタグに入れ替えていきましょう。

<div>
  <p><time><$mt:ContentDate format="%Y.%m.%d"$></time></p>
    <mt:If tag="CategoryCount" content_field="カテゴリ">
  <p><$mt:CategoryLabel encode_html="1"$></p>
    </mt:If>  
</div>
<div>
  <h4><mt:ContentField content_field="タイトル"><$mt:ContentFieldValue$></mt:ContentField></h4>
  <p>
      <mt:ContentField content_field="本文"><$mt:ContentFieldValue$></mt:ContentField>
  </p>
</div>

このようになりました。このソースを含むテンプレートでページを生成すると、以下のように公開日、カテゴリ、タイトル、本文が含まれたページが作成されます。

出力されたページイメージ

それでは、ここで使用しているMTタグを一つずつ説明していきます。

<$mt:ContentDate format="%Y.%m.%d"$>

コンテンツデータの公開日を表示します。formatというモディファイアで日時の表示方法を変更できます。今回は、%Y（年を4桁の数字で表示）、%m（月を2桁の数字で表示）、%d（日付を2桁の数字で表示）を使用しました。今回の場合、「2023.04.06」のような形で表示されます。
タグリファレンス：MTContentDate
<mt:If tag="CategoryCount" content_field="カテゴリ">〜</mt:If>

条件によって表示を変更します。今回は「該当のニュースにカテゴリが1つ以上あれば表示」という使い方をしています。
タグリファレンス：MTIf
<$mt:CategoryLabel encode_html="1"$>

該当の記事に設定されているカテゴリ名を表示します。
タグリファレンス：MTCategoryLabel
<mt:ContentField content_field="タイトル"><$mt:ContentFieldValue$></mt:ContentField>

コンテンツデータの各フィールドの値を表示するためのブロックタグで囲んでいます。ここでは「タイトル」という名称のコンテンツフィールドに入力されている値を表示するファンクションタグを入れています。
タグリファレンス：MTContentField タグリファレンス：MTContentFieldValue
<mt:ContentField content_field="本文"><$mt:ContentFieldValue$></mt:ContentField>

本文という名称のコンテンツフィールドの値を表示します。MTタグの使い方としては、上の「タイトル」と同じです。

このように、Movable Type のテンプレート編集画面でHTML内にMTタグを挿入することで、CMS内のデータを任意の形式で出力することができます。ニュース形式のコンテンツの場合、投稿されているニュースの数だけ個別ページが生成されます。

サイトのトップページに最新のニュースを表示する方法

次に、よくある使い方の例として、このニュースの最新の3件をサイトのトップページに一覧で表示するソースコードも紹介します。
ここでは、以下ページのようにトップページで「最新情報」という形でニュースの最新3記事の一部を表示する方法を例に説明していきます。

最新ニュース表示画面

まず、この部分のHTMLは次のように記述しています。

<h3>最新情報</h3>
  <ul>
    <li>
      <a href="記事の個別ページのURL">
        <article>
          <dl>
            <dt>
              <time>公開日（年月日）</time>
            </dt>
            <dd>
              <h3>タイトル</h3>
              <p>概要</p>
            </dd>
          </dl>
      </article>
      </a>
  </li>
  </ul>
  <p><a href="ニュース一覧ページのURL">一覧を見る</a></p>

このHTMLに、個別ページを作ったときと同じようにMTタグを入れていきます。

<h3>最新情報</h3>
  <ul>
    <mt:Contents content_type="ニュース" limit="3">
      <li>
        <a href="<$mt:ContentPermalink$>">
          <article>
            <dl>
              <dt>
                <time><$mt:ContentDate format="%Y.%m.%d"$></time>
              </dt>
              <dd>
                <h3><mt:ContentField content_field="タイトル"><$mt:ContentFieldValue$></mt:ContentField></h3>
                <p><mt:ContentField content_field="本文"><$mt:ContentFieldValue convert_breaks="1" words="100"$></mt:ContentField></p>
              </dd>
            </dl>            
          </article>
        </a>
      </li>
    </mt:Contents>
  </ul>
  <p><a href="<$mt:SiteRelativeURL$>news.html">一覧を見る</a></p>

こちらもここで使ったMTタグについて一つずつ説明していきます。

<mt:Contents content_type="ニュース" limit="3">〜</mt:Contents>

コンテンツデータを一覧で出力する出力するブロックタグです。リストタグ<li>を囲むかたちで開始タグと出力タグを記述することによって、指定したデータの数だけリストデータを表示できます。
モディファイアのcontent_type="ニュース"でニュースというコンテンツタイプを指定し、limit="3"で3件を表示するように指定しています。
タグリファレンス：MTContents
<$mt:ContentPermalink$>

該当のコンテンツデータが公開されている個別ページのURLを出力します。
タグリファレンス：MTContentPermalink
<$mt:ContentDate format="%Y.%m.%d"$>

コンテンツデータの公開日を表示しています。表示方法は、個別ページのMTタグの説明と同じです。
<mt:ContentField content_field="タイトル"><$mt:ContentFieldValue$></mt:ContentField>

コンテンツデータ内の「タイトル」と言う名前のフィールドを指定しています。こちらも表示方法は、個別ページのMTタグの説明と同じです。
<mt:ContentField content_field="本文"><$mt:ContentFieldValue convert_breaks="1" words="100"$></mt:ContentField>

ここは「本文」のコンテンツフィールドを指定して、そこに入力されたテキストデータを出力するのですが、モディファイアのconvert_breaks="1"で「文末の改行タグを削除」し、words="100"で「先頭から100文字のみ取り出す」という処理をしています。これで、記事の冒頭100文字だけを表示することができます。

これで、トップページに最新のニュースのタイトル、公開日時、概要（記事の冒頭100字）を表示できました。

このように Movable Type では、テンプレートにMTタグを入れていくことによって、比較的簡単にCMSに保存したデータをHTMLに出力してページの作成が行なえます。

コンテンツタイプを使った設計と、テンプレート出力の基本に関しては初心者向けのコンテンツを用意しています。これで学習していただくと一通り理解することができますので、ぜひ一度ご覧いただければと思います。

トフでもできるコンテンツタイプ | MovableType.jp - CMSプラットフォーム Movable Type ドキュメントサイト

また、MTタグやモディファイヤはたくさんあり、すべてを覚えるのはなかなか大変です。そのためにタグリファレンスをはじめ、各種リファレンスを公開しています。

リファレンス | CMSプラットフォーム Movable Type ドキュメントサイト

設計次第で、複雑なウェブサイトでもほとんどのデータをCMSで管理して出力することができます。ぜひコンテンツタイプとMTタグを活用して、運用しやすいウェブサイトを作成してみてください！

この記事を書いた人

早瀬将一

シックス・アパート株式会社プロダクトシニアマネージャー。CMSプラットフォーム「Movable Type」シリーズの製品企画を担当。

以前は同社でテクニカルサポートを担当、さらに合同会社アライアンス・ポートでWebディレクター職を経て現職についたこともあり、ユーザー視点にたった製品開発を心がけています。

また、個人ではインタラクティブ作品の制作、ドローンなどの動画撮影も得意とし、地元観光課の公式動画を制作するなど、さまざまな活動を行っています。