独自のプロジェクトにコアコンポーネントを導入するには、次の 4 つの手順に従います。以下では、それぞれの手順について詳しく説明します。
プロジェクト設定、コアコンポーネント、編集可能テンプレート、クライアントライブラリおよびコンポーネント開発にゼロから取り組む方法についての広範な手順については、複数パートから成る次のチュートリアルを参照してください。
AEM Sites の概要 - WKND チュートリアル
AEM プロジェクトアーキタイプを使用する場合、コアコンポーネントは、アドビのベストプラクティスの推奨事項に基づいて、プロジェクトに自動的に組み込まれます。
コアコンポーネントの背後にある基本的な考え方は柔軟性です。新しいバージョンのコアコンポーネントを頻繁にリリースすることで、アドビは新しい機能をより柔軟に配信できるようになります。一方、開発者は、プロジェクトに統合するコンポーネントとそれらの更新頻度を柔軟に設定できます。この結果、AEM とコアコンポーネントの両方で別々のリリースプロセスになります。
したがって、AEM as a Cloud Service を実行しているか、オンプレミスの AEM を実行しているかによって、インストール手順が決まります。
手順 1 はありません。AEM as a Cloud Service には、コアコンポーネントの最新バージョンが自動的に搭載されています。AEM as a Cloud Service では AEM の最新機能が提供されますが、同時に、コアコンポーネントの最新バージョンも自動的に使用できます。
AEM as a Cloud Service でコアコンポーネントを使用する際には、次の点に留意してください。
/libs
に含まれています。/apps
にも含まれている場合は、プロジェクトビルドパイプラインでログに警告が出力され、プロジェクトの一部として組み込まれているバージョンが無視されます。
/apps
にコアコンポーネントを含んでいる場合は、プロジェクトの調整が必要になる可能性があります。/libs
に含まれるようになっていますが、同じパスのオーバーレイを /apps
に作成することはお勧めしません。コンポーネントの一部をカスタマイズする必要がある場合は、代わりにプロキシコンポーネントパターンを使用してください。実稼動モード(サンプルコンテンツなし)で開始する場合、コアコンポーネントはクイックスタートには含まれません。したがって、リリースされた最新のコンテンツパッケージを GitHub からダウンロードして AEM 環境にインストールすることが最初の手順になります。
これを自動化する方法はいくつかありますが、コンテンツパッケージをインスタンスにすぐにインストールするには、パッケージマネージャーを使用する方法が最も簡単です。詳しくは、パッケージのインストールを参照してください。また、パブリッシュインスタンスも実行する場合は、そのパブリッシュインスタンスにパッケージをレプリケートする必要があります。詳しくは、パッケージのレプリケーションを参照してください。
プロキシコンポーネントパターンで説明している理由により、コアコンポーネントをコンテンツから直接参照することは禁止されています。直接参照を避けるために、すべてのコアコンポーネントは非表示コンポーネントグループ(.core-wcm
または .core-wcm-form
)に属しているので、エディターには直接表示されません。
代わりに、サイト固有のコンポーネントを作成する必要があります。そのコンポーネントで、ページ作成者に表示する適切なコンポーネントの名前とグループを定義し、それぞれのスーパータイプとしてコアコンポーネントを参照します。これらのサイト固有のコンポーネントは、「プロキシコンポーネント」と呼ばれることもあります。これらのコンポーネントは、コンテンツが不要で、主に、サイトに使用するコンポーネントのバージョンを定義する役目を果たすからです。ただし、コアコンポーネントをカスタマイズする場合、これらのプロキシコンポーネントはマークアップとロジックのカスタマイズに不可欠です。
そのため、サイトに使用する必要があるコアコンポーネントごとに、以下が必要になります。
対応するプロキシコンポーネントをサイトの components フォルダー内に作成します。
例 - /apps/my-site/components
内に cq:Component
タイプのタイトルノードを作成します
対応するコアコンポーネントバージョンをスーパータイプで参照します。
例 - 次のプロパティを追加します。
sling:resourceSuperType="core/wcm/components/title/v1/title"
コンポーネントのグループ、タイトルのほか、オプションで説明を定義します。これらの値はプロジェクト固有で、作成者に対するコンポーネントの表示を指定します。
例 - 次のプロパティを追加します。
componentGroup="My Site"
jcr:title="Title"
jcr:description="Section Heading"
例えば、WKND サイトのタイトルコンポーネントをご覧ください。これは、このような方法で作成されるプロキシコンポーネントの好例です。
サイトに必要な CSS および JS ファイルをすべて含んだクライアントライブラリを作成します(まだ作成していない場合)。
サイトのクライアントライブラリで、必要なコアコンポーネントへの依存関係を追加します。それには、embed
プロパティを追加します。
例えば、すべての v1 コアコンポーネントのクライアントライブラリを組み込むには、追加するプロパティは次のようになります。
embed="[
core.wcm.components.image.v1,
core.wcm.components.list.v1,
core.wcm.components.breadcrumb.v1,
core.wcm.components.form.container.v1,
core.wcm.components.form.text.v1
]"
次の手順に進む前に、プロキシコンポーネントとクライアントライブラリが AEM 環境にデプロイされていることを確認してください。
テンプレートエディターでは、次の手順を実行します。
これで作業は完了です。編集したテンプレートから作成したページで、新しく作成したコンポーネントを使用できるようになります。
関連項目: