AEMグリッドを理解する - レイアウトコンテナのベストプラクティス

イメージ画像：レイアウトコンテナの配置を検討するる人達

なぜ、レイアウトコンテナがレスポンシブフレームワークの代わりにならないのか？

Webサイトにおけるエクスペリエンスの構築において、レスポンシブ対応を要件としないクライアントはいませんでした。ただ、これらの要件をAdobe Experience Manager（AEM）にどのように反映するかについては、製品標準でできること、できないこと、そのためのUI開発については議論が発生する傾向があります。

ブランドガイドラインには、通常、顧客が対象とするユーザーや主要チャネルに基づいたブレークポイントが設定されており、その定義に忠実である必要があります。この投稿では、レイアウト設計においてAEMグリッドをどのように活用するかや、独自のカスタマイズ要件にどのように適応させるかについて説明していきたいと思います。

「AEMグリッドとは？コンテンツ編集者はそれをどのように利用できるの？」

AEMグリッドは、実際にはレイアウトコンテナコンポーネントの一部であるレスポンシブグリッドシステムのスタイルシートです。レイアウトコンテナを使用すると、コンテンツ編集者は、レスポンシブグリッド内にコンポーネントを追加することができます。レイアウトコンテナは、ページにドロップするコンポーネントとして、また、エディタブルテンプレートのデフォルトのコンポーネントドロップエリアとして構成できます。

コンテンツ編集者は、レイアウトモードを使用して、希望するカラムの幅などのレスポンシブ動作を指定し、特定のブレークポイントでコンテンツを非表示または表示し、そのブレークポイントをSamsungやiPhoneのスクリーンサイズなどのデバイス用にプレビューすることができます。

サンプル画面 - テキストコンポーネントのグリッド幅の調整

Adobeヘルプセンターには、レイアウトモードを使用してレスポンシブレイアウトを作成し、さまざまなデバイスサイズでプレビューする方法が解説されています。

よくある誤解として、AEMグリッド/レイアウトコンテナがレスポンシブフレームワークの代わりになるというものがありますが、これは正しくありません。AEMグリッドのスタイルシートは、サードパーティーのレスポンシブグリッドフレームワークの代わりに使用できますが、その機能にはいくつかの注意点があります。

AEMグリッドは、開発ワークフローに依存せずにコンテンツのレイウトやフローを管理できる「レスポンシブオーサリング」のために設計されています。ヘッダーやフッターなどの一部のコンポーネントはレスポンシブオーサリングとは独立している必要があり、フロントエンド開発者は、独自のレスポンシブフレームワークを活用する必要があります。

また、レスポンシブオーサリング用のAEMグリッドは、非常に特殊な分離型ブレークポイントのアプローチにも従っています。AEMグリッドはモバイルファーストの構造ではなく、編集者が単一セグメントのスクリーンサイズを対象とすることができるという利点があり、これにより他のブレークポイントに影響を与えることなく、個々のブレークポイントに合わせてコンポーネントを調整、構成できるように設計されています。ブレークポイントのサイズごとにコンポーネントを手動で設定する必要がある場合でも、レスポンシブ動作の機能を完全にコントロールすることができます。

「AEMグリッドがニーズに合わない場合、どうやってカスタマイズするの？」

理想的なベストプラクティスは、編集者のレスポンシブレイアウトには、レイアウトコンテナの一部としてAEMグリッドを使用し、コンポーネントのスタイリングには外部のレスポンシブフレームワークを使用することです。これにより、フロントエンド開発者はFlexboxを利用して特定のコンポーネントのレスポンシブ動作を管理できるようになり、編集者のテンプレートレイアウトの柔軟性が損なわれません。

しかしながら、デフォルトのAEM グリッドのブレークポイントではニーズを満たせない場合もあります。レスポンシブなオーサリングをスタイルガイドで提供されているブレークポイントに合わせるためには、AEM グリッドのスタイルシートファイルをカスタマイズする必要があります。

