Movable Typeのコンテンツタイプを使ってみる

2018.09.17

Movable Type7から追加されたコンテンツタイプの機能を使ってみます。

実装方法

コンテンツタイプはMovable Typeでのコンテンツ登録方法の1つです。
記事やウェブページと比べて、入力項目を自由に設計したいときなどに適しています。

今回は例として、アニメに関する以下の項目を登録できるコンテンツタイプを作成してみます。

  • 作品名
  • 公式サイトURL
  • 放送期間

放送期間はカテゴリで登録するようにしたいので、コンテンツタイプを設定する前に、放送期間で使用するカテゴリを用意しておきます。
左メニューのカテゴリセット > 新規を選択します。

カテゴリ名を「クール」として、以下のように設定しました。

次に実際にコンテンツタイプを設定します。
左メニューのコンテンツタイプ > 新規 を選択します。

右の「利用可能なフィールド」から利用するフィールドを選んで、中央の「コンテンツフィールド」にドラッグアンドドロップします。
今回作品名はデータ識別ラベルで設定するので、URL(公式サイトURL)とカテゴリ(放送期間)を使用します。

カテゴリ登録の際、「カテゴリセット」に最初に設定した「クール」を指定します。

コンテンツタイプ名は「アニメ」、URLは「公式サイト」、カテゴリは「期間」という名前で設定しました。
設定が一通りできたら、下部の保存をクリックして完了です。

実際に登録をしてみます。
左メニューのコンテンツデータに作成したコンテンツタイプ名が追加されているので、選択します。
その後、上部の作成リンクをクリックします。

登録画面は以下のようになります。

データをいくつか登録して、実際に登録した内容を出力してみます。
テンプレート内で以下のように記述します。

<mt:Contents content_type="アニメ">
  <mt:ContentsHeader><ul></mt:ContentsHeader>
  <li>
    <mt:ContentField content_field="公式サイト">
      <a href="<mt:ContentFieldValue>"><mt:ContentLabel></a>
    <mt:Else>
      <mt:ContentLabel>
    </mt:ContentField>

    <mt:ContentField content_field="期間">
      <$mt:CategoryLabel$>,
    </mt:ContentField>
  </li>
  <mt:ContentsFooter></ul></mt:ContentsFooter>
</mt:Contents>

MTContentsでコンテンツデータのループ、MTContentFieldとMTContentFieldValueで各フィールド値を表示します。

再構築すると、以下のように出力されました。
(見やすいように改行位置など調整しています。)

<ul>
  <li><a href="https://ao-buta.com/">青春ブタ野郎はバニーガール先輩の夢を見ない</a>2018,秋アニメ,</li>
  <li><a href="https://releasethespyce.jp/">RELEASE THE SPYCE</a>2018,秋アニメ,</li>
  <li><a href="https://sao-alicization.net/">ソードアート・オンライン アリシゼーション</a>2018,秋アニメ,</li>
  <li><a href="http://iroduku.jp/">色づく世界の明日から</a>2018,秋アニメ,</li>
  <li><a href="http://toaru-project.com/index_3/">とある魔術の禁書目録III</a>2018,秋アニメ,</li>
  <li><a href="http://animayell.com/">アニマエール！</a>2018,秋アニメ,</li>
  <li><a href="https://gridman.net/">SSSS.GRIDMAN</a>2018,秋アニメ,</li>
  <li><a href="http://www.ten-sura.com/">転生したらスライムだった件</a>2018,秋アニメ,</li>
  <li><a href="http://yagakimi.com/">やがて君になる</a>2018,秋アニメ,</li>
  <li><a href="http://www.goblinslayer.jp/">ゴブリンスレイヤー</a>2018,秋アニメ,</li>
  <li><a href="http://akanesasushojo.com/">あかねさす少女</a>2018,秋アニメ,</li>
  <li><a href="http://juliet-anime.com/">寄宿学校のジュリエット</a>2018,秋アニメ,</li>
</ul>

　

ページの作成

特に設定していない場合はページの生成は行われないので、個別ページなどを使用したい場合はテンプレートの追加が必要です。
左メニューのデザイン > テンプレートでテンプレートの管理ページを開き、上部でテンプレートの種類を選択してから新規作成をクリックします。

一覧ページの場合は「コンテンツタイプリストアーカイブ」、個別ページの場合は「コンテンツタイプアーカイブ」を選択してください。
今回は「anime/年(カテゴリ)/ベースネーム.html」の形で個別ページを作成してみます。

コンテンツタイプにアニメを選択して、テンプレートの内容を記述します。

テンプレートの内容は以下のように記述しました。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アニメ個別ページ</title>
</head>
<body>
<h1><mt:ContentLabel></h1>
<mt:ContentField content_field="公式サイト">
  <p>公式サイト:<a href="<mt:ContentFieldValue>"><mt:ContentFieldValue></a></p>
</mt:ContentField>
<mt:ContentField content_field="期間">
  <$mt:CategoryLabel$>,
</mt:ContentField>
</body>
</html>

入力が完了したら一旦保存して、アーカイブマッピングを作成します。
新しいアーカイブマッピングを作成をクリックして、パスはカスタムにして「anime/%-c/%-f」とします。

保存・再構築してみると想定したディレクトリ配下に個別ページを生成することができました。
　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930