コンポーネントの作成
- トピック:
- スクリーンの開発
作成対象:
- 中級
- 開発者
AEM コンポーネントを使用して、web ページ上で使用できるコンテンツを保持、書式設定およびレンダリングします。
オーサーチャネル
チャネルは、一連のディスプレイに配信されるコンテンツの中心的なオブジェクトです。したがって、コンテンツ作成者は、通常、エディターでチャネルを開いてコンテンツを追加または変更します。チャネルは cq:Page
なので、同じ従来の UX パターンに従って、チャネル上のコンポーネントを追加および変更します。
ただし、チャネル内のコンポーネントは通常フルスクリーンでレンダリングされるので、単一コンポーネントの編集や新しい順序の編成を行う際にオーサリングエクスペリエンスに影響を及ぼします。そのため、チャネルはコンポーネントの様々なビューをレンダリングするためにセレクターを使用します。オーサリング環境では、edit
セレクターを使用してカスタムチャネルレンダリングを有効化します。
例:http://localhost:4502/editor.html/content/screens/we-retail/channels/idle.edit.html](http://localhost:4502/editor.html/content/screens/we-retail/channels/idle.edit.html
ユーザーは、編集時に URL にセレクターを追加する必要はありません。クライアントサイドのロジックがレイヤースイッチイベントをリッスンしており、チャネルに専用のリソースタイプ screens/core/components/channel がある場合にセレクターを追加します。
コンポーネントのレンダリング
適切なオーサリングを有効にするために、コンポーネントでは次の 2 つのレンダリングを提供する必要があります。
コンポーネント | レンディション |
---|---|
my-component/my-component.html | 実稼動レンダリング |
my-component/edit.html | 小さいビューでのレンダリングの編集 |
組み込みのコンポーネントでは、次のクライアントライブラリのカテゴリが使用されます。
コンポーネント | クライアントライブラリ |
---|---|
cq.screens.components.edit | オーサリング時に読み込む必要がある CSS および JS |
cq.screens.components.production | チャネルの実行時に読み込む必要がある CSS および JS |
cq.screens.components | 共有 CSS および JS |