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

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

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

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

エミュレーターの有効化 enabling-emulator

プロジェクトアーキタイプと標準サイトテンプレートは、エミュレーターを使用するために既に有効になっています。コアコンポーネントやアーキタイプに基づいていない独自のコンテンツを開発した場合、これらの機能を活用しながらコンポーネントを開発することができます。この方法について詳しくは、レスポンシブデザインのドキュメントを参照してください。

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

レイアウト ​モードでは、エミュレーターを使用して、様々なデバイスに合わせてコンテンツのレイアウトを調整できます。WKND サンプルサイトでは、レイアウト ​モードが既に有効になっています。独自のサイトを有効にするには、次の手順に従います。

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

ブレークポイントは、レスポンシブデザインに不可欠で、コンテンツをターゲットデバイスに合わせて調整する方法とタイミングを定義します。ただし、導入するブレークポイントが増えると、作成者がコンテンツを調整するために行う作業が増えるため、注意してください。多くの場合、常に存在するデフォルトのブレークポイントを含め、2 つのブレークポイントで十分です。アドビでは、デフォルトを含めて 3 つ以上のブレークポイントを作成しないこと、つまり cq:responsive/breakpoint の下に 2 つ以上のノードを作成しないことをお勧めします。

ブレークポイントは、新しいプロジェクトと既存のプロジェクトの両方で考慮する必要があります。

継承のため、コンテンツのルートページに対してのみ行う必要があります。

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>

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

レイアウト ​モードでのコンポーネントのサイズ変更は、レスポンシブデザインの重要な部分で、WKND サンプルサイトで使用できます。独自のサイトを有効にするには、次の手順に従います。

レイアウトコンテナをメインの 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

効果的なレスポンシブレイアウトを実現するには、コンテンツ作成者がレイアウトコンテナコンポーネントのインスタンスをページにドラッグできる必要があります。これは、WKND サンプルサイトで既に有効になっています。独自のサイトを有効にするには、次の手順に従います。

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

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

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

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