繰り返し

繰り返しフィールド

グループ化したフィールドを増減させられるフィールドです。著者リスト、FAQ項目、ギャラリー画像など、繰り返し構造のデータに使用します。

基本例

{
	"name": "authors",
	"type": "loop",
	"label": "著者",
	"fields": [
		{ "name": "name", "type": "text", "label": "名前", "required": true },
		{ "name": "role", "type": "text", "label": "役割" }
	]
}

プロパティ

プロパティ必須説明
namestringYesフィールドの識別子
type"loop"Yes"loop"を指定
labelstringNoCMS上での表示名
notestringNo編集者向けの補足メモ
requiredbooleanNo必須フィールドかどうか
fieldsarrayYes各アイテムが持つフィールドの定義
minItemsnumberNo最小アイテム数
maxItemsnumberNo最大アイテム数
itemLabelstringNoアイテムの表示ラベルに使うフィールド名
layoutstring[][]No各アイテム内のフィールドレイアウト

fieldsで使用可能なフィールドタイプ

fields内には、loop以外のすべてのフィールドタイプを使用できます。

  • text, textarea, richtext
  • number, boolean
  • date, image
  • select, checkbox, relation

注意: loopのネストは許可されていません。

使用例

著者リスト

{
	"name": "authors",
	"type": "loop",
	"label": "著者",
	"minItems": 1,
	"maxItems": 5,
	"itemLabel": "name",
	"fields": [
		{ "name": "name", "type": "text", "label": "名前", "required": true },
		{ "name": "role", "type": "text", "label": "役割" },
		{ "name": "avatar", "type": "image", "label": "アバター" }
	]
}

FAQ(よくある質問)

{
	"name": "faq",
	"type": "loop",
	"label": "よくある質問",
	"itemLabel": "question",
	"fields": [
		{ "name": "question", "type": "text", "label": "質問", "required": true },
		{ "name": "answer", "type": "textarea", "label": "回答", "required": true }
	]
}

ギャラリー

{
	"name": "gallery",
	"type": "loop",
	"label": "ギャラリー",
	"maxItems": 10,
	"itemLabel": "caption",
	"fields": [
		{ "name": "image", "type": "image", "label": "画像", "required": true },
		{ "name": "caption", "type": "text", "label": "キャプション" },
		{ "name": "alt", "type": "text", "label": "代替テキスト" }
	]
}

価格表

{
	"name": "pricing",
	"type": "loop",
	"label": "価格プラン",
	"minItems": 1,
	"maxItems": 4,
	"itemLabel": "name",
	"layout": [["name", "price"], ["features"]],
	"fields": [
		{ "name": "name", "type": "text", "label": "プラン名", "required": true },
		{ "name": "price", "type": "number", "label": "月額(円)", "required": true },
		{
			"name": "features",
			"type": "textarea",
			"label": "機能一覧"
		}
	]
}

タイムライン・沿革

{
	"name": "timeline",
	"type": "loop",
	"label": "沿革",
	"itemLabel": "title",
	"fields": [
		{ "name": "date", "type": "date", "label": "日付", "required": true },
		{ "name": "title", "type": "text", "label": "タイトル", "required": true },
		{ "name": "description", "type": "textarea", "label": "詳細" }
	]
}

layoutの使い方

layoutを使うと、各アイテム内のフィールドを横並びにできます。書き方はコレクションのレイアウトと同じです。

itemLabelの使い方

itemLabelを指定すると、各アイテムのヘッダーにそのフィールドの値が表示されます。

{
	"name": "faq",
	"type": "loop",
	"label": "FAQ",
	"itemLabel": "question",
	"fields": [
		{ "name": "question", "type": "text", "label": "質問" },
		{ "name": "answer", "type": "textarea", "label": "回答" }
	]
}

この例では、アイテムのヘッダーに質問の内容が表示されます。省略した場合は「#1」「#2」のような番号が表示されます。

保存形式

Markdown(YAML形式)

---
title: 'Svelteの始め方'
authors:
  - name: '田中太郎'
    role: '執筆'
    avatar: '/images/tanaka.jpg'
  - name: '鈴木花子'
    role: '監修'
faq:
  - question: 'Svelteとは?'
    answer: 'コンパイラベースのフレームワークです'
  - question: '学習コストは?'
    answer: '比較的低いです'
---
本文がここに入ります...

JSON形式

{
	"title": "Svelteの始め方",
	"authors": [
		{ "name": "田中太郎", "role": "執筆", "avatar": "/images/tanaka.jpg" },
		{ "name": "鈴木花子", "role": "監修" }
	],
	"faq": [
		{ "question": "Svelteとは?", "answer": "コンパイラベースのフレームワークです" },
		{ "question": "学習コストは?", "answer": "比較的低いです" }
	]
}

minItems / maxItems

アイテム数を制限できます。

{
	"name": "authors",
	"type": "loop",
	"label": "著者",
	"minItems": 1,
	"maxItems": 5,
	"fields": [...]
}
  • minItems: 指定数未満のアイテムがある場合、保存時にエラーになります
  • maxItems: 指定数に達すると「追加」ボタンが無効になります

制限事項

  • ネスト禁止: loop フィールドの中に loop フィールドを入れることはできません
  • pit指定不可: loop フィールドは pit.title, pit.body には指定できません
  • 並び替え未対応: 現在はドラッグ&ドロップでの並び替えには対応していません

コレクションのlayoutとの関係

loop フィールドは、コレクションの layout 設定で他のフィールドと同様に配置できます。

{
	"name": "blog",
	"path": "content/blog",
	"extension": "md",
	"layout": [
		["title"],
		["authors", "category"],
		["body"]
	],
	"fields": [
		{ "name": "title", "type": "text", "label": "タイトル" },
		{
			"name": "authors",
			"type": "loop",
			"label": "著者",
			"fields": [...]
		},
		{ "name": "category", "type": "select", "label": "カテゴリ", "options": [...] },
		{ "name": "body", "type": "richtext", "label": "本文" }
	]
}

コレクションの layout は loop フィールド全体の配置を制御し、loop の layout は各アイテム内部のフィールド配置を制御します。