FreeLayoutCustomFieldプラグインでは、同一フィールド群を複数回追加できるようにするだけでなく、異なるフィールド群（ユニット）を複数回追加できるようにすることもできます。

ユニット機能の概要

Movable Typeで記事を作る場合、1つの記事の中には見出し／文章／画像など、様々な要素が含まれます。その中から、個々の要素を取り出して処理したい場合もあります。例えば、サイトのリニューアルでデザインを変更する際に、要素に分解してHTMLを組みなおしたいこともあります。ただ、それにはDOMの解析などが必要で、Movable Typeの標準機能だけでは困難です。
ユニット機能は、このような問題に対処することを想定した機能です。「見出しと文章」「見出しと画像」など、記事を構成する部品を「ユニット」として定義しておき、1つのカスタムフィールドの中で、それらを自由に組み合わせることができます。
前の節で「同一フィールド群の複数回追加」について取り上げましたが、ユニット機能はこの仕組みを拡張したようなものになっています。
次のページの図は、「見出しと文章」と「見出しと画像」という2つのユニットを選べるカスタムフィールドの例です。1つ目のユニットとして「見出しと文章」を選び、2つ目のユニットとして「見出しと画像」を選んでいます。
ユニットにいったんデータを入力した後で、ユニットの種類を変えることもできます。図の「ユニット1」や「ユニット2」のラベルの右にセレクトがありますが、このセレクトでユニットの種類を選ぶことができます。
また、ユニットの数を増やすこともできます。2つ目のユニットの後に「ユニットを追加」のボタンがあり、その左のセレクトでユニットの種類を選んで追加することができます。さらに、各ユニットのラベルの右にある「ユニット1を削除」などのボタンをクリックして、ユニットを削除することもできます。

ユニットの例

ユニットの定義

ユニットを使う場合、まずユニットの中で使いたいフィールドを定義することから始めます。フィールド定義の書き方は、これまでの書き方に加えて、新たに「units」のブロックも定義します。

ユニットを使う場合のフィールドの定義

fields:
  ・・・（各フィールドの定義）・・・
options:
  ・・・（multiple等の定義）・・・
units:
  names:
    - name: ユニット名
      label: ラベル
    - name: ユニット名
      label: ラベル
  ・・・

fieldsのブロックでは、各ユニットで使うフィールドを定義します。例えば、「見出し」「文章」「画像」の3つのフィールドを組み合わせてユニットを作りたい場合、「見出し」「文章」「画像」の3つのフィールドを定義します。fieldsブロックの書き方は、ここまでで説明してきた通りです。
また、optionsのブロックでは、multipleなどの設定を行います。optionsブロックの書き方も、ここまでで説明してきた通りです。
そして、「units」のブロックで、それぞれのユニットに付けるユニット名とラベルを指定します。ユニット名は個々のユニットを識別するキーで、半角英数字の組み合わせで決めます。またラベルは、管理画面でユニットを選択するセレクトに表示されます。

レイアウト用HTMLの定義

ユニットを使う場合、ユニットごとにフィールドのレイアウトが異なります。したがって、「レイアウト用HTML」の欄に、個々のユニットのHTMLを書きます。この書き方は以下のようになります。

ユニットを使う場合のレイアウト用HTMLの書き方

<!-- {{unit:ユニット1}} -->
ユニット1のレイアウトを行うHTML
<!-- {{unit:ユニット2}} -->
ユニット2のレイアウトを行うHTML
・・・
<!-- {{unit:ユニットn}} -->
ユニット2のレイアウトを行うHTML

「{{unit:ユニット1}}」などの行で、各ユニットの名前を指定します。例えば、「unit_a」という名前のユニットを定義した場合、レイアウト用HTMLには、以下のような部分を入れます。

「unit_a」のレイアウトを行うHTML

<!-- {{unit:unit_a}} -->
unit_aのレイアウトを行うHTML

なお、各ユニットのHTMLの書き方は、これまでの場合と同じです。一般のHTMLのタグと、フィールドを表す「{{フィールド名}}」等のタグを組み合わせます。

ユニットの基本的な例

まず、ユニットの基本的な例として、41ページの例のように、「見出し」「文章」「画像」の3つのフィールドを組み合わせて、「見出しと文章」「見出しと画像」の2種類のユニットを選べるカスタムフィールドを作ってみます。
フィールドの内容は以下のようにするものとします。

ユニットで使うフィールドの内容

ユニットの名前とラベルは以下のようにするものとします。

ユニットの名前とラベル

この場合、フリーレイアウトカスタムフィールドの設定ページの「フィールドの定義」の欄に、以下のように入力します。

フィールドの定義

fields:
  header:
    type: text
    label: 見出し
    class: hdr
  text:
    type: textarea
    class: txtarea
    label: 文章
  image:
    type: image
    label: 画像
units:
  names:
    - name: header_text
      label: 見出しと文章
    - name: header_image
      label: 見出しと画像
options:
  multiple: 1
  sortable: 1

レイアウト用HTMLの欄には以下のように入力します。
前半の3行は、「見出しと文章」のユニット（header_text）のレイアウトを決める部分です。この部分では、「見出し」（header）と「文章」（text）のフィールドを配置しています。また、後半の4行では、「見出しと画像」のユニット（header_image）のレイアウトを決めています。

レイアウト用HTML

<!-- {{unit:header_text}} -->
<p>{{header_label}}<br />{{header}}</p>
<p>{{text_label}}<br />{{text}}</p>
<!-- {{unit:header_image}} -->
<p>{{header_label}}<br />{{header}}</p>
{{image_label}}
{{image}}

また、ユニット機能の概要の例では、「見出し」と「文章」のフィールドのサイズも調整しています。このために、「レイアウト用CSS」の欄に以下のCSSを入力します。なお、この例ではカスタムフィールドのベースネームを「entry_units」にするものとしています。

レイアウト用CSS

<style type="text/css">
#customfield_entry_units-field .hdr {
  width: 100%;
  font-size: 1.5em;
}
#customfield_entry_units-field .txtarea {
  width: 100%;
  height: 5em;
}
</style>

オブジェクトの新規作成時に表示するユニットの指定

オブジェクト（記事等）を新規作成した時点では、標準では「units」の部分の先頭で指定したユニットが表示されます。それ以外のユニットを表示するようにしたい場合、「units」部分の最後にインデントして「default」の部分を追加します。
1つのユニットだけを表示する場合は、「default: ユニット名」のような行を追加します。例えば、「header_text」と「header_image」などのユニットを定義していて、オブジェクトの新規作成時点で「header_image」のユニットを表示したい場合は、unitsの部分を以下のように書きます。

オブジェクトの新規作成時点で1つのユニットを表示する

units:
  names:
    - name: header_text
      label: 見出しと文章
    - name: header_image
      label: 見出しと画像
  ・・・
  default: header_image

また、2つ以上のユニットを表示したい場合は、「default:」の行の後にさらにインデントして、「- ユニット名」の行を複数書きます。例えば、「header_text」と「header_image」などのユニットを定義していて、オブジェクトの新規作成時点で「header_text」ユニットを2回と「header_image」ユニットを1回表示したい場合は、unitsの部分を以下のように書きます。

オブジェクトの新規作成時点で複数のユニットを表示する

units:
  names:
    - name: header_text
      label: 見出しと文章
    - name: header_image
      label: 見出しと画像
  ・・・
  default:
    - header_text
    - header_text
    - header_image