カスタムフィールドはAPIスキーマで選択可能なフィールドをベースに、複数のフィールドを組み合わせたり、レイアウトを調整できる機能です。

作成方法

カスタムフィールドはAPIごとに作成することが可能です。
API選択時の画面右上にある「カスタムフィールド」リンクをクリックするとカスタムフィールドの一覧画面に遷移します。
その後、追加ボタンからカスタムフィールドの作成画面に遷移することができます。

ここではメタ情報をまとめたカスタムフィールドを作成する例を紹介します。

まずはカスタムフィールド名とカスタムフィールドIDを設定します。



次にカスタムフィールド内における必要なスキーマ設計を行います。
今回はメタ情報として、タイトル / 概要 / OGP画像 の3つを用意します。



最後にレイアウトを指定します。
1カラム or 2カラムの選択ができ、各入力フォームの位置をドラッグ＆ドロップで変更できます。
今回は下記のようにタイトルと概要を左カラム、OGP画像を右カラムに配置します。



以上でカスタムフィールドの作成は完了です。
作成後は一覧画面に表示されます。

カスタムフィールドの利用

作成したカスタムフィールドを利用するには「API設定 > APIスキーマ」に移動します。
フィールドの種類から「カスタム」を選択します。



「カスタム」を選択するとセレクトボックスが表示されるので、先ほど作成した「メタ情報」のカスタムフィールドを選択します。



最終的に下記のようなスキーマ設定となりました。



スキーマの変更を保存して、カスタムフィールドの設定は完了です。
コンテンツ編集画面に遷移すると、次のような入力画面が表示されます。



メタ情報というグループがあり、その中に タイトル / 概要 / OGP画像 が指定したレイアウトで表示されます。

APIのレスポンス

カスタムフィールドを利用した場合のレスポンスはオブジェクト形式で返却されます。
先ほどのメタ情報の例では下記のようなレスポンスとなります。
値をグルーピングして返せるという点がメリットです。

{
    "id": "l1oc8rsy5",
    "createdAt": "2021-10-22T06:24:21.566Z",
    "updatedAt": "2021-10-22T06:25:03.283Z",
    "publishedAt": "2021-10-22T06:25:03.283Z",
    "revisedAt": "2021-10-22T06:25:03.283Z",
    "title": "カスタムフィールドのテスト",
    "body": "<h1 id=\"h1c1c9233e6\">見出し</h1><ul><li>リスト1</li><li>リスト2</li></ul>",
    "meta": {
        "fieldId": "meta",
        "title": "メタ情報タイトル",
        "description": "メタ情報概要",
        "image": {
            "url": "https://images.microcms-assets.io/assets/069e5119630943a984ded0f5b336970c/0eff33b5c6b5429e82393a448252be1b/test.png",
            "height": 434,
            "width": 600
        }
    }
}