コンポーネント定義 component-definition

コンポーネント定義とユニバーサルエディター間の JSON 契約について詳しく説明します。

概要 overview

component-definition.json ファイルは、プロジェクトのコンテンツ作成者が使用できるコンポーネントを定義します。このドキュメントでは、このファイルの目的と、ユニバーサルエディターでこのファイルを使用して作成者にページオーサリングコンポーネントを表示する方法について詳しく説明します。

コンポーネント定義の例 example

以下は、例として、完全ですがシンプルな component-definition.json です。

{
  "groups":[
    {
      "title":"General Components",
      "id":"general",
      "components":[
        {
          "title":"Text",
          "id":"text",
          "model": "text",
          "filter": "texts",
          "plugins":{
            "aem":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            },
            "aem65":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            }
          }
        }
      ]
    }
  ]
}

groups groups

groups は、エディターのプロパティパネルで 追加 アイコンをクリックしてページに新しいコンポーネントを追加した際に、作成者がユニバーサルエディターで見るコンポーネントのグループを定義します。グループは、コンポーネントの整理に役立ちます。共通グループには、一般コンポーネント ​と​ 詳細コンポーネント ​があります。

components components

components は、グループに属するコンポーネントを定義します。

plugins plugins

plugins は、コンポーネントの永続化を担当するプラグインを定義します。一般的なプラグインを次に示します。

page または cf page-cf

plugin を定義したら、それがページ関連かフラグメント関連かを示す必要があります。

page page

コンポーネントがページ上のコンテンツである場合は、次の情報を指定できます。

template template

オプションのキーと値のペアを指定することで、template はこれらを新しいコンポーネントに自動的に書き込むことができます。さらに、次のオプション値も指定できます。

cf cf

コンポーネントがコンテンツフラグメント内のコンテンツに関連している場合は、次の情報を指定できます。

cf は暗黙的に指定可能 cf-implied

ページが参照フィールドを指すように実装されている場合は、cf が想定されます。

<div data-aue-resource="urn:aem:/content" data-aue-type="container" data-aue-prop="field"></div>

このような場合、data-aue-prop が参照フィールドを指しているので、cf が想定されます。data-aue-prop がない場合、コンポーネントが参照フィールドを通じてリンクされていないので、ユニバーサルエディターでは page が想定されます。

<div data-aue-resource="urn:aem:/content" data-aue-type="container"></div>

コンポーネントは、単にリソースの下にあるサブノードです。