AEM開発者ブログ by YAMATO

アドビ社のデリバリーパートナー大和株式会社のAEM開発者ブログです。

Core Component (プロローグ)

こんにちは、大和株式会社の李です。
今回の開発者ブログは「コアコンポーネント(Core Component)」について記述します。

Adobeの公式ドキュメントやCore Componentライブラリの各コンポーネント紹介や構築手順を補完して、コアコンポーネントを使っていざ!開発!となった時に、各Core Componentでできることやどう構築すればいいのか、各コンポーネントの概要や設定についてシリーズでご紹介していきます。自分自身がコアコンポーネントに対する理解を深めるのと、AEM開発初心者の皆さんのお役に立てる事を目指して書いていきますので、よろしくお願いします!

概要

コンポーネントは、オーサリングするページのコンテンツを構成する要素です。
コアコンポーネントは、AEMで用意されているWCM(Web Contents Management)コンポーネントのセットです。コンポーネントを開発する際に構造全体を一から定義して開発するのではなく、コアコンポーネントとこれから開発するコンポーネントを比較し内容および機能が近いコアコンポーネントを継承し、拡張することがお作法とされています。

アーキテクチャ

(Adobe Experience League「コアコンポーネントのカスタマイズ」から引用)

f:id:yamato_tech:20210728133459p:plain

  • デザインダイアログでオーサーが編集ダイアログでできる機能を定義します。
  • オーサーはエディターダイアログからオーサリングします。
  • Sling Modelはビュー(テンプレート)に表示するためのコンテンツを検証・構成します。
  • Sling Modelの結果はJSONにシリアライズまたはHTLへ渡されHTMLにレンダリングされます。

コアコンポーネントのパス

AEM6.5までは、コアコンポーネントは製品とは別でインストールが必要で、そのパスは通常のカスタムコンポーネントと同様に/appsの下です。これはコアコンポーネントが、製品のバージョンアップやSPのサイクルよりも頻繁に更新されるため、/apps下で任意のタイミングで最新のパッケージを取り込めるようにしたものです。
一方、AEM as a Cloud Serviceでは、AEMそのものが頻繁に更新されるという仕組みになったことから、コアコンポーネントも/libsに含まれるようになっています。
利用しているAEMのバージョンによって、コアコンポーネントが格納されるパスが異なる点は、注意が必要です。
参考リンク:コアコンポーネントの使用 | Adobe Experience Manager

種類

2021年8月時点での、コアコンポーネントの一覧は以下の通りです。

種類 コンポーネント
Templating Navigation
Templating Language Navigation
Templating Breadcrumb
Page Authoring Title
Page Authoring Text
Page Authoring Image
Page Authoring Button
Page Authoring Teaser
Page Authoring Download
Page Authoring List
Page Authoring Experience Fragment
Page Authoring Content Fragment
Page Authoring Content Fragment List
Page Authoring Embed
Page Authoring PDF Viewer
Page Authoring Progress Bar
Page Authoring Social Sharing
Page Authoring Seperator
Container Container
Container Carousel
Container Tabs
Container Accordion
Form Container
Form Input
Form Options
Form Hidden
Form Button
Commerce Product
Commerce Product Teaser
Commerce Product Carousel
Commerce Releated Products
Commerce Product List
Commerce Search
Commerce Category Carousel
Commerce Featured Category List
Commerce Commerce Teaser
Commerce Navigation
Commerce Breadcrumb
Commerce Minicart&Checkout
Commerce Cart Trigger
Commerce Reset Password
Commerce Experience Fragment
Forms And Communications Portal Link

次のステップ

Core Componentの概要・構築手順について触れたところで、実際にどういう風にCore Componentを継承し開発するか試していきましょう。Adobe公式のWKND Tutorialの「Custom Component」を参考にすることをおすすめします。イメージコンポーネントを継承したコンポーネントを作成する例が記載されています。

最後に

次回から、各コンポーネントについて解説します。次回は「Page AuthoringのTitle(タイトルコンポーネント)」です。お楽しみに~!