こんにちは、柴田です。
本日のリリースより、繰り返しフィールドが使えるようになりました。
非常に柔軟にサイトを構築できるようになるので、microCMSを用いてメディア構築等を検討している方はぜひご覧ください。

また、繰り返しフィールドはカスタムフィールドと同様にスタータープランから利用可能の予定でしたが、より多くの方に試していただきたいということで、フリープランからでも使えるようになりました。
（ただし、API1個あたりのカスタムフィールド作成数は2個までになります）

繰り返しフィールドとは

カスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。
例えば、下記のようなカスタムフィールドを用意していたとします。

• 大見出し
• 見出し
• テキスト
• コンバージョンボタン
• 関連リンク

これに対して繰り返しフィールドを用いると、入力側で自由にカスタムフィールドを選択し、入力していくことができます。

=====
例）
大見出し
↓
テキスト
↓
コンバージョンリンク
↓
見出し
↓
テキスト
↓
関連リンク
↓
見出し
↓
テキスト
=====

それでは早速使い方の紹介をしていきます。

繰り返しフィールドの設定

まずはカスタムフィールドを作成します。
作成過程については別記事で紹介しているので、そちらをご確認ください。

今回は次のようなカスタムフィールドを用意しました。

次にこれらのカスタムフィールドを使って繰り返しフィールドを設定するために、API設定 > APIスキーマ に移動しましょう。
ここで「種類」のところに繰り返しフィールドがあるので選択します。

すると、どのカスタムフィールドを利用するか聞かれるので、使用したいカスタムフィールドを選択しましょう。

これで繰り返しフィールドの準備はできました。

入稿画面

次に入稿画面に移動してみましょう。
次のような繰り返しフィールドが用意されているはずです。

「＋フィールドを追加」ボタンをクリックすると、どのカスタムフィールドを使用するか選択するためのポップアップが表示されます。

ここで「見出し」を選ぶと、見出しとして設定したカスタムフィールドが表示されます。

フィールドの上下に「＋」ボタンがあるので、こちらをクリックすることで上にも下にもフィールドを追加していくことができます。
試しに下の「＋」ボタンをクリックして、今度は「画像＋テキスト」を追加してみます。

上記のように「見出し」「画像＋テキスト」のフィールドを並べることができました。
「画像＋テキスト」のフィールドは入力フォームが横並びになっていますが、そのあたりの設定はカスタムフィールド側で行います。
その設定方法に関しても、こちらの記事で紹介しております。
また、フィールドにオンマウスすると右上に「×」ボタンが表示されるので、そちらをクリックすることでフィールドの削除も可能です。

それでは実際に値を入力して、APIを叩いてみましょう。次のように入力してみました。

APIを叩くと次のようなレスポンスが得られます。

{
    "id": "Ja_6TcbzM",
    "createdAt": "2020-04-15T13:11:39.699Z",
    "updatedAt": "2020-04-15T13:11:39.699Z",
    "body": [
        {
            "fieldId": "heading",
            "text": "繰り返しフィールドができました"
        },
        {
            "fieldId": "imageText",
            "image": {
                "url": "https://images.microcms-assets.io/protected/ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/service/xxxx/media/update-repeater-field-ogp.png"
            },
            "text": "<h1 id=\"hAR1Lx4Y0WK\">繰り返しフィールドとは</h1><p>カスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。</p>"
        }
    ]
}

繰り返しフィールド部分は配列形式で返されており、各要素にfieldIdと入力内容が含まれています。

繰り返しフィールドを用いた実装例

配列の要素ごとにコンポーネントを定義しておき、値を流し込んでいく形式がわかりやすいかと思います。
以下にReactにおける実装例を示します。

export const Main = ({ body }) => (
  <main>
    {body.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>
);

ここでは、繰り返しフィールドの配列（body）をmapで変換し、filedIdごとに適したコンポーネントを出力しています。
このようにすることで、入稿画面で入力した順序のまま、ビューを構築することができます。

その他

今まで存在していたフィールドごとの必須チェックや説明文の表示は繰り返しフィールド内でも使えます。
繰り返しフィールド自体にも必須チェックをつけられますし、繰り返しフィールド内で利用するカスタムフィールドの各フィールドごとにも必須チェックができます。

また、注意点としてカスタムフィールドはAPIに紐づいています。
よって、API作成時にカスタムフィールドおよび繰り返しフィールドを選択することはできません。
API作成後にカスタムフィールドを作成し、API設定よりスキーマにセットしてください。

おわりに

今回は繰り返しフィールドのご紹介をしました。
繰り返しフィールドを用いることで作成できるサイトの幅が一気に広がったと思います。
フリープランからでも利用できるようになっていますので、ぜひ試してみてください！

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitter、メールからお気軽にご連絡ください！
引き続きmicroCMSをよろしくお願いいたします！