Show Menu
トピック×

レイアウトコンテナおよびレイアウトモードの設定

レスポンシブレイアウト は、レスポンシブWebデザインを実 現するメカニズムです 。 レスポンシブレイアウトを使用すると、ユーザーが使用するデバイスのレイアウトとサイズに応じて Web ページを作成できます。
これは、アダプティブ Web デザイン(主にクラシック UI 用)を使用する モバイル Web メカニズムと比較できます。
AEM は、次のメカニズムを組み合わせて使用することにより、ページのレスポンシブレイアウトを実現します。
  • レイアウトコンテナ​ コンポーネント
    このコンポーネントは、レスポンシブグリッド内にコンポーネントを追加および配置できるグリッド段落システムを提供します。ページのデフォルトのparsysとして使用したり、コンポーネントブラウザの作成者が使用できるようにしたりできます。
    • The default Layout Container component is defined under:
      /libs/wcm/foundation/components/responsivegrid
    • レイアウトコンテナは次のように定義できます。
      • ユーザーがページに追加できるコンポーネントとして。
      • ページのデフォルトの parsys として。
      • 両方.
        ページの標準としてレイアウトコンテナを設定し、その中にレイアウトコンテナを追加できます。例えば、列の制御を行う場合などです。
  • レイアウトモ ​ードレイアウトコンテナをページ上に配置したら、レイアウトモードを使用し​ 、レスポンシブグリッド内にコンテンツを配置できます。
  • エミュレーター​ コンポーネントをインタラクティブにサイズ変更することによってデバイスやウィンドウのサイズに従ってレイアウトを再編成する、レスポンシブ Web サイトを作成および編集できます。その後、エミュレーターを使用して、コンテンツのレンダリング方法を確認できます。
レイアウトコンテナ ​コンポーネントはクラシック UI でも使用できますが、完全な機能を利用できるのはタッチ対応 UI のみです。
これらのレスポンシブグリッドメカニズムを使用すると、次のことが可能になります。
  • ブレークポイント(デバイスのグループ分けを指示)を使用して、デバイスレイアウトに基づいて様々なコンテンツ動作を定義する。
  • デバイスグループに基づいてコンポーネントを非表示にする(どのブレークポイントでコンポーネントを非表示にするかを定義する)。
  • グリッドに対して水平方向のスナップを使用(グリッドにコンポーネントを配置し、必要に応じてサイズ変更し、横方向や上限方向への折たたみやリフローのタイミングを定義)する。
  • 列の制御を実現する。
標準インストールでは、レスポンシブレイアウトは We.Retail リファレンスサイト 用に設定されています。他のページの レイアウトコンテナコンポーネントをアクティベート する必要があります。

レスポンシブエミュレーターの設定

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

エミュレーション用のページコンポーネントの登録

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

デバイスグループの指定

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

サイトのレイアウトモードのアクティベート

These procedures are used to enable the Layout mode on your site.

ブレークポイントの設定

ブレークポイント には次の特徴があります。
  • レスポンシブデザインで使用します。
  • 定義可能です。
    • ページテンプレート上で定義した場合、設定は該当するテンプレートで作成されたすべてのページにコピーされます。
    • ページノード上で定義した場合、設定はすべての子ページに継承されます。
  • タイトルと幅を定義します。
    • タイトルは、汎用デバイスグループを、必要に応じて向きを含めて説明します。例えば、phone、tablet、tabletlandscape などです。
    • 幅は、該当する汎用デバイスグループの最大幅をピクセル単位で定義します。例えば、ブレークポイント phone の幅が 768 である場合、これが電話デバイスに使用されるレイアウトの最大幅です。
  • エミュレーターを使用しているときに、ページエディターの上部にマーカーとして表示されます。
  • 親ノード階層から継承され、任意に上書きできます。
  • 最後に設定されたブレークポイントより上のすべてに対応するデフォルト(標準)のブレークポイントがあります。**
CRXDE Lite または XML を使用して定義できます。
新しいプロジェクトを設定する場合:
  • テンプレートにブレークポイントを追加する必要があります。
既存のプロジェクト(既存のコンテンツを含む)を移行する場合:
  • テンプレートにブレークポイントを追加する必要があります。
  • 既存のページに同じブレークポイントを追加する 継承が動作している間は、これをコンテンツのルートページに制限できます。

CRXDE Lite を使用したブレークポイントの設定

  1. CRXDE Lite(または同等のツール)を使用して、以下のいずれかに移動します。
    • テンプレート定義。
    • The jcr:content node of your page.
  2. Under jcr:content create the node:
    • 名前: cq:responsive
    • タイプ: nt:unstructured
  3. この下に、以下のノードを作成します。
    • 名前: breakpoints
    • タイプ: nt:unstructured
  4. breakpoints ノードの下に、任意の数のブレークポイントを作成できます。それぞれ、以下のプロパティを持つ単一のノードとして定義します。
    • 名前: <descriptive name>
    • タイプ: nt:unstructured
    • タイトル: String * <descriptive title seen in Emulator> *
    • 幅: Decimal * <value of breakpoint> *

XML を使用したブレークポイントの設定

Breakpoints are located inside the <jcr:content> section of the .context.html under the appropriate template (or content) folder.
定義の例は以下のとおりです。
<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>

レスポンシブ情報プロバイダーの追加

これは、ページコンポーネントが基盤ページコンポーネントに基づいていない場合にのみ必要です。
以下の cq:infoProviders ノード構造を、親ページコンポーネントにコピーします。
/libs/foundation/components/page/cq:infoProviders/responsive

ページのコンポーネントサイズ変更の有効化

These procedures are required so you can resize components in the Layout mode.

レイアウトコンテナをメイン parsys として設定

ページのメイン parsys をレイアウトコンテナになるように設定するには、parsys を次のように定義する必要があります。
wcm/foundation/components/responsivegrid
以下の場所で定義します。
  • ページコンポーネント
  • ページテンプレート(今後使用するため)
以下に、定義を説明する 2 つの例を示します。
  • HTL:
    <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
    
    
  • JSP:
    <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
    
    

レスポンシブ CSS を含める

LESS を使用したブレークポイントの CSS

AEM では、LESS を使用して、必要な CSS の一部を生成します。これらをプロジェクトに含める必要があります。
さらに、 クライアントライブラリ を使用して、設定および関数呼び出しを追加する必要があります。以下の 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

スタイル設定の考慮事項

レスポンシブコンテナ内に格納されているコンポーネントは、レスポンシブグリッドサイズに従って(それぞれの HTML DOM 要素と共に)サイズ変更されます。したがって、このような状況では、固定幅の(制限された)DOM 要素の定義を回避(または更新)することをお勧めします。
次に例を示します。
  • 変更前:
    • width=100px
  • 変更後:
    • max-width=100px

サイズ変更とアダプティブ画像の整合性

グリッド内でコンポーネントをサイズ変更すると、以下のリスナーが適宜トリガーされます。
  • beforeedit
  • beforechildedit
  • afteredit
  • afterchildedit
To properly resize and update the content of an adaptive image included in a responsive grid, you need to add an afterEdit set to REFRESH_PAGE listener into the EditConfig file of every contained component.
次に例を示します。
<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />
アダプティブ画像のメカニズムは、ウィンドウの現在のサイズに適した画像の選択を制御するスクリプトを介して使用可能になります。DOM の準備が整った後、または専用のイベントを受信したときにアクティベートされます。現時点のところ、ユーザーのアクションの結果を適切に反映するには、ページを更新する必要があります。
作成者と発行で正しく機能するには、カスタムスタイルシートclientlibをヘッダの一部として読み込む必要があります。

ページ用にレイアウトコンテナコンポーネントを有効化

このタスクにより、作成者は、 レイアウトコンテナ ​コンポーネントのインスタンスをページにドラッグできます。

ページ編集用にレイアウトコンテナコンポーネントを有効化

作成者がさらに多くのレスポンシブグリッドをコンテンツページに追加できるようにするには、ページのレイアウトコンテナコンポーネントを有効にする必要があります。これは、次のいずれかを使用しておこないます。
  • オーサー環境
    デザインモード を使用して、ページの​ レイヤーコンテナ ​コンポーネントをアクティベートします。
  • コンポーネント定義
    コンポーネントを定義するときに、 allowedComponent または静的インクルードを使用します。

レイアウトコンテナのグリッドの設定

レイアウトコンテナの特定のインスタンスごとに、使用可能な列の数を設定できます。
  1. オーサー環境
    レイアウトコンテナの特定のインスタンスごとに、使用可能な列の数を設定できます。
    これをおこなうには、 デザインモード を使用して、必要なコンテナのデザインダイアログを開きます。ここで、配置やサイズ設定に使用できる列の数を指定できます。デフォルトは 12 です。
  2. XML
    レスポンシブグリッドの定義は次の場所で指定します。
    etc/design/<*your-project-name*>/.content.xml
    以下のパラメーターを定義できます。
    • 使用可能な列の数:
      • columns="{String}8"
    • 現在のコンポーネントに追加できるコンポーネント:
      • components="[/libs/wcm/foundation/components/responsivegrid, ...