レイアウトコンテナおよびレイアウトモードの設定 configuring-layout-container-and-layout-mode

レスポンシブレイアウトは、レスポンシブ web デザインを実現するためのメカニズムです。レスポンシブレイアウトを使用すると、ユーザーが使用するデバイスのレイアウトとサイズに応じて web ページを作成できます。

AEM は、次のメカニズムを組み合わせて使用することにより、ページのレスポンシブレイアウトを実現します。

これらのレスポンシブグリッドメカニズムを使用すると、次のことができます。

レスポンシブエミュレーターの設定 configuring-the-responsive-emulator

このタスクをおこなうと、自分のサイトにレスポンシブ​ エミュレーター ​を表示できます。

エミュレーション用のページコンポーネントの登録 register-your-page-components-for-emulation

エミュレーターがページをサポートできるようにするには、ページコンポーネントを登録する必要があります。 詳しくは、 シミュレーション用のページコンポーネントの登録.

デバイスグループの指定 specify-the-device-groups

エミュレーターの「デバイス」リストに表示されるデバイスグループを指定するには、次を参照してください。 デバイスグループの指定.

指定したデバイスグループにサイトをリンクする link-your-site-to-the-specified-device-groups

エミュレーターを含めるには、サイトをデバイスグループにリンクする必要があります。「デバイス」リストの追加（クラシック UI とタッチ操作向け UI の両方）を参照してください。

サイトのレイアウトモードのアクティベート activate-layout-mode-for-your-site

この手順は、サイトで​ レイアウト ​モードを有効にするために使用します。

ブレークポイントの設定 configure-the-breakpoints

ブレークポイントには次の特徴があります。

CRXDE Lite または XML を使用して定義できます。

CRXDE Lite configuring-breakpoints-using-crxde-lite

XML を使用したブレークポイントの設定 configuring-breakpoints-using-xml

ブレークポイントは、該当するテンプレート（またはコンテンツ）フォルダーの下で .context.html の <jcr:content> セクション内に配置されます。

定義の例：

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

レスポンシブ情報プロバイダーの追加 add-a-responsive-information-provider

以下の cq:infoProviders ノード構造を、親ページコンポーネントにコピーします。

/libs/foundation/components/page/cq:infoProviders/responsive

ページのコンポーネントサイズ変更の有効化 enable-component-resizing-for-the-page

この手順は、レイアウト ​モードでコンポーネントのサイズ変更を可能にするために必要です。

レイアウトコンテナをメインの Parsys に設定 set-layout-container-as-main-parsys

ページのメイン parsys をレイアウトコンテナに設定するには、parsys を次のように定義する必要があります。

wcm/foundation/components/responsivegrid

次のいずれかで、

以下に、定義を説明する 2 つの例を示します。

レスポンシブ CSS を含める include-the-responsive-css

LESS を使用するブレークポイントの CSS css-for-breakpoints-using-less

AEMは、必要な CSS の一部を生成するために LESS を使用します。これらは、プロジェクトに含める必要があります。

また、 クライアントライブラリ 追加の設定および関数呼び出しを提供する。 以下の LESS の抽出は、プロジェクトに追加する必要がある最小限の要素の例です。

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

基本グリッドの定義は、次の場所にあります。

/libs/wcm/foundation/clientlibs/grid/grid_base.less

スタイル設定に関する考慮事項 styling-considerations

レスポンシブコンテナ内に保持されているコンポーネントは、レスポンシブHTMLのサイズに従って（各グリッド DOM 要素と共に）サイズ変更されます。 したがって、このような状況では、固定幅（含まれる）の DOM 要素の定義を避ける（または更新する）ことをお勧めします。

次に例を示します。

サイズ変更とアダプティブ画像の準拠 resizing-and-adaptive-image-compliance

グリッド内のコンポーネントのサイズを変更すると、次のリスナーが適宜トリガーになります。

レスポンシブグリッドに含まれているアダプティブ画像のコンテンツを適切にサイズ変更および更新するには、REFRESH_PAGE リスナーに設定されている afterEdit を、含まれているすべてのコンポーネントの EditConfig ファイルに追加する必要があります。

次に例を示します。

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

アダプティブ画像のメカニズムは、現在のウィンドウサイズに適した画像の選択を制御するスクリプトを介して使用可能になります。DOM の準備が整った後、または専用のイベントを受信するとアクティベートされます。現時点のところ、ユーザーのアクションの結果を適切に反映するには、ページを更新する必要があります。

ページ用のレイアウトコンテナコンポーネントの有効化 enable-the-layout-container-component-for-page

これらのタスクを使用すると、作成者は レイアウトコンテナ コンポーネントをページ上に配置します。

ページ編集用のレイアウトコンテナコンポーネントの有効化 enable-the-layout-container-component-for-page-editing

作成者がさらに多くのレスポンシブグリッドをコンテンツページに追加できるようにするには、ページのレイアウトコンテナコンポーネントを有効にする必要があります。これは、次のいずれかを使用して行います。

レイアウトコンテナのグリッドの設定 configure-the-grid-of-the-layout-container

レイアウトコンテナの特定のインスタンスごとに使用できる列数を設定できます。