Movable Typeの標準の状態では，ブログ記事に入力できるフィールドはタイトルと本文くらい（他にもありますが）しかありません。しかし例えば商品カタログのページを作りたいと思ったとき，価格や色，サイズなどの入力項目が欲しくなってきます。それを実現するのが「カスタムフィールド」機能です。
「カスタムフィールド」機能を使えば，ブログページやウェブページに独自の入力項目を追加することができるようになり，eコマース，商品カタログ等の定型ページ制作の入力がより簡単にできるようになります。
今回は，MTをCMSとして使うには書かせないカスタムフィールド機能を最もシンプルに使った，商品紹介ページの作成方法について解説していきます。
今回の連載を通して作成しているサイト全体でいうところの，「商品一覧」のディレクトリの部分をMT化していきます。
図1 今回の対象は商品一覧のディレクトリ
なお，カスタムフィールド機能はオープンソース版（MTOS）では利用できませんのでご注意ください。
HTMLテンプレートの用意とカスタムフィールドの作成
あらかじめ，MTカスタマイズ前のプレーンなHTMLテンプレートを用意しておきましょう。今回は以下の2つのHTMLテンプレートをMT化していきます。
- 商品一覧ページ（product/index.html）
- 商品紹介個別ページ（product/individual.html）
図2 商品一覧ページ，商品紹介の個別ページを，MTを使って更新できるようにカスタムフィールドを使ってカスタマイズしていきます
それでは「商品一覧」のブログを新規で作成しましょう。
ブログを新規作成で，テーマは「クラシックブログ」「ブログ名（ここでは「商品一覧」としています）」，「ブログURL（…/product/）」，「ブログパス（…/product/）」を入力し，ブログを再構築してください。
図3 新しく「商品一覧」のブログを作成します
次に，カスタムフィールドを作成していきます。
今回作成するカスタムフィールドは5つ，「商品画像」「価格」「カラー」「サイズ」「素材」です。つまり図4で，個別記事で定型化して更新したい箇所をカスタムフィールド化することにします。
図4 作成するカスタムフィールド
左メニューにある，カスタムフィールド > 新規 から制作しましょう。
図5 カスタムフィールドの作成画面でこのような感じで入力していきます
作成するカスタムフィールドと値は以下のとおり。
カスタムフィールドのテンプレートタグ名は，必ず他のMTタグと被らないよう，オリジナルな名称になるようにしてください。
表 作成するカスタムフィールドと値
| 名前 | オブジェクト | 説明 | 種類 | 必須？ | 既定値 | ベースネーム | テンプレートタグ |
|---|---|---|---|---|---|---|---|
| 商品画像 | ブログ記事 | 300×300の商品画像をアップロードしてください | 画像 | YES | image | image | |
| 価格 | ブログ記事 | テキスト | YES | price | price | ||
| カラー | ブログ記事 | テキスト | YES | color | color | ||
| サイズ | ブログ記事 | テキスト | YES | size | size | ||
| 素材 | ブログ記事 | テキスト | YES | material | material |
これで5つのカスタムフィールドができあがりました。
ブログ記事の入力画面を確認してみると，設定したカスタムフィールドの入力項目が出ていますね。
図6 できあがったカスタムフィールド
- ※ 入力項目を「必須」にしていないカスタムフィールド項目は，デフォルトでは記事の入力画面には出てきません。記事の入力画面の右上にある「表示オプション」から，入力画面に表示させたい項目を選択してください。
