コンテナコンポーネント

コアコンポーネントのコンテナコンポーネントを使用すると、ページ上に複数の追加コンポーネント用のコンテナを作成できます。

使用方法

コアコンポーネントのコンテナコンポーネントを使用すると、ページ上に複数の追加コンポーネント用のコンテナを作成したり、他のコンポーネントをグループ化して共通のスタイルやレイアウトを適用したりできます。

バージョンと互換性

このドキュメントでは、コンテナコンポーネントの現在のバージョン（2019年6月にコアコンポーネントのリリース 2.5.0 で導入された v1）について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネントのバージョン AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1
リリース 2.17.4 以前と互換性あり		 互換性あり 互換性あり

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

コンポーネント出力のサンプル

コンテナコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細

コンテナコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

設定ダイアログ

設定ダイアログでは、コンテナアイテムそのものと、ページの訪問者に対するコンテナアイテムの動作および表示をコンテンツ作成者が定義できます。

コンテナコンポーネントの編集ダイアログ

  • レイアウト - このオプションはコンテナコンポーネントの動作またはレイアウト動作を定義します。
    • シンプル - コンテナをシンプルなコンポーネントコレクションとして定義します。
    • レスポンシブグリッド - コンテナを AEM レスポンシブレイアウトとして定義します。
  • 背景色 - 設定に応じて、自由形式の RGB 値として定義するか、カラーピッカーを使用して定義します。
  • 背景画像 - 設定に応じて、コンテナの背景色を定義します。
  • ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

デザインダイアログ

デザインダイアログでは、コンテナコンポーネントの使用時にコンテンツ作成者に提供されるオプションをテンプレート作成者が定義できます。

「許可されるコンポーネント」タブ

「許可されるコンポーネント」タブでは、コンテンツ作成者がコンテナコンポーネントにアイテムとして追加できるコンポーネントを定義できます。

「許可されるコンポーネント」タブは、テンプレートエディターでレイアウトコンテナのポリシーやプロパティを定義する際の同じ名前のタブと同じように機能します。

「デフォルトコンポーネント」タブ

「デフォルトコンポーネント」タブでは、ページテンプレートでのデフォルトコンポーネントの定義方法と同様に、特定のアセットタイプをコンテナにドロップしたときにコンテナコンポーネントに追加されるコンポーネントを定義できます。

「レスポンシブ設定」タブ

コンテナコンポーネントのデザインダイアログの「レスポンシブ設定」タブ

  • 列 - 結果として得られるコンテナのグリッド内の列数を定義します。

「背景」タブ

コンテナコンポーネントのデザインダイアログの「背景」タブ

  • 背景画像
    • 背景画像を有効にする - コンテナの背景画像をコンテンツ作成者が定義できるようにします。
  • 背景色
    • 背景色を有効にする - コンテナの背景色をコンテンツ作成者が定義できるようにします。
    • スウォッチのみ - コンテナの背景色に事前に定義されているカラースウォッチからのみコンテンツ作成者が選択できるようにします。
      • 「背景色を有効にする」を選択した場合にのみ使用可能です。
  • 許可されるスウォッチ - コンテンツ作成者がコンテナの背景色を選択できるように事前定義済みカラーを定義します。
    • 「追加」ボタンを使用して、事前定義済みのカラースウォッチを追加します。追加が完了すると、以下の列を含むエントリがリストに追加されます。
    • 値 - RGB 値を使用して手動で色を定義します。
      • カラーピッカーをタップまたはクリックすると、個々の RGB 値を調整するか 16 進数値を定義して、色を選択しやすくなります。
    • 削除 - タップまたはクリックすると、スウォッチを削除できます。
    • 並べ替え - タップまたはクリックしてドラッグすると、スウォッチを並べ替えることができます。

「スタイル」タブ

コンテナコンポーネントでは、AEM スタイルシステムをサポートしています。

このページ