- チュートリアル
Next.js
Nuxt 3
- 操作マニュアル
アカウントとログイン
コンテンツ
外部連携
- コンテンツAPI
基本操作
- マネジメントAPI（ベータ）
コンテンツ操作
サービス操作
レスポンスとエラー処理
- 画像API
繰り返しフィールドはカスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。
入力したデータは配列として返却されるので、フロントエンド側で自由度の高いデザインをすることが可能です。
繰り返しフィールドを利用するためには、事前にカスタムフィールドを作成しておく必要があります。
カスタムフィールドの作成についてはこちらをご覧ください。
以下のようなカスタムフィールドが作成されている前提で、設定方法をご説明します。
次にこれらのカスタムフィールドを使って繰り返しフィールドを設定するために、「API設定」→「APIスキーマ」に移動し、フィールドの「種類」として「繰り返し」を選択します。
モーダルウィンドウが開き、事前に設定したカスタムフィールドの中でどのカスタムフィールドを利用するか選択できます。利用したいものにチェックを入れ、「決定」をクリックします。
次に編集画面での入稿方法をご説明します。
繰り返しフィールドが設定されていると、次のようなフィールド（繰り返しフィールド（デモ））が用意されています。
「＋フィールドを追加」ボタンをクリックすると、どのカスタムフィールドを使用するか選択するためのポップアップが表示されます。
ここで「見出し」を選ぶと、見出しとして設定したカスタムフィールド（テキストフィールド）が表示されます。
また、「フィールドを追加」ボタンを押すと、下にフィールドを追加していくことができます。
三点リーダーをクリックすると表示されるメニューからは、上下にフィールドを追加できます。
今度は「画像＋テキスト」のフィールドを追加します。
すると、以下のように「1. 見出し」「2. 画像＋テキスト」のフィールドを並べることができます。
Tips「画像＋テキスト」のフィールドは入力フォームが横並びになっていますが、このようなフィールドのレイアウト設定はカスタムフィールド側で行います。設定方法については以下のドキュメントをご覧ください。
「＝」をドラッグ&ドロップすると、フィールドを上下に移動できます。
三点リーダーをクリックすると表示されるメニューからも、フィールドを上下に移動できます。
カスタムフィールド名の横にある矢印をクリックすると、フィールドの折りたたみ・展開ができます。
フィールドを削除するには、三点リーダーをクリックしてメニューを表示し「フィールドを削除」をクリックします。
API、CSVを利用した入稿については以下のドキュメントをご参照ください。
設定項目 | 説明 |
|---|---|
必須項目 | 設定をONにすると入稿時の入力が必須となります。 |
説明文 | 入稿画面に表示する説明文です。 |
繰り返しフィールド | 繰り返しフィールドに使用するカスタムフィールドを設定します。 |
並び順 | カスタムフィールドを選択する際の並び順を設定します。 |
繰り返しフィールドの数を制限する | 繰り返しフィールドの最小数と最大数を設定します。 |
それでは実際に値を入力して、APIからデータを取得してみましょう。確認のため、次のように入力します。
APIプレビューで実際にプレビューしてみると、次のようなレスポンスが得られます。
{
"id": "kkk7km7-ng",
"createdAt": "2023-08-28T06:25:36.825Z",
"updatedAt": "2023-08-28T06:25:36.825Z",
"repeat": [
{
"fieldId": "heading",
"heading": "見出しです"
},
{
"fieldId": "imageText",
"image": {
"url": "https://images.microcms-assets.io/assets/xxxxxx/xxxxxx/blog-template.png",
"height": 630,
"width": 1200
},
"text": "<h1 id=\"h4a6e27f824\">繰り返しフィールドとは</h1><p>カスタムフィールドを複数選択し、好きな順序で入力を繰り返すことができるフィールドです。</p>"
}
]
}
GET APIの基本的なレスポンス形式については以下のドキュメントをご参照ください。
配列の要素ごとにコンポーネントを定義（<Heading />, <ImageText />）しておき、API経由で得た値を渡す例をご紹介します。以下、Reactにおける実装例です。
export const Main = ({ repeat }) => (
<main>
{repeat.map((item, i) =>
item.fieldId === 'heading' ? (
// 見出し表示用のコンポーネントを利用する
<Heading key={i} text={item.text} />
) : item.fieldId === 'imageText' ? (
// 画像 + テキスト表示用のコンポーネントを利用する
<ImageText key={i} image={item.image} text={item.text} />
) : null
)}
</main>
);
ここでは、繰り返しフィールドの配列（repeat）をmap()メソッドで変換し、fieldIdごとに適したコンポーネントを出力しています。
このようにすることで、編集画面で入力した順序のまま、ビューを構築することができます。
繰り返しフィールドを用いると、表現に合わせた柔軟なフィールドが構築できます。
繰り返しフィールドの活用事例、実装事例として以下のブログなどもご用意していますので、こちらも併せてご参照ください。
