Movable Type を使ったサイト構築の基本と設計パターン

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

「はじめての Movable Type」も第3回となりました。前回は、Movable Type の人気プラグインについてお話しました。今回は Movable Type でサイト制作を行う際、サイト構築の基礎となる部分と、基本的な設計パターンについてお話したいと思います。

Movable Type のサイト構築に欠かせないコンテンツタイプとテンプレート

Movable Type でサイトを構築する際に欠かせないのが、コンテンツをさまざまな形で格納する「コンテンツタイプ」と、それをデザインなどの要素と組み合わせて任意の形式で出力するための骨組み「テンプレート」です。この2つは、Movable Type でのサイト構築の核となる最も大事な機能となります。

まずは、コンテンツタイプとテンプレートの機能についてそれぞれ詳しく理解していきましょう。

コンテンツタイプとは？

Movable Type では、作りたいコンテンツの内容や構造に合わせたフィールド（要素ごとの入力欄）を並べて、使いやすい入力画面を作成できます。

利用できるフィールド（コンテンツフィールド）は、テキストだけではなく、数値、URL、日付と時刻、ラジオボタンやチェックボックス、各種アセット（画像やPDFなどの各種ファイル）をはじめ、他のコンテンツタイプで作成されたコンテンツデータを参照することもできます。これにより、記事形式だけでなく製品情報やセミナー告知など多種多様なコンテンツに対応できるようになっています（詳細はマニュアルのコンテンツタイプで利用可能なフィールド参照）。

このコンテンツフィールドの集合体が「コンテンツタイプ」です。そして、作成したコンテンツタイプに入力されたデータのことを「コンテンツデータ」と呼びます。

例として、企業サイトの製品案内のページに掲載する製品情報のコンテンツタイプを作ってみます。必要な要素は次の5つです。
※ 各要素名の後の括弧内は、対応するコンテンツフィールドの種類です。

• 製品名（テキスト）
• 製品ロゴ（画像）
• 製品のキャッチコピー（テキスト）
• 製品紹介文（テキスト）
• 製品の種類（カテゴリ）

まずはコンテンツタイプの新規作成画面を開いて、必要な項目をドラッグ＆ドロップで並べて設定していきます。

上の画像にあるように、右側に利用できるフィールドが並んでいます。ここから使いたいタイプのフィールドをドラッグ＆ドロップで並べて、それぞれ「製品名」などのフィールド名や、入力必須かどうかのフラグ、初期値などを設定していきます。

すべてのフィールドの設定が完了したら、「製品情報」と名付けてコンテンツタイプを保存します。次に、この「製品情報」のコンテンツデータ入力画面から、実際の製品情報を入力していきます。

製品情報に必要な5つの要素が適切に並んだ入力画面を作ることができるため、どこに何を書けば良いのか一目瞭然です。これにより直感的にわかりやすく、誰でもすぐに製品情報を入力、追加、更新していくことができます。

コンテンツタイプの特長として、ページごとでは無く、ひとかたまりの情報ごとにコンテンツを格納できる点があげられます。これにより1つのページ内にいくつかの製品情報が含まれている、または製品情報が入れ子構造になっているウェブサイトでも簡単に構築できます。さらに、コンテンツタイプ内に別のコンテンツデータを参照する入れ子構造も実現できるため、製品情報のコンテンツタイプの中に関連するサービスの情報を埋め込むといったことも可能です。

こうやって作ったコンテンツのひとかたまりを、テンプレートを使って当てはめてページとして出力していきます。

では続いて、テンプレートについて理解していきましょう。

テンプレートとは？

先に説明したコンテンツデータをはじめとするCMSのさまざまなデータを、Movable Type 独自のテンプレートタグ「MTタグ」を使って当てはめていき、デザインなどの要素と組み合わせてファイルとして出力するための骨組みがテンプレートです。ファイルとして出力するのであればどのようなものでも作成できるため、サイトを構成するHTMLやCSS、JavaScriptなどを管理する際に多く使われます。

テンプレートの編集には、HTML等の知識とMTタグの知識が必須となります。

Movable Type のテンプレートは、大きく次の5つに分類されます。

1. インデックステンプレート

   1つのテンプレートに対して1つのファイルを出力するときに使います。トップページや、全体で使用するCSSやRSS、JavaScriptなどを管理します。

2. アーカイブテンプレート

   Movable Type 6 以前からある「記事」と「ウェブページ」のデータを特定のルール（月別、カテゴリ別等）でまとめて出力するときに使います。

3. コンテンツタイプテンプレート

   コンテンツタイプで作成したデータの出力に使うテンプレートで、次の2種類があります。

   1. コンテンツタイプアーカイブテンプレート

      コンテンツタイプで作成したコンテンツデータに対して、それぞれファイルを生成します。コンテンツの個別ページに使います。

   2. コンテンツタイプリストアーカイブテンプレート

      コンテンツデータを分類して一覧を表示するファイルを生成します。コンテンツのカテゴリ別、月別の一覧ページなどに使います。

4. テンプレートモジュール

   複数のテンプレートで共通して使うテンプレートの断片をパーツとしてまとめておくことができます。たとえば、ヘッダーとフッターがサイト共通であれば、それぞれをモジュールにしておき、インデックステンプレートやコンテンツタイプテンプレート内で読み込むことによって、修正などの作業負担が軽減できます。

