ドキュメントAEM as a Cloud Serviceユーザーガイド

コンポーネント定義

最終更新日: 2025年2月19日
  • 適用対象:
  • Experience Manager as a Cloud Service
  • トピック:
  • 開発

作成対象:

  • 管理者
  • 開発者

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

概要

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

ヒント
コンテンツモデリングプロセスの概要については、Edge Delivery Services プロジェクトでのWYSIWYG オーサリング向けコンテンツモデリングを参照してください。
ヒント
最初から独自の component-definition.json ファイルを作成する必要はありません。 プロジェクトをブートストラップするために使用するプロジェクトのボイラープレートには 完全に機能する component-definition.json ファイルが含まれており、必要に応じて調整できます。

コンポーネント定義例

以下は完全ですが、簡単な 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、エディターのプロパティパネルにある 追加 アイコンをクリックして 新しいコンポーネントをページに追加したときにユニバーサルエディターに表示されるコンポーネントのグループを定義します。 グループは、コンポーネントの整理に役立ちます。 共通グループには、一般コンポーネント や 詳細コンポーネント があります。

  • title は、エディター UI に表示されるグループの説明をテキストで定義します。
  • グループ id 一意に識別します。

components

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

  • title は、UI に表示されるコンポーネントの説明をテキストで定義します。

  • コンポ id ネントを一意に識別します。

    • 同 id の コンポーネントモデルは、コンポーネントのフィールドを定義します。
    • 一意なので、例えば フィルター定義で使用して、コンテナに追加できるコンポーネントを決定できます。
  • コンポ model ネントで使用する モデルを定義します。

    • これにより、モデルはコンポーネント定義内で一元的に管理され、実装を指定する必要は りません。
    • これにより、コンテナ間でコンポーネントを移動できます。
  • コンポ filter ネントで使用する フィルターを定義します。

plugins

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

  • AEM as a Cloud Serviceの aem。
  • AEM 6.5 の aem5。
  • AEM as a Cloud Service WYSIWYG オーサリングの xwalk ール。

page または cf

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

  • page は、コンポーネントが現在のページのコンテンツであることを示します。
  • cf は、コンポーネントが コンテンツフラグメント内のコンテンツに関連付けられていることを示します。

page

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

  • コンポ resourceType ネントのレンダリングに使用する Sling resourceType を定義します。
  • template は、新しく作成されたコンポーネントに自動的に書き込まれるオプションのキーや値を定義し、コンポーネントに適用するフィルターやモデルを定義します。
    • 説明用、サンプル用、プレースホルダーテキストに便利です。

template

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

cf

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

  • 新 name く作成されたコンポーネントの JCR に保存されるオプション名を定義します。
    • 情報のみであり、通常、title のように UI に表示されません。
  • 新 cfModel く作成されたコンポーネントの コンテンツフラグメントモデルを定義します。
  • cfFolder は、コンテンツフラグメントを作成するフォルダーを定義します。
  • 新 title いコンテンツフラグメントのタイトルを定義します。
  • 新 description いコンテンツフラグメントの説明を定義します。
  • 新 template く作成されたコンテンツフラグメントに自動的に書き込まれるオプションのキーと値を定義します。
    • 説明用、サンプル用、プレースホルダーテキストに便利です。

cf が暗示される

参照フィールドを指すようにページが 計測されている場合、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>

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

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab