Field Kit

EmDash の json フィールドタイプは任意の構造化データを保存しますが、デフォルトのエディタは手動で生の JSON を入力する必要がある単一行のテキスト入力です。Field Kit は、seed の options で完全に設定される json フィールド用の4つのコンポーザブルウィジェットを提供するファーストパーティプラグインです。サイトビルダーには React が不要です。

インストール

npm i @emdash-cms/plugin-field-kit

astro.config.mjs でプラグインを登録します：

import { defineConfig } from "astro/config";
import emdash from "emdash";
import { fieldKitPlugin } from "@emdash-cms/plugin-field-kit";

export default defineConfig({
	integrations: [
		emdash({
			plugins: [fieldKitPlugin()],
		}),
	],
});

次に、widget を field-kit:<name> に設定して、任意の json フィールドにウィジェットを追加します：

{
	"slug": "ingredients",
	"type": "json",
	"widget": "field-kit:list",
	"options": { "fields": [...] }
}

ウィジェット

ウィジェットに必要な options が欠けている場合（例：object-form/list の fields、または grid の rows/columns）、エディタは壊れた入力の代わりにインライン警告「ウィジェットが正しく設定されていません」を表示します。これは seed スキーマの反復中に便利です。

object-form

単一の JSON オブジェクトとして保存される型付きサブフィールドのグループをレンダリングします。栄養成分や連絡先情報など、固定形状の構造化データに適しています。

{
	"slug": "nutrition",
	"type": "json",
	"widget": "field-kit:object-form",
	"options": {
		"collapsed": false,
		"fields": [
			{ "key": "calories", "label": "Calories", "type": "number", "suffix": "kcal" },
			{ "key": "protein", "label": "Protein", "type": "number", "suffix": "g" },
			{ "key": "fat", "label": "Fat", "type": "number", "suffix": "g" },
			{ "key": "carbs", "label": "Carbs", "type": "number", "suffix": "g" }
		]
	}
}

保存される値：{ "calories": 250, "protein": 12.5, "fat": 8, "carbs": 30 }。

list

追加、削除、並べ替えコントロール付きの順序付き配列エディタ。各行は fields で定義された形状の JSON オブジェクトです。行ヘッダーには、Mustache スタイルのテンプレートからレンダリングされた要約が表示されます。

{
	"slug": "ingredients",
	"type": "json",
	"widget": "field-kit:list",
	"options": {
		"itemLabel": "Ingredient",
		"min": 1,
		"max": 50,
		"sortable": true,
		"summary": "{{name}} — {{amount}}",
		"fields": [
			{ "key": "name", "label": "Name", "type": "text", "required": true },
			{ "key": "amount", "label": "Amount", "type": "text" },
			{ "key": "optional", "label": "Optional", "type": "boolean" }
		]
	}
}

保存される値：

[
	{ "name": "Flour", "amount": "500g", "optional": false },
	{ "name": "Butter", "amount": "200g", "optional": false }
]

grid

行 × 列の2次元マトリックス。各セルはトグル、テキスト入力、数値入力、または選択にできます。季節の利用可能性、価格表、機能比較などのマトリックスに便利です。

{
	"slug": "availability",
	"type": "json",
	"widget": "field-kit:grid",
	"options": {
		"cell": "toggle",
		"rows": [
			{ "key": "berries", "label": "Berries" },
			{ "key": "stoneFruit", "label": "Stone fruit" },
			{ "key": "citrus", "label": "Citrus" }
		],
		"columns": [
			{ "key": "spring", "label": "Spring" },
			{ "key": "summer", "label": "Summer" },
			{ "key": "autumn", "label": "Autumn" },
			{ "key": "winter", "label": "Winter" }
		]
	}
}

保存される値：

{
	"berries": { "spring": false, "summer": true, "autumn": false, "winter": false },
	"stoneFruit": { "spring": false, "summer": true, "autumn": true, "winter": false },
	"citrus": { "spring": false, "summer": false, "autumn": true, "winter": true }
}

tags

文字列配列用のチップスタイル入力。固定の suggestions リスト、自由形式のカスタム値（切り替え可能）、大文字小文字変換、オプションの max をサポートします。

{
	"slug": "keywords",
	"type": "json",
	"widget": "field-kit:tags",
	"options": {
		"placeholder": "Add a keyword…",
		"max": 10,
		"transform": "lowercase",
		"allowCustom": true,
		"suggestions": ["vegan", "vegetarian", "gluten-free", "dairy-free", "nut-free"]
	}
}

保存される値：["vegan", "gluten-free"]。

Enter または , を押してタグをコミットします。空の入力で Backspace を押すと、最後のタグが削除されます。重複したタグは黙って無視されます。

サブフィールド

object-form と list は、型付きサブフィールド定義の options.fields 配列を受け入れます。各エントリには key（書き込む JSON オブジェクトキー）、label、type、型固有の追加があります。

すべてのサブフィールドに共通のプロパティ：required、helpText、defaultValue。

要約テンプレート

list ウィジェットは、options.summary の Mustache スタイルテンプレートを使用して、折りたたまれた各行をレンダリングします。{{key}} は、そのキーの行の値（文字列に強制変換）に置き換えられます。falsy 値は "{itemLabel} {n}" にフォールバックします。

"summary": "{{name}} — {{amount}}"

Flour — 500g のような行をレンダリングします。テンプレートは単純な文字列置換です — HTML なし、ネストされた式なし。

データの耐久性

Field Kit ウィジェットは、フィールドの既存のカラムにプレーン JSON を保存します。プラグイン固有のテーブル、外部キー、スキーマの変更はありません。設定から @emdash-cms/plugin-field-kit を削除しても、データは有効なままです — 編集 UI のみがデフォルトの json テキスト入力に戻ります。

これは、ウィジェットの形状を変更した場合にも適用されます：保存されたオブジェクトの未知のキーは次回の書き込み時に保持されるため、古いフィールドセットでキャプチャされたデータを失うことなくスキーマを進化させることができます。

参照

• プラグイン概要 — EmDash プラグインの仕組み。
• プラグイン形式の選択 — Field Kit が適合しない場合は、独自のフィールドウィジェットを作成してください。
• Discussion #571 — このプラグインにつながった提案。