AEMグリッドのカスタマイズ - レイアウトコンテナのベストプラクティス

カスタムなレスポンシブ要件にレイアウトコンテナを適合させる

前回は、AEMのレスポンシブデザインに関するよくある誤解について確認しました。今回はこれに基づいて、AEMグリッドのベストプラクティスを遵守しながら、これらの誤りに対処する2つのアプローチを見てみましょう。

A．AEMグリッドはレイアウトコンテナのために使用し、レスポンシブコンポーネントのスタイリングは外部のフレームワークで行う。

これは、フロントエンド開発者がレスポンシブなカスタマイズを多用しながらも、レスポンシブオーサリング機能を維持したい場合に推奨される方法です。AEM以外のフロントエンドフレームワークの使用は、多くのフロントエンド開発フローで好まれる傾向にあります。

B． AEMグリッドをレスポンシブオーサリングとコンポーネントのスタイリングの両方で使用する。

これは複雑なレスポンシブ要件が存在する場合や、フロントエンドのコードがAEM依存である場合に推奨されるアプローチで、そのためには、レスポンシブグリッドHTMLクラスにおいて単一セットを利用したり、AEMグリッドオーサリング機能を維持するための要件をよく把握することが必要です。

いずれのアプローチを採用しても、スタイルガイドの中で定義されたレスポンシブ基準とレスポンシブオーサリング体験が一致しない可能性はあり、カスタマイズが必要になるでしょう。AEM グリッドには独自のブレークポイントのセットがあり、レスポンシブオーサリングは、スタイル設定されたコンポーネントが使用しているのと同じブレークポイントを反映する必要があります。

さらに、将来的に潜在的な問題が発生しないように、レスポンシブオーサリング機能のオリジナルと整合性を維持させる必要があります。

Bootstrapは、フロントエンド開発において人気のあるフレームワークであり、AEMグリッドをこの特定のレスポンシブグリッドにうまく適合させるにはどうすればよいかという質問が多く寄せられます。このウォークスルーでは、レイアウトコンテナのレスポンシブオーサリング機能を維持しながら、AEMグリッドのCSSをBootstrap v4のレスポンシブ定義に合わせて更新する方法を紹介します（上記Bのアプローチ）。

最初のステップ - AEMグリッドのスタイルシートをBootstrapのブレークポイントに合わせて変更する

AEMグリッドでは、12カラムのグリッドに3つのブレークポイントが使用されています。メディアクエリーは（1）デフォルトのブレークポイント、（2）最小サイズから最大幅768pxまでのスマートフォン用ブレークポイント、（3）最小幅769pxから最大幅1,200pxまでのタブレット用ブレークポイントを使用する「デスクトップファースト」のアプローチに従っています。

これらのメディアクエリーの値は、AEMで提供されるgrid.lessファイルで更新することができます。AEMプロジェクトアーキタイプを使用している場合は下記の場所にあります。

ui.apps/src/main/content/jcr_root/apps/{client-name}/clientlibs/clientlib-site/less/grid.less

製品標準のgrid.lessファイルのコード。レイアウトコンテナで使用されるAEMグリッドクラスを生成している。

注意していただきたいのは、オリジナルのレスポンシブオーサリング機能はそのまま維持する必要があると言うことです。そのためにはブレークポイントを互いに独立したものとして定義する必要があります。

メディアクエリーが最小値や最大値のみに従っている場合、レイアウトモードでレスポンシブの動作を変更すると、その変更が他のブレークポイントにも波及してしまい、編集内容を把握するのが難しくなります。コンテンツ編集者は、ブレークポイントのサイズごとにコンポーネントを手動できる様にしておくことで、レスポンシブ動作の機能を完全にコントロールすることができます。

これを実現するために、Bootstrap の製品標準のブレークポイントを見てみましょう。

Bootstrap v4の製品標準のブレークポイントのサンプル

製品標準のプレークポイントは最小幅（Min-width）をベースに構成されています。これと別に、Bootstrapでは最小および最大のブレークポイント幅を指定して、それぞれの画面サイズをターゲットにしたサンプル（Single breakpoint）も提供されており、これはAEMグリッドのCSSを更新する際に必要とされるアプローチです。

画面サイズごとにまとめられたブレークポイントのサンプル

これらのBootstrapの値はgrid.lessファイルを編集する際の指針となります。アウトプットは以下のサンプルコードの様になります。

更新されたgrid.lessファイルのコード

Bootstrap が使用する追加のブレークポイントを適切な変数名で追加します。それぞれの画面サイズごとにまとめられたメディアクエリーが使用されています。

レイアウトコンテナの機能を破壊することがない様に、HTML クラスは変更しません。また、@max_col: 12; の値も、Bootstrap が 12 カラムのグリッドを利用するために維持しています。

スタイルガイドのレスポンシブの基準が異なるカラム数（12以外）を参照する場合は、CSSやテンプレートのレイアウトコンテナポリシーで変更する必要があります。

レイアウトコンテナの「プロパティ」→「レスポンシブ設定」

