レスポンシブ レイアウトは、レスポン シブなWebデザインを実現するメカニズムです。レスポンシブレイアウトを使用すると、ユーザーが使用するデバイスのレイアウトとサイズに応じて Web ページを作成できます。
これは、アダプティブ Web デザイン(主にクラシック UI 用)を使用するモバイル Web メカニズムと比較できます。
AEM は、次のメカニズムを組み合わせて使用することにより、ページのレスポンシブレイアウトを実現します。
レイアウトコンテナコンポーネント
このコンポーネントは、レスポンシブグリッド内にコンポーネントを追加および配置できるグリッド段落システムを提供します。ページのデフォルトのparsysとして使用したり、コンポーネントブラウザで作成者が使用できるようにしたりできます。
デフォルトのレイアウトコンテナコンポーネントは次の場所で定義されます。
/libs/wcm/foundation/components/responsivegrid
レイアウトコンテナは次のように定義できます。
ユーザーがページに追加できるコンポーネントとして。
ページのデフォルトの parsys として。
両方.
ページの標準としてレイアウトコンテナを使用できますが、その中にレイアウトコンテナを追加することもできます。例えば、列の制御を行う場合に使用します。
レイアウト
モードレイアウトコンテナをページ上に配置したら、
レ イアウトモードを使用して、レスポンシブグリッド内にコンテンツを配置します。
エミュレーター
コンポーネントをインタラクティブにサイズ変更することによってデバイスやウィンドウのサイズに従ってレイアウトを再編成する、レスポンシブ Web サイトを作成および編集できます。その後、エミュレーターを使用して、コンテンツのレンダリング方法を確認できます。
レイアウトコンテナコンポーネントはクラシック UI でも使用できますが、完全な機能を利用できるのはタッチ対応 UI のみです。
これらのレスポンシブグリッドメカニズムを使用すると、次のことが可能になります。
標準インストールでは、レスポンシブレイアウトは We.Retail リファレンスサイト用に設定されています。他のページのレイアウトコンテナコンポーネントをアクティベートする必要があります。
このタスクをおこなうと、自分のサイトにレスポンシブエミュレーターを表示できます。
エミュレーターでページをサポートできるようにするには、ページコンポーネントを登録する必要があります。シミュレーション用のページコンポーネントの登録を参照してください。
エミュレーターの「デバイス」リストに表示されるデバイスグループを指定するには、デバイスグループの指定を参照してください。
エミュレーターを含めるには、サイトをデバイスグループにリンクする必要があります。「デバイス」リストの追加(クラシック UI とタッチ操作向け UI の両方)を参照してください。
これらの手順は、サイトでレイアウトモードを有効にするために使用します。
ブレークポイントには次の特徴があります。
レスポンシブデザインで使用します。
定義可能です。
タイトルと幅を定義します。
エミュレーターを使用しているときに、ページエディターの上部にマーカーとして表示されます。
親ノード階層から継承され、任意に上書きできます。
最後に設定されたブレークポイントより上のすべてに対応するデフォルト(標準)のブレークポイントがあります。**
CRXDE Lite または XML を使用して定義できます。
新しいプロジェクトを設定する場合:
既存のプロジェクト(既存のコンテンツを含む)を移行する場合:
継承が動作している間は、コンテンツのルートページに制限できます。
CRXDE Lite(または同等のツール)を使用して、以下のいずれかに移動します。
jcr:content
ノード。jcr:content
の下でノードを作成します。
cq:responsive
nt:unstructured
この下に、以下のノードを作成します。
breakpoints
nt:unstructured
breakpoints ノードの下に、任意の数のブレークポイントを作成できます。それぞれ、以下のプロパティを持つ単一のノードとして定義します。
<descriptive name>
nt:unstructured
String
* <descriptive title seen in Emulator>
*Decimal
* <value of breakpoint>
*ブレークポイントは、.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>
これは、ページコンポーネントが基盤ページコンポーネントに基づいていない場合にのみ必要です。
以下の cq:infoProviders
ノード構造を、親ページコンポーネントにコピーします。
/libs/foundation/components/page/cq:infoProviders/responsive
レイアウトモードでコンポーネントのサイズを変更できるように、これらの手順は必須です。
ページのメイン 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" />
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
レスポンシブグリッドに含まれるアダプティブ画像のコンテンツのサイズを適切に変更して更新するには、afterEdit
リスナーに設定された<a0/>を、含まれるすべてのコンポーネントのEditConfig
ファイルに追加する必要があります。REFRESH_PAGE
次に例を示します。
<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />
アダプティブ画像のメカニズムは、ウィンドウの現在のサイズに適した画像の選択を制御するスクリプトを介して使用可能になります。DOM の準備が整った後、または専用のイベントを受信したときにアクティベートされます。現時点のところ、ユーザーのアクションの結果を適切に反映するには、ページを更新する必要があります。
作成者と発行で正しく機能するには、カスタムスタイルシートclientlibをヘッダーの一部として読み込む必要があります。
このタスクにより、作成者は、レイアウトコンテナコンポーネントのインスタンスをページにドラッグできます。
作成者がさらに多くのレスポンシブグリッドをコンテンツページに追加できるようにするには、ページのレイアウトコンテナコンポーネントを有効にする必要があります。これは、次のいずれかを使用しておこないます。
オーサー環境
デザインモードを使用して、ページのレイヤーコンテナコンポーネントをアクティベートします。
コンポーネント定義
コンポーネントを定義するときに、allowedComponent
または静的インクルードを使用します。
レイアウトコンテナの特定のインスタンスごとに、使用可能な列の数を設定できます。
オーサー環境
レイアウトコンテナの特定のインスタンスごとに、使用可能な列の数を設定できます。
これをおこなうには、デザインモードを使用して、必要なコンテナのデザインダイアログを開きます。ここで、配置やサイズ設定に使用できる列の数を指定できます。デフォルトは 12 です。
XML
レスポンシブグリッドの定義は次の場所で指定します。
etc/design/<*your-project-name*>/.content.xml
以下のパラメーターを定義できます。
使用可能な列の数:
columns="{String}8"
現在のコンポーネントに追加できるコンポーネント:
components="[/libs/wcm/foundation/components/responsivegrid, ...