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

レイアウトコンテナおよびレイアウトモードの設定方法について学びます。

概要 overview

レスポンシブレイアウトは、レスポンシブ 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

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

ネストされたレスポンシブグリッド nested-responsive-grids

プロジェクトのニーズをサポートするために、レスポンシブグリッドのネストが必要になる場合があります。ただし、アドビが推奨するベストプラクティスは、構造をできるだけフラットに保つことであることに注意してください。

ネストされたレスポンシブグリッドの使用を回避できない場合は、次の点を確認してください。

これには、ページテンプレートのすべての構造コンテナが含まれます。

内側のコンテナの列番号は、外側のコンテナの列番号より大きくしないでください。次の例では、この条件を満たしています。デフォルト（デスクトップ）画面では外側のコンテナの列番号は 8 ですが、内側のコンテナの列番号は 4 です。

container
  @layout = responsiveGrid
  cq:responsive
    default
      @offset = 0
      @width = 8
  container
  @layout = responsiveGrid
    cq:responsive
      default
        @offset = 0
        @width = 4
    text
      @text =" Text Column 1"

<div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--8 aem-GridColumn--offset--default--0">
  <div id="container-c9955c233c" class="cmp-container">
    <div class="aem-Grid aem-Grid--8 aem-Grid--default--8 ">
      <div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <div id="container-8414e95866" class="cmp-container">
          <div class="aem-Grid aem-Grid--4 aem-Grid--default--4 ">
            <div class="text aem-GridColumn aem-GridColumn--default--4">
              <div data-cmp-data-layer="..." id="text-1234567890" class="cmp-text">
                <p>Text Column 1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>