コンポーネント定義
- 適用対象:
- Experience Manager as a Cloud Service
- トピック:
- 開発
作成対象:
- 管理者
- 開発者
コンポーネント定義とユニバーサルエディター間の JSON 契約について詳しく説明します。
概要
component-definition.json
ファイルは、コンテンツ作成者がプロジェクトで使用できるコンポーネントを定義します。 このドキュメントでは、このファイルの目的と、ユニバーサルエディターでファイルを使用して作成者にページオーサリングコンポーネントを表示する方法について詳しく説明します。
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
ネントのレンダリングに使用する SlingresourceType
を定義します。 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>
コンポーネントは、単にリソースの下のサブノードです。