コアコンポーネントの開発

コアコンポーネントを使用すべき状況

コアコンポーネントはまったく新しい技術であり、複数のメリットがあるので、新しい AEM プロジェクトではコアコンポーネントを使用することをお勧めします。既存のプロジェクトでは、リブランディングや全体的なリファクタリングなど、より大きなプロジェクト作業の一環として移行を行うようにしてください。

そこで、アドビでは次の事項を推奨しています。

  • 新規プロジェクト
    新規プロジェクトでは、常に、コアコンポーネントを使用するよう努めます。コアコンポーネントを直接使用または拡張してプロジェクト要件を満たすことができない場合は、コアコンポーネントで規定されているコンポーネントアーキテクチャに従ってカスタムコンポーネントを作成します。他に方法がない場合を除き、基盤コンポーネントを使用しないでください。
  • 既存プロジェクト
    サイトまたはコンポーネントのリファクタリングが予定されていない限り、基盤コンポーネントを使用し続けることをお勧めします。
    ほとんどの既存プロジェクトで広く使用されているので、基盤コンポーネントは引き続きサポートされます。
  • 新規のカスタムコンポーネント
    既存のコアコンポーネントをカスタマイズしてよいかどうかを評価します。
    カスタマイズできない場合は、コンポーネントのガイドラインに従って新規のカスタムコンポーネントを作成することをお勧めします。
  • 既存のカスタムコンポーネント
    コンポーネントが期待どおりに動作する場合は、それらのコンポーネントをそのままにしておきます。

    そうでない場合は、上記の「新規のカスタムコンポーネント」を参照してください。

コアコンポーネントの利用でプロジェクトを成功に導く方法

コアコンポーネントは、強力で柔軟性が高く、使いやすく、カスタマイズも簡単です。いくつかの主要なガイドラインに従えば、コアコンポーネントを利用したプロジェクトを確実に成功させることができます。

コアコンポーネントへの移行

新規プロジェクトは、コアコンポーネントで実装する必要があります。ただし、既存プロジェクトでは通常、基盤コンポーネントが広範囲にわたって実装されています。

基盤コンポーネントからの移行

既存プロジェクトに関する大規模な作業（リブランディングや全体的なリファクタリングなど）は、多くの場合、コアコンポーネントへの移行のチャンスとなります。このような移行を容易にするために、アドビでは、コアコンポーネントと最新の AEM テクノロジーの導入を促進するための多数の移行ツールを提供しています。

AEM Modernization Tools を使用すると、以下の変換を容易に行えるようになります。

  • 静的テンプレートから編集可能テンプレートへ
  • デザイン設定からポリシーへ
  • 基盤コンポーネントからコアコンポーネントへ
  • クラシック UI からタッチ操作対応 UI へ

これらのツールの使用方法について詳しくは、ぞれぞれのドキュメントを参照してください。

メモ

AEM Modernize Tools はコミュニティの取り組みであり、アドビによるサポートまたは保証の対象外です。

AEM as a Cloud Service への移行を通じた移行

AEM as a Cloud Service には最新版のコアコンポーネントが自動的に搭載されているので、オンプレミスの AEM から移行する場合は、プロジェクトの pom.xml ファイルでコアコンポーネントへの依存関係を削除する必要があります。

プロキシは必要なスーパータイプを指しており、そのスーパータイプのパスにバージョンが含まれているので、プロキシコンポーネントは引き続きこれまでどおり機能します。このようにして、依存関係を削除するだけで、コアコンポーネントはオンプレミスの場合と同じように AEM as a Cloud Service で動作させることができます。

他の AEM as a Cloud Service プロジェクトと同様に、AEM SDK JAR への依存関係も追加する必要があります。これはコアコンポーネントに限ったことではありませんが、いずれにせよ必要なことです。

<dependency>
   <groupId>com.adobe.aem</groupId>
   <artifactId>aem-sdk-api</artifactId>
</dependency>

AEM as a Cloud Service プロジェクトについて詳しくは、AEM プロジェクトの構造を参照してください。

コアコンポーネントのサポート

コアコンポーネントは AEM に不可欠な部分なので、クイックスタートの一部として提供される場合と同じ条件の下、現状のままでサポートされます。

他の AEM 製品機能と同様、原則的としてまず、コンポーネントの廃止が発表されてから、最短でその次のリリースで削除されます。これにより、サポートが終了する前に、コンポーネントの新バージョンに移行する猶予期間として少なくとも 1 回分のリリースサイクルを確保できます。

各コンポーネントのバージョンには、サポートされる AEM バージョンが明記されています。ある AEM バージョンのサポートが停止されると、その AEM バージョンでのコアコンポーネントのサポートも停止されます。

コンポーネントのカスタマイズのサポートについて詳しくは、コアコンポーネントのカスタマイズを参照してください。

技術的機能

コアコンポーネントと基盤コンポーネントの違いを次の表に大まかに示します。

オーサリング機能とそれらの機能を事前に設定するためのオプションについて詳しくは、コアコンポーネントを使用したオーサリングを参照してください。

