レスポンシブブレークポイント

AEM レスポンシブページエディター用に新しいレスポンシブブレークポイントを設定する方法を学びます。

CSS ブレークポイントの作成

まず、レスポンシブ AEM サイトが準拠する AEM レスポンシブグリッド CSS に、メディアのブレークポイントを作成します。

/ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less ファイルに、モバイルエミュレーターと併せて使用するブレークポイントを作成します。 各ブレークポイントの max-width をメモします。これにより、CSS ブレークポイントが AEM レスポンシブページエディターのブレークポイントにマップされます。

テンプレートのブレークポイントのカスタマイズ

ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml ファイルを開き、新しいブレークポイントノードの定義を使用して、cq:responsive/breakpoints を更新します。 それぞれの CSS ブレークポイント には、breakpoints の下に対応するノードが必要で、その width プロパティが CSS ブレークポイントの max-width に設定されている必要があります。

エミュレーターの作成

作成者がレスポンシブビューを選択してページエディターで編集できるように、AEM エミュレーターを定義する必要があります。

/ui.apps/src/main/content/jcr_root/apps/<app name>/emulators の下にエミュレーターノードを作成

（例：/ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape）。CRXDE Lite の /libs/wcm/mobile/components/emulators から参照エミュレーターノードをコピーし、そのコピーを更新して、ノード定義を迅速化します。

デバイスグループの作成

エミュレーターをグループ化して、AEM ページエディターで使用できるようにします。

/ui.apps/src/main/content/jcr_root の下に /apps/settings/mobile/groups/<name of device group> ノード構造を作成します。

/apps/settings/mobile/groups/<device group name> に .content.xml ファイルを作成し、
以下のようなコードを使用して新しいエミュレータを定義します。

テンプレートのデバイスグループの更新

最後に、デバイスグループをページテンプレートにマッピングし戻し、このテンプレートから作成されたページのページエディターでエミュレーターを使用できるようにします。

ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml ファイルをを開き、cq:deviceGroups プロパティを更新して、新しいモバイルグループ（例：cq:deviceGroups="[mobile/groups/customdevices]"）を参照します。