コンポーネントの概要

このページでは、ページオーサリングで使用されるコンポーネントなど、Adobe Experience Manager(AEM)のコンポーネントの概要を示します。

コンポーネントとは

  • Webサイトにコンテンツを表示するための特定の機能を実現するモジュラー型ユニット。
  • 再利用可能。
  • リポジトリの1つのフォルダー内に自己完結型のユニットとして開発。
  • 非表示の設定ファイルを持ちません。
  • 他のコンポーネントを組み込むことができます。
  • AEM システム内であれば、どの場所でも実行できます。特定のコンポーネントにおいてのみ実行できるようにすることもできます。
  • 標準化されたユーザーインターフェイスがあります。
  • 設定可能な編集動作がある。
  • Granite UIコンポーネントに基づくサブ要素を使用して構築されたダイアログボックスを使用する
  • Are developed using HTL (recommended) or JSP.
  • デフォルトの機能を拡張するカスタマイズされたコンポーネントを作成するために開発できます。

コンポーネントはモジュールなので、次のことができます。

  • ローカルインスタンスで新しいコンポーネントを開発する。
  • テスト環境に展開します。
  • ライブオーサリング環境にデプロイする。そこで、作成者や管理者のコンテンツの追加および設定を許可します。
  • ライブパブリッシュ環境にデプロイします。この画像を使用して、Webサイトの訪問者向けにコンテンツをレンダリングします。 また、特定のコンポーネント(コミュニティ用など)がユーザーからの入力を受け入れます。

各 AEM コンポーネント:

  • リソースタイプです。
  • 特定の機能を完全に実現するスクリプトの集まりです。
  • Can function in isolation, meaning either within AEM or a portal.

AEM 内の既成のコンポーネント

AEM には、次のような包括的な機能を提供する、](/docs/experience-manager-65/sites-authoring/default-components.html?lang=ja)すぐに使用できる様々なコンポーネント[が付属しています。

  • 段落システム ( parsys)
  • Page ( responsivegrid - touch-enabled UI only)
  • テキスト
  • 画像(説明テキスト付き)
  • ツールバー

提供されるサンプル We.Retail Web サイト内で提供されるコンポーネントおよびそれらの使用方法は、コンポーネントの実装および使用方法の例です。コンポーネントは、すべてのソースコードと共に提供されており、そのまま使用することも、コンポーネントを変更または拡張する出発点として使用することもできます。

コアコンポーネントおよび基盤コンポーネント

アドビが提供する AEM コンポーネントには 2 つのセットがあります。

コアコンポーネント はAEM 6.3で導入され、オファーの柔軟で豊富な機能を備えたオーサリング機能を備えています。 The We.Retail reference site illustrates how the core components can be used and represent the current best-practices of component development.

基盤コンポーネント​は、多くのバージョンの AEM で使用でき、標準 AEM インストールでそのまま使用できます。現在もサポートされていますが、ほとんどの機能は非推奨となり、拡張されなくなり、既存のテクノロジーに基づいています。

メモ

コアコンポーネントは、コンポーネントデザインおよび開発の現在のベストプラクティスを示し、リファレンス実装として提供されます。

AEM最新化ツール (英語)は、コアコンポーネントへの移行に役立ちます。

利用可能なコンポーネントの表示

AEM インスタンスで利用可能なすべてのコンポーネントの概要を確認するには、コンポーネントコンソールを使用します。

または、CRXDE Lite を使用して、リポジトリで利用可能なすべてのコンポーネントのリストを取得することもできます。

  1. In CRXDE Lite, select Tools from the toolbar, then Query, which opens the Query tab.

  2. クエリー」タブで、「XPathタイプ​」として「」を選択します。

  3. クエリ​入力フィールドに次の文字列を入力します。

    /element(*, cq:Component)

  4. Click Execute and the components are listed.

その他のリソース

以下のページでは、これらのコンポーネント(およびその他のコンポーネント)の開発に関する詳細を説明します。

このページ