トップ
操作マニュアル

カスタムフィールド

最終更新日:2023年10月11日

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

作成方法

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

その後、「追加する」ボタンからカスタムフィールドの作成画面に遷移することができます。

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

APIスキーマを定義する

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

レイアウトを指定する

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

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

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

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

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

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

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

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

APIのレスポンス

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

{
    "id": "3llo77z_ym",
    "createdAt": "2023-08-16T08:18:52.699Z",
    "updatedAt": "2023-08-16T08:18:52.699Z",
    "publishedAt": "2023-08-16T08:18:52.699Z",
    "revisedAt": "2023-08-16T08:18:52.699Z",
    "title": "タイトルのテスト",
    "content": "<p>内容のテスト</p>",
    "meta": {
        "fieldId": "meta",
        "title": "metaタイトルのテスト",
        "description": "meta概要のテスト",
        "image": {
            "url": "https://images.microcms-assets.io/assets/9ca185bf36e84fd7b756a78fc150332d/c1b618aac44d48a0abbfcb355c153aa4/ogp.png",
            "height": 630,
            "width": 1200
        }
    }
}

作成方法
カスタムフィールドの利用方法
APIのレスポンス

カスタムフィールド

作成方法