Show Menu
TOPICS×

コンテナコンポーネント

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

使用方法

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

バージョンと互換性

このドキュメントでは、コンテナコンポーネントの現在のバージョン(2019 年 6 月にコアコンポーネントのリリース 2.5.0 で導入された v1)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コンポーネントのバージョン
AEM 6.3
AEM 6.4
AEM 6.5
v1
互換性あり
互換性あり
互換性あり
コアコンポーネントのバージョンとリリースについて詳しくは、 コアコンポーネントのバージョン を参照してください。

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

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

技術的詳細

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

設定ダイアログ

設定ダイアログでは、コンテナアイテムそのものと、ページの訪問者に対するコンテナアイテムの動作および表示をコンテンツ作成者が定義できます。
  • レイアウト
    - このオプションはコンテナコンポーネントの動作またはレイアウト動作を定義します。
    • シンプル
      - コンテナをシンプルなコンポーネントコレクションとして定義します。
    • レスポンシブグリッド
      - コンテナを AEM レスポンシブグリッド として定義します。
  • ID
    - コンポーネントに適用する HTML ID 属性を定義します。
  • 背景色
    - 設定に応じて 、自由形式の RGB 値として定義するか、カラーピッカーを使用して定義します。
  • 背景画像
    - 設定に応じて 、コンテナの背景色を定義します。

デザインダイアログ

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

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

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

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

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

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

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

「背景」タブ

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

「スタイル」タブ

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