現在表示中:

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

注意:

これは、アダプティブ Web デザイン(主にクラシック UI 用)を使用するモバイル Web メカニズムと比較できます。

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

  • レイアウトコンテナコンポーネント
    このコンポーネントは、レスポンシブグリッド内にコンポーネントを追加および配置できるグリッド段落システムを提供します。ページのデフォルトの parsys として使用できるほか、コンポーネントブラウザーで作成者が使用することもできます。
    • デフォルトのレイアウトコンテナコンポーネントは以下の場所で定義します。
      /libs/wcm/foundation/components/responsivegrid
    • レイアウトコンテナは次のように定義できます。
      • ユーザーがページに追加できるコンポーネントとして。
      • ページのデフォルトの parsys として。
      • その両方。
        レイアウトコンテナをページの標準とし、この中でユーザーがレイアウトコンテナをさらに追加できるようにすることができます。例えば、列を制御する場合などです。
  • レイアウトモード
    レイアウトコンテナをページに配置したら、レイアウトモードを使用して、レスポンシブグリッド内にコンテンツを配置できます。
  • エミュレーター
    コンポーネントをインタラクティブにサイズ変更することによってデバイスやウィンドウのサイズに従ってレイアウトを再編成する、レスポンシブ Web サイトを作成および編集できます。その後、エミュレーターを使用して、コンテンツのレンダリング方法を確認できます。

警告:

レイアウトコンテナコンポーネントはクラシック UI でも使用できますが、完全な機能を利用できるのはタッチ対応 UI のみです。

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

  • ブレークポイント(デバイスのグループ分けを指示)を使用して、デバイスレイアウトに基づいて様々なコンテンツ動作を定義する。
  • デバイスグループに基づいてコンポーネントを非表示にする(どのブレークポイントでコンポーネントを非表示にするかを定義する)。
  • グリッドに対して水平方向のスナップを使用(グリッドにコンポーネントを配置し、必要に応じてサイズ変更し、横方向や上限方向への折たたみやリフローのタイミングを定義)する。
  • 列の制御を実現する。

注意:

標準インストールでは、レスポンシブレイアウトは We.Retail リファレンスサイト用に設定されています。他のページのレイアウトコンテナコンポーネントをアクティベートする必要があります。

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

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

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

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

デバイスグループの指定

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

指定したデバイスグループにサイトをリンク

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

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

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

ブレークポイントの設定

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

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

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

注意:

新しいプロジェクトを設定する場合:

  • テンプレートにブレークポイントを追加する必要があります。

既存のプロジェクト(既存のコンテンツを含む)を移行する場合:

  • テンプレートにブレークポイントを追加する必要があります。
  • 同じブレークポイントを既存のページに追加する必要があります。
    継承が有効なので、これはコンテンツのルートに限定できます。

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

  1. CRXDE Lite(または同等のツール)を使用して、以下のいずれかに移動します。

    • テンプレート定義。
    • ページの jcr:content ノード。
  2. jcr:content の下に、以下のノードを作成します。

    • 名前:cq:responsive
    • タイプ:nt:unstructured
  3. この下に、以下のノードを作成します。

    • 名前:breakpoints
    • タイプ:nt:unstructured
  4. breakpoints ノードの下に、任意の数のブレークポイントを作成できます。それぞれ、以下のプロパティを持つ単一のノードとして定義します。

    • 名前:<わかりやすい名前>
    • タイプ:nt:unstructured
    • タイトル:String <エミュレーターに表示するわかりやすいタイトル>
    • 幅:Decimal <ブレークポイントの値>

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

ブレークポイントは、適切なテンプレート(またはコンテンツ)フォルダーの下の .context.html<jcr:con nt> セクション内に配置されます。

定義の例は以下のとおりです。

<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 をレイアウトコンテナになるように設定するには、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) "/etc/clientlibs/wcm/foundation/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);
  }
}

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

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

スタイル設定の考慮事項

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

次に例を示します。

  • 変更前:
    • width=100px
  • 変更後:
    • max-width=100px

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

グリッド内でコンポーネントをサイズ変更すると、以下のリスナーが適宜トリガーされます。

  • beforeedit
  • beforechildedit
  • afteredit
  • afterchildedit  

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

次に例を示します。

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

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

警告:

カスタムスタイルシートの clientlibs を作成時と公開時に適切に機能させるには、これをヘッダーの一部として読み込む必要があります。

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

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

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

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

  • オーサー環境

    デザインモードを使用して、ページのレイヤーコンテナコンポーネントをアクティベートします。

  • コンポーネント定義

    コンポーネントを定義するときに、allowedComponent または静的インクルードを使用します。

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

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

  1. オーサー環境

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

    これをおこなうには、デザインモードを使用して、必要なコンテナのデザインダイアログを開きます。ここで、配置やサイズ設定に使用できる列の数を指定できます。デフォルトは 12 です。

  2. XML

    レスポンシブグリッドの定義は次の場所で指定します。

    etc/design/<your-project-name>/.content.xml  

    以下のパラメーターを定義できます。

    • 使用可能な列の数:
      • columns="{String}8"
    • 現在のコンポーネントに追加できるコンポーネント:
      • components="[/libs/wcm/foundation/components/responsivegrid, ...

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー