サブ項目(JSON)を使用して複雑な構造を持つコンテンツ項目を設定する

概要

サブ項目(JSON)はコンテンツ定義に設定できる拡張項目の1つで、任意のJSON形式でデータを登録できるため、深いネスト構造を設定したり、外部システムから取得したJSONをそのまま格納したりできます。
また、設定したJSONデータ定義からUIを自動生成できますので、項目の繰り返しと組み合わせてネスト構造を設定したり、ブロックエディタと組み合わせてカードUIのサブ項目として利用するなど、柔軟な利用が可能です。

本チュートリアルでは[サブ項目(JSON)]の設定について、想定される利用法方法を紹介します。

学べること

サブ項目(JSON)の使用例と、その設定方法を学びます。

• JSONデータをそのまま入力する
• 項目の繰り返しと合わせてネストされた項目を設定する
• ブロックエディタのサブ項目として利用する

JSONデータをそのまま入力する

UIが不要でJSONデータをそのまま利用する場合、JSON構造に制限はありません。
JSONデータ定義でJSON構造とそのバリデーションを設定します。

ここでは例として、「組織→部門→チーム→サービス」の深いネスト構造を持つ項目を設定します。

コンテンツ定義設定

以下のコンテンツ定義を設定します。

項目	内容
項目名	所属部署
項目設定	サブ項目(JSON)
JSONデータ定義からUIを構成する	無効
JSONデータ定義(入力制限タブ)	以下のJSONを入力

{
  "title": "Organization → Department → Team → Service",
  "type": "object",
  "properties": {
    "id": { "type": "string" },
    "name": { "type": "string" },
    "departments": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "code": { "type": "string" },
          "name": { "type": "string" },
          "teams": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "name": { "type": "string" },
                "services": {
                  "type": "array",
                  "items": {
                    "type": "object",
                    "properties": {
                      "name": { "type": "string" }
                    },
                    "additionalProperties": false,
                    "required": ["name"]
                  }
                }
              },
              "additionalProperties": false,
              "required": ["name", "services"]
            }
          }
        },
        "additionalProperties": false,
        "required": ["code", "name", "teams"]
      }
    }
  },
  "additionalProperties": false,
  "required": ["id", "name", "departments"]
}

上記のJSONデータ定義では、以下の項目を定義します。

• 組織:id, name, departments
• 部門:code, name, teams
• チーム:name, services
• サービス:name

コンテンツ編集画面

コンテンツ編集画面でJSONデータを入力します。
エディタ形式の入力フォームですが、定義外の項目が存在する場合と定義された項目が存在しない場合にバリデーションエラーを出しますので、フロントエンド側は指定されたJSON構造がレスポンスされる前提で実装できます。

以下が期待されるJSONの例です。

{
  "id": "org-001",
  "name": "業務本部",
  "departments": [
    {
      "code": "",
      "name": "",
      "teams": [
        {
          "name": "",
          "services": [
            {
              "name": "監査係"
            }
          ]
        }
      ]
    },
    {
      "code": "HR",
      "name": "人事部",
      "teams": [
        {
          "name": "採用チーム",
          "services": [
            {
              "name": "エンジニア採用係"
            }
          ]
        },
        {
          "name": "研修チーム",
          "services": [
            {
              "name": "エンジニア研修係"
            }
          ]
        }
      ]
    }
  ]
}

JSONデータの項目に過不足がある場合にバリデーションエラーが出ることも確認してください。

項目の繰り返しと合わせてネストされた項目を設定する提供版: β / RC版

コンテンツ定義で「JSONデータ定義からUIを構成する」を有効にすると、設定したJSONデータ定義から自動でUIが生成されるため、 直感的なコンテンツ登録が可能になります。

ここでは、項目の繰り返し設定とサブ項目(JSON)の繰り返し設定を組み合わせて、2段階のネスト構造を設定する例を紹介します。

コンテンツ定義設定

まずはコンテンツ定義で以下の項目を作成します。

項目	内容
項目名	FAQ項目
項目設定	サブ項目(JSON)
JSONデータ定義からUIを構成する	有効
JSONデータ定義(入力制限タブ)	以下のJSONを入力

{
  "type": "object",
  "properties": {
    "faqCategory": {
      "type": "string",
      "title": "FAQカテゴリ"
    },
    "faqs": {
      "type": "array",
      "title": "FAQ",
      "items": {
        "type": "object",
        "properties": {
          "question": {
            "type": "string",
            "title": "質問"
          },
          "answer": {
            "type": "string",
            "format": "textarea",
            "title": "回答"
          }
        }
      }
    }
  }
}

次に作成したサブ項目(JSON)の繰り返し設定をします。

コンテンツ編集画面

コンテンツの編集画面にアクセスすると、項目の繰り返しでFAQのカテゴリを追加し、サブ項目(JSON)の繰り返しでFAQを追加できるUIが確認できます。

ブロックエディタのサブ項目として利用する提供版: β / RC版

サブ項目(JSON)を使用すると、1つの項目内に複数のデータをまとめて登録できます。
こちらを利用してカードUIを作成し、ブロックエディタのサブ項目として利用できます。

コンテンツ定義設定

まずはコンテンツ定義で以下の項目を作成します。

項目	内容
項目名	ニュースカード
項目設定	サブ項目(JSON)
JSONデータ定義からUIを構成する	有効
JSONデータ定義(入力制限タブ)	以下のJSONを入力

{
  "type": "object",
  "properties": {
    "news": {
      "type": "array",
      "title": "ニュース一覧",
      "description": "最新のニュースを最大10件まで登録できます",
      "minItems": 1,
      "maxItems": 10,
      "items": {
        "type": "object",
        "properties": {
          "title": {
            "type": "string",
            "title": "タイトル",
            "description": "ニュースのタイトルを入力してください",
            "maxLength": 100
          },
          "link": {
            "type": "string",
            "title": "リンク",
            "description": "ニュース記事のURLを入力してください"
          },
          "publishDate": {
            "type": "string",
            "title": "公開日",
            "format": "date"
          },
          "category": {
            "type": "string",
            "title": "カテゴリー",
            "enum": ["press", "blog", "event", "update"],
            "enumNames": ["プレスリリース", "ブログ", "イベント", "アップデート"]
          }
        },
        "required": ["title", "link"]
      }
    }
  }
}

次に作成したサブ項目(JSON)をブロックエディタのサブ項目として設定します。

コンテンツ編集画面

コンテンツ編集画面にアクセスすると、ブロックエディタで選択できるニュースカード項目が確認できます。

注意事項

• JSONデータ定義からUIを構成する機能は、Object → Array → Objectを超えるネスト構造(繰り返しUIの中に繰り返しUIがネストされる構造)はサポートしていません。
• サブ項目(JSON)は現状、検索項目として使う想定になっていません。検索が必要な場合は他の項目をご利用ください。

関連ドキュメント

• コンテンツ定義編集
• コンテンツの編集