5. システムテンプレート

   検索結果ページなど、システムが出力する特定の画面のデザインを設定するテンプレートです。

これらのテンプレートを適宜使用して、ページを出力していくのが、Movable Type のサイト構築の基本です。

そして、テンプレートでコンテンツなどの各種データを当てはめていくために必要になるのが「MTタグ」です。
MTタグとは、Movable Type のテンプレート内で特定のデータや機能を読み込む独自のタグです。これらのタグは、テンプレート内でHTMLやCSSと一緒に使われ、ページにCMSで管理しているコンテンツを表示するために使用します。

たとえば、先ほど作った製品情報のコンテンツタイプで「製品名」というコンテンツフィールドに入力した内容を見出しとして表示したい場合、次のようにHTML内に記述して該当のコンテンツデータを表示させることができます。

<h1 class="entry__articletitle">
　<mt:ContentField content_field="製品名">
　　<mt:ContentFieldValue language="ja">
　</mt:ContentField>
</h1>

MTタグは他にも多数用意されており、さらにプラグインなどで拡張もできます。標準で用意されているMTタグについては、タグリファレンスをご参照ください。

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

大まかなイメージとしては、ページを構成するコンテンツごとに最適な入力フォーム（コンテンツタイプ）を用意し、そのフォームを使ってコンテンツを投入（コンテンツデータ）、それらをテンプレートでMTタグを使って合成してページを出力する、というのが基本的な流れとなります。

Movable Type を使った基本的なサイト設計パターン

コンテンツタイプとテンプレートの基礎と構築の流れはご理解いただけたでしょうか？

ここからは、コンテンツタイプとテンプレートを使ってシンプルな企業サイトの設計パターンを考えてみましょう。

たとえば、次のような構成のサイトを作ります。

• トップページ
• ニュース
• 製品情報
• セミナー情報
• 会社概要
• お問い合わせ

このサイト構成を実現できる設計例は次のようになります。

上の図にあるそれぞれのディレクトリについて説明していきます。

• トップページ

  →インデックステンプレート
  単ページなのでインデックステンプレートを使用します。ニュースやセミナーの最新情報などもMTタグで読み込んで表示できます。

• ニュース

  →コンテンツタイプ ＋ コンテンツタイプテンプレート
  時系列でコンテンツを追加していくページなので、ニュース記事のコンテンツタイプを用意して、データを登録します。
  そのコンテンツデータを使って、コンテンツタイプアーカイブテンプレートで個別ページを出力し、コンテンツタイプリストアーカイブテンプレートを使って、カテゴリー別、月別の一覧ページをそれぞれ生成します。

• 製品情報

  →コンテンツタイプ ＋ コンテンツタイプテンプレート
  ニュース同様、製品ごとにコンテンツを追加していくページなので、製品情報のコンテンツタイプを用意して、データを登録します。
  そのコンテンツデータを使って、コンテンツタイプアーカイブテンプレートで個別ページを出力し、コンテンツタイプリストアーカイブテンプレートを使って、カテゴリー別の一覧ページを生成します。

• セミナー情報

  →コンテンツタイプ ＋ コンテンツタイプテンプレート
  ニュース同様、製品ごとにコンテンツを追加していくページなので、製品情報のコンテンツタイプを用意して、データを登録します。
  そのコンテンツデータを使って、コンテンツタイプアーカイブテンプレートで個別ページを出力し、コンテンツタイプリストアーカイブテンプレートを使って、カテゴリー別の一覧ページを生成します。

• 会社概要

  →コンテンツタイプ ＋ コンテンツタイプテンプレート
  時系列や個別ページを積み重ねていくコンテンツではありませんが、トップページのようにインデックステンプレートで作ってしまうと、HTMLの知識が無い運用担当者による修正作業が困難です。コンテンツタイプを作ってデータを登録し、コンテンツタイプアーカイブテンプレートで出力する形にしておくと運用がラクになります。

• お問い合わせ

  →コンテンツタイプ ＋ コンテンツタイプテンプレート
  ここも会社概要と同じです。
  お問い合わせフォームを入れる場合は、フォーム機能のプラグインを導入するか、MovableType.net フォームを利用します。

このように、可能な限りコンテンツタイプで作成・管理できるようにするのがオススメです。ページの更新や新規追加を簡単に素早く行えるので、効率の良い運用ができます。

さらにコンテンツデータの入力では、前回の記事で紹介した「MTブロックエディタ」プラグインを使って、より直感的に操作できる入力画面を用意しておくことによって、誰でも簡単に、凝ったページの編集が可能になります。

初心者向けのコンテンツタイプ学習コンテンツも用意しています

以上、コンテンツタイプとテンプレートそれぞれの使い方と構築の流れ、設計のパターンをご紹介しました。

コンテンツタイプについてより深く知りたい人は、初心者向けの学習コンテンツ「トフでもできるコンテンツタイプ」をご覧ください。

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

これを見ながら実際に触ってみることで、コンテンツタイプの基本を一通り学ぶことができます。ぜひ一度ご覧いただき、Movable Type のコンテンツタイプ機能をフル活用してください！

この記事を書いた人

早瀬将一

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

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

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