こんにちは、大和株式会社の李です。
今回の開発者ブログは「コアコンポーネント（Core Component）」について記述します。
Adobeの公式ドキュメントやCore Componentライブラリの各コンポーネント紹介や構築手順を補完して、コアコンポーネントを使っていざ！開発！となった時に、各Core Componentでできることやどう構築すればいいのか、各コンポーネントの概要や設定についてシリーズでご紹介していきます。自分自身がコアコンポーネントに対する理解を深めるのと、AEM開発初心者の皆さんのお役に立てる事を目指して書いていきますので、よろしくお願いします！
概要
コンポーネントは、オーサリングするページのコンテンツを構成する要素です。
コアコンポーネントは、AEMで用意されているWCM(Web Contents Management)コンポーネントのセットです。コンポーネントを開発する際に構造全体を一から定義して開発するのではなく、コアコンポーネントとこれから開発するコンポーネントを比較し内容および機能が近いコアコンポーネントを継承し、拡張することがお作法とされています。
アーキテクチャ
(Adobe Experience League「コアコンポーネントのカスタマイズ」から引用)
- デザインダイアログでオーサーが編集ダイアログでできる機能を定義します。
- オーサーはエディターダイアログからオーサリングします。
- 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(タイトルコンポーネント)」です。お楽しみに～！