AEMグリッドでは、12カラムのグリッドに3つのブレークポイントを使用しています。すべてのサイズをカバーするデフォルトのブレークポイント（デスクトップファーストのアプローチとも言えます）、最小サイズから768pxまでをカバーするスマートフォン用のブレークポイント、769pxから最1200pxまでをカバーするタブレット用のブレークポイントがあります。

これらの値は、AEMのgrid.lessファイルに記載されているので、フロントエンドの開発者が修正する必要があります。こちらはAEMのレイアウトモード機能でコンテンツ編集者が利用できるブレークポイントをカスタマイズするために使用できるgrid.lessファイルのサンプルです。

サンプル画像：grid.lessのソースコード

フロントエンド開発者は、grid.lessファイルにおいてメディアクエリーの値を変更することができますが、確立されたクラス名に変更を加えるべきではありません。また、カスタマイズを行う際には、ページ作成のワークフローに影響を与える変更点を、コンテンツ編集者が理解できるように明確にしておく必要があります。

Adobeは、フロントエンド開発者がAEMのバックエンド実装に先立ち、モックアップ用のサンプル静的ページを作成するための参考資料として、レスポンシブグリッドのGitHubドキュメントを提供しています。このサンプル版では、AEMのグリッドクラスとHTML構造を使用しているため、AEMと同じレスポンシブレイアウトを簡単に作成することができます。

「Bootstrapを使えばいいんじゃないの？」

前述のように、レスポンシブオーサリング機能を必要としないコンポーネントには、AEMグリッドに加えてBootstrapを使用することができます。ただし、AEMグリッドをBootstrapや他のレスポンシブフレームワークで完全に置き換えることはできません。

AEMグリッド用に生成されたクラス名は、AEMのレイアウトコンテナ機能に、直接、関連付けられています。許可されたコンポーネントのポリシー、スタイルシステム、定義された初期コンテンツなど、エディタブルテンプレートの高度な機能は、AEMのエディター機能に接続されているレイアウトコンテナとレイアウトモードに厳密に依存しています。

そのため、レイアウトコンテナ自体を大幅に拡張すると、この機能が破壊され、将来的なアップグレードが困難になります。grid.less ファイルは、定義したブレークポイントを反映して更新できますが、外部フレームワークを採用するためにクラス名を変更することはできません。

AEMグリッドとレイアウトコンテナは製品の標準機能なので、関連する問題でAdobeのサポートが必要になったり、将来、アップデートが行われたりした場合に、これらの変更が問題になる可能性もあります。レスポンシブレイアウトのガバナンスに懸念がある場合は、テンプレートエディターの役割や、UXチームとコンテンツ編集者の間で期待される柔軟性について、話し合うことをお勧めします。

AEMグリッドは、Bootstrapのグリッドとほぼ同じように動作します。どちらもカスタマイズ可能な列数と入れ子を使用しています。Bootstrap v4がFlexboxとSASSを使用している一方で、AEMグリッドはCSS floatとLESS（レガシーブラウザにも対応）を使用していますが、Bootstrapコンポーネントは、意図されたコンポーネントの柔軟性をもってAEMグリッド内で動作します。Bootstrap コンポーネントは流動的な方法で開発されており、レスポンシブレイアウトがコンポーネントコード自体の中で定義されていない場合は、親コンテナによって処理されます。

レイアウトコンテナコンポーネントは、コンテンツ編集者がレスポンシブレイアウトを視覚的に確認して調整できるようにするための強力なツールで、以前であれば、これらの調整は開発者の仕事でした。レスポンシブレイアウトの作成にAEMグリッドを使用し、コンポーネントのスタイリングにサードパーティーのレスポンシブフレームワークを使用することで、コンテンツ編集者のテンプレートレイアウトの柔軟性を損なうことなく、フロントエンド開発者がFlexboxを活用できるようになります。

このアプローチは、コンテンツ編集者とフロントエンド開発者の両方に究極の柔軟性を提供しますが、その場合は、それぞれの役割と責任を明確にしておきましょう。特に、エディタブルテンプレートを定義する際には重要です。