上のサンプル画像では、デフォルト値である12を上書きするために、列（カラム数）を6に設定しています。このポリシーを更新するには、テンプレートエディターを使用して最上位のレイアウトコンテナのポリシーを編集します。「プロパティ」→「レスポンシブ設定」タブを開いて、新しい値を入力します。テンプレートの変更を公開することを忘れないでください。

これは、Bootstrap が使用する値をAEM グリッドに反映させるために加えることができる更新の一例です。この方法は、独自のレスポンシブブレークポイントを使用する場合にも利用できます。

次のステップ - レイアウトモード画面に表示されるブレークポイントマーカーの定義を変更する。

レイアウトモード画面を使ったレスポンシブ動作の設定

コンテンツ編集者は、AEMのレイアウトモードを使用して、コンポーネントのレスポンシブ動作を調整します。ストライプのオーバーレイがグリッドの列数を参照する一方で、デバイスのすぐ下にあるブレークポイントマーカーは、AEMグリッドのブレークポイントを参照しています。

ページ編集者は、レイアウトモード画面でページ上部に表示されるブレークポイントマーカーを介して、AEMグリッドのブレークポイントを参照できます。これらを新しいBootstrapのブレークポイントを反映するために更新する必要があります。

レイアウトモード画面に表示された標準のブレークポイントマーカー

上のサンプル画像に表示された、「小画面（Smaller Screen）」や「タブレット（Tablet）」などのマーカーは、デフォルトのAEMグリッドブレークポイントを参照しています。これらのブレークポイントマーカーを更新するためには、テンプレートの構造を定義したノードを更新する必要があります。

CRXDEから参照したテンプレートタイプのレスポンシブ構造の定義

上のサンプル画像で確認できる様に、ブレークポイントマーカーはテンプレートタイプのレスポンシブ構造の定義にノードとして登録されています。

重要事項：これらの変更は全てのテンプレートに反映させる必要があるため、テンプレートタイプを更新するのがベストプラクティスです。テンプレートやページが作成された後でテンプレートタイプに変更を加えてもこれらの更新が反映されないため、開発作業をスタートする前にレスポンシブグリッドの戦略を立ててください。

テンプレートタイプの構造定義に記載された対象ノードを修正します。AEMプロジェクトアーキタイプを使用している場合、空ページのテンプレートタイプは下記の場所にあります。

ui.content/src/main/content/jcr_root/conf/{client-name}/settings/wcm/template-types/empty-page/structure/.content.xml

.content.xmlに記載されたテンプレートタイプのレスポンシブ構造の定義

レイアウトモードにおけるラベル名やレスポンシブの最大値を含んだこれらのノード定義を、Bootstrapの該当するブレークポイントに置き換えます。

Bootstrapのブレークポイントを反映した、テンプレートタイプのレスポンシブ構造の定義

テンプレートタイプの変更は開発者が担当します。更新したテンプレートタイプをソース管理システムにコミットし、AEM プロジェクトと共にデプロイする必要があります。このコード変更が行われて、デプロイされた後、コンテンツ編集者は更新されたテンプレートタイプに基づいて新しいテンプレートを作成することができます。

先に述べたように、テンプレートタイプの変更は「ライブ」ではありません。つまり、既存のテンプレートが更新されたブレークポイント定義を自動的に継承することはありません。このような理由から、開発プロセスの早い段階でレスポンシブ戦略を定義することが、ベストプラクティスであると考えられています。

更新されたレイアウトモード画面に表示されたブレークポイントマーカー

新しく作成したテンプレートをレイアウトモードで開くと、更新されたブレークポイント値に対応したマーカーが表示されているのを確認できます。それぞれのラベルは「Xsmall」、「小（Small）」、「中（Medium）」、「大（Large）」の様にトランスレーター機能により翻訳された状態で表示されます。

次回以降、このテンプレートタイプからテンプレートを作成すると、新たに定義されたレスポンシブブレークポイントが継承されます。

レスポンシブオーサリングは、コンテンツ編集者にとって、フルエクスペリエンスをカスタマイズするための強力なツールです。考慮すべきいくつかのニュアンスがあるかもしれませんが、レスポンシブの基準は、レイアウトコンテナコンポーネントのオリジナルの整合性を維持しながら、レスポンシブスタイルガイドの様々なニーズに合わせて簡単にカスタマイズすることができます。

重要なポイント：

• AEMグリッドをカスタマイズする際には、独立したブレークポイントでオーサリング機能を維持することが必須となります。
• AEMグリッドのCSSのブレークポイント値に変更が加えられた場合、レイアウトモードで対応するブレークポイントマーカーを更新し、コンテンツ編集者が変更内容を理解できるようにすると便利です。
• レスポンシブの基準を事前に定義しておけば、ページやテンプレートを追加した際の同期の問題が発生することはありません。

https://main--bacom-blog--adobecom.hlx.live/jp/blog/fragments/we-can-help

この記事は2019年に公開されたCustomizing the AEM Gridを抄訳したものです。