コンポーネントの作成

検索
Experience Manager 6.4 Sites 開発ユーザーガイド

目次

対象アプリケーション: Experience Manager 6.4 Sites

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

現在表示中:

このページでは、チャネルのオーサリング方法とコンポーネントのレンダリング方法について説明します。

AEM コンポーネントを使用して、Web ページ上で使用できるコンテンツを保持、書式設定およびレンダリングします。

注意：

AEM コンポーネントの作成について詳しくは、AEM コンポーネントの開発を参照してください。

チャネルのオーサリング

チャネルは、一連のディスプレイに配信されるコンテンツの中心となるオブジェクトです。このため、コンテンツ作成者は通常、エディターでチャネルを開いてコンテンツを追加または変更します。チャネルは cq:Page なので、同じ従来の UX パターンに従って、チャネル上のコンポーネントを追加および変更します。

ただし、チャネル内のコンポーネントは通常フルスクリーンでレンダリングされるので、単一コンポーネントの編集や新しい順序の編成をおこなう際にオーサリングエクスペリエンスに影響を及ぼします。そのため、チャネルはコンポーネントの様々なビューをレンダリングするためにセレクターを使用します。オーサリング環境では、編集セレクターを使用して、カスタムチャネルのレンダリングがアクティブ化されます。

例：http://localhost:4502/editor.html/content/screens/we-retail/channels/idle.edit.html

ユーザーは、編集時に URL にセレクターを追加する必要はありません。クライアント側のロジックがレイヤースイッチイベントをリッスンしており、チャネルに専用のリソースタイプ screens/core/components/channel がある場合にセレクターを追加します。

注意：

CRXDE Lite を使用した AEM アプリケーション開発の基礎については、CRXDE Lite による開発を参照してください。

コンポーネントのレンダリング

適切なオーサリングを有効にするために、コンポーネントでは次の 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

注意：

カスタムコンポーネントを開発する場合は、AEM Screens のサンプルコンポーネントテンプレートを使用してください。