機能 コアコンポーネント 基盤コンポーネント
ロジックの実装 Sling モデル注釈の付いた Java POJO JSP コード
マークアップ定義 HTML テンプレート言語（HTL）構文 JSP コード
XSS サニタイズ HTL で自動化 ほぼ手動
CSS クラスの命名 ブロック要素修飾子（BEM）表記（リリース 2.0.0 時点）に基づく、標準化された命名規則 カスタムスキーム
ダイアログの定義 Coral 3 Coral 2 + クラシック UI
JSON 出力 Jackson シリアル化を使用している Sling モデルエクスポーター デフォルト Sling サーブレット
バージョン管理 モデルと HTL の場合 なし
テスト 単体テスト + 統合テスト 統合テスト
配信 公開 GitHub 経由 クイックスタートを通じて
ライセンス Apache ライセンス アドビ固有
貢献度 プル要求を通じて 不可能
アクセシビリティ WCAG 2.0 AA 標準に完全に準拠 WCAG 2.0 AA 標準に部分的に準拠

コンポーネントリスト

使用可能なコアコンポーネント（API へのリンク）と、コアコンポーネントに置き換わる基盤コンポーネントの一覧を次の表に示します。

コアコンポーネント 説明 置き換わる基盤コンポーネント
ページ テンプレートエディターに対応するレスポンシブページ /libs/foundation/components/page /libs/wcm/foundation/components/page
パンくず ページ階層のナビゲーション /libs/foundation/components/breadcrumb
タイトル H1 ~ H6 タイトル /libs/foundation/components/title /libs/wcm/foundation/components/title
テキスト リッチテキスト /libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text
画像 最適なレンディションサイズのスマート遅延読み込み /libs/foundation/components/image /libs/foundation/components/adaptiveimage /libs/foundation/components/logo /libs/foundation/components/mobileimage /libs/foundation/components/mobilelogo /libs/wcm/foundation/components/image
リスト ページのリスト /libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list
ソーシャルメディア共有 Facebook および Pinterest の共有ウィジェット -
フォームコンテナ レスポンシブフォームの段落システム /libs/foundation/components/form/start /libs/foundation/components/form/end
フォームテキスト テキスト入力フィールド /libs/foundation/components/form/text /libs/foundation/components/form/password
フォームオプション 複数オプション入力フィールド /libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown
フォーム非表示 非表示の入力フィールド /libs/foundation/components/form/hidden
フォームボタン 送信ボタンまたはカスタムボタン /libs/foundation/components/form/submit
ナビゲーション ネストしたページ階層を一覧表示するサイトナビゲーションコンポーネント /libs/foundation/components/topnav /libs/foundation/components/mobiletopnav
言語ナビゲーション グローバル言語構造を一覧表示する言語および国の切り替え機能 -
クイック検索 結果をドロップダウンメニューでインプレース候補として表示する検索コンポーネント /libs/foundation/components/search
ティーザー 画像、タイトル、リッチテキスト、追加コンテンツや他のアクションへのリンクを使用して、コンテンツ作成者が詳細なコンテンツへのティーザーを容易に作成できるようにする -
タブ コンテンツ作成者がページコンテンツを複数のタブに整理できるようにする -
カルーセル コンテンツ作成者がコンテンツをスライドの回転カルーセルに整理できるようにする /libs/foundation/components/carousel
コンテンツフラグメント コンテンツフラグメントを表示できるようにする -
コンテンツフラグメントリスト コンテンツフラグメントのリストを表示できるようにする -
区切り文字 ページのコンテンツを区切る -
アコーディオン 折りたたみ可能なアコーディオンの形式にコンテンツパネルを整理する -
コンテナ コンテナ内のコンポーネントを整理する -
ボタン ページ上にボタンを作成する -
ダウンロード ダウンロード可能なアセットをページに追加する -
エクスペリエンスフラグメント エクスペリエンスフラグメントをページに追加する /libs/cq/experience-fragments/editor/components/experiencefragment
埋め込み ページ内に外部リソースを埋め込む -
プログレスバー 目標に対する進捗を視覚的に表現する -
PDF ビューア ページに PDF ドキュメントを表示します。 -

コアコンポーネントのアップグレード

バージョン管理されたコンポーネントのメリットの 1 つは、新しい AEM バージョンへの移行と新しいコンポーネントバージョンへの移行を切り離すことができる点です。また、新しいコンポーネントバージョンが使用可能になった場合は、コンポーネントごとに新バージョンへ個別に移行できます。

コアコンポーネントのバージョンが移行先の新しい AEM バージョンもサポートしている場合、新しい AEM バージョンへの移行はコアコンポーネントの動作に影響を与えません。廃止または削除された API を使用していない限り、コアコンポーネントのカスタマイズ部分も影響を受けません。

コアコンポーネントを新しいバージョンに移行しても、コンポーネントの動作には影響しませんが、ページ作成者向けの新しい機能が導入されることはあります。これらの機能については、デフォルトの動作が望ましくない場合、テンプレートエディターで何らかの設定が必要になる可能性があります。一方、カスタマイズ部分は適合が必要になる可能性があります。詳しくは、コアコンポーネントのカスタマイズを参照してください。

このページ