AEM では、レイアウトコンテナコンポーネントを使用して、ページのレスポンシブレイアウトを作成できます。
レスポンシブグリッド内にコンポーネントを配置できる段落システムを提供します。このグリッドでは、デバイスやウィンドウのサイズおよび形式に従ってレイアウトを再編成できます。このコンポーネントを、レイアウトモードと連動して使用すると、デバイスに依存するレスポンシブレイアウトを作成および編集できます。
レイアウトコンテナには、次の特徴があります。
水平方向のスナップをグリッドに提供します。また、コンポーネントをグリッドに並べて配置して、折りたたみやリフローのタイミングを定義できます。
事前定義済みのブレークポイント(電話、タブレット用など)を使用して、関連するデバイスまたは向きのコンテンツに必要な動作を定義できます。
ネストして、列を制御できます。
その後、エミュレーターを使用して、特定のデバイスのコンテンツのレンダリング方法を確認できます。
レイアウトコンテナコンポーネントは、クラシック UI でも使用できます。ただし、完全な機能がサポートされ、使用できるのは、タッチ対応 UI の場合のみです。
AEM は、次のメカニズムを組み合わせて使用することにより、ページのレスポンシブレイアウトを実現します。
レイアウトコンテナコンポーネント
このコンポーネントは、コンポーネントブラウザーで使用でき、レスポンシブグリッド内にコンポーネントを追加および配置できるグリッド段落システムを提供します。ページ上のデフォルトの段落システムとしても設定できます。
レイアウトコンテナをページに配置したら、レイアウトモードを使用して、レスポンシブグリッド内にコンテンツを配置できます。
エミュレーター:
コンポーネントをインタラクティブにサイズ変更することによってデバイスやウィンドウのサイズに従ってレイアウトを再編成する、レスポンシブ Web サイトを作成および編集できます。その後、エミュレーターを使用して、コンテンツのレンダリング方法を確認できます。
これらのレスポンシブグリッドメカニズムを使用すると、次のことが可能になります。
プロジェクトに応じて、レイアウトコンテナはページのデフォルトの段落システム、またはコンポーネントブラウザーを使用してページに追加できるコンポーネント(またはその両方)として使用できます。
アドビはフロントエンド開発者用にレスポンシブレイアウトの GitHub ドキュメントをリファレンスとして提供しており、フロントエンド開発者は AEM の外部で AEM グリッドを使用できます(例えば、今後の AEM サイトの静的 HTML モックアップを作成する場合)。
前述のメカニズムの使用は、テンプレートでの設定によって有効になります。詳しくは、 レスポンシブレイアウトの設定 を参照してください。
Web サイトのコンテンツを作成する場合は、使用するデバイスに適した方法でコンテンツが表示されるようにする必要があります。
AEM では、デバイスの幅に依存するレイアウトを定義できます。
エミュレーターを使用すると、これらのレイアウトを様々なデバイスに基づいてエミュレートできます。デバイスタイプに加えて、回転デバイスオプションによって選択した方向も、幅の変更として選択されるブレークポイントに影響する場合があります。
ブレークポイントとは、レイアウトの定義を区切るポイントのことです。
デスクトップデバイスには、特定の幅がなく、デフォルトのブレークポイントに関連します(つまり、すべてが最後に設定したブレークポイントを上回ります)。
個別のデバイスごとにブレークポイントを定義するという方法も考えられますが、そうするとレイアウトの定義とメンテナンスに必要となる作業が大幅に増加することになります。
エミュレーターを使用してエミュレーションおよびレイアウト定義用の特定のデバイスを選択すると、関連するブレークポイントもハイライト表示されます。レイアウト変更は、ブレークポイントが適用される他のデバイス(アクティブなブレークポイントマーカーの左側で、次のブレークポイントマーカーの前に位置するすべてのデバイス)にも適用できます。
例えば、エミュレーションとレイアウトのためにデバイス iPhone 6 Plus(幅の定義は 540 ピクセル)を選択した場合、ブレークポイント電話(768 ピクセルで定義)もアクティブ化されます。iPhone 6 へのレイアウト変更は、電話ブレークポイントの下の他のデバイス(iPhone 5(320 ピクセルで定義)など)に適用できます。
必要なページを編集用に開きます。次に例を示します。
http://localhost:4502/editor.html/content/we-retail/us/en/experience.html
上部のツールバーからエミュレーターアイコンを選択します。
エミュレーターツールバーが開きます。
エミュレーターツールバーに追加のレイアウトオプションが表示されます。
エミュレートするデバイスを選択するには、次のどちらかの方法を使用できます。
特定のデバイスを選択すると、次のことができます。
レイアウトコンテナは、次の特徴を持つ段落システムです。
まだ使用可能になっていない場合は、レイアウトコンテナを明示的に段落システムまたはページ用にアクティベートする必要があります(デザインモードを使用するなどの方法があります)。
レイアウトコンテナは、コンポーネントブラウザーで標準コンポーネントとして使用できます。ここから、ページ上の必要な場所へドラッグできます。そうすると、「コンポーネントをここにドラッグ」プレースホルダーが表示されます。
その後、コンポーネントをレイアウトコンテナに追加できます。これらのコンポーネントには実際のコンテンツが含まれます。
他のコンポーネントと同様に、レイアウトコンテナは、選択してからアクション(切り取り、コピー、削除)を実行できます(編集モードのとき)。
レイアウトコンテナは段落システムなので、このコンポーネントを削除すると、レイアウトグリッドに加えて、そのコンテナ内にあるすべてのコンポーネント(およびそのコンテンツ)も削除されます。
グリッドのプレースホルダーの上にマウスを移動するか、タップすると、アクションメニューが表示されます。
親オプションを選択する必要があります。
レイアウトコンポーネントがネストされている場合は、親オプションを選択するとドロップダウンに選択肢が表示され、ネストしたレイアウトコンテナまたはその親を選択できます。
ドロップダウンのコンテナ名の上にマウスを移動すると、アウトラインがページに表示されます。
グリッド全体が、コンテンツも含めて強調表示されます。アクションツールバーが表示され、ここから、「削除」などのアクションを選択できます。
ブレークポイントごとに別々のレイアウトを定義できます(エミュレートされたデバイスのタイプと向きによって決定)。
レイアウトコンテナと共に実装されているレスポンシブグリッドのレイアウトを設定するには、レイアウトモードを使用する必要があります。
レイアウトモードは 2 つの方法で開始できます。
ツールバーのモードメニューを使用してレイアウトモードを選択する。
レイアウトモードでは、グリッドに対して様々なアクションを実行できます。
青いドットを使用して、コンテンツのコンポーネントのサイズを変更します。サイズ変更は常にグリッドにスナップされます。背景のサイズを変更する際には、次のように位置揃えを補助するためのグリッドが表示されます。
コンポーネント(画像など)のサイズが変更されても、割合と比率は維持されます。
コンテンツコンポーネントをクリックまたはタップします。ツールバーで次の操作を実行できます。
親
全体的にアクションを実行するために、レイアウトコンテナコンポーネント全体を選択できます。
新規行にフロート
コンポーネントは、グリッド内の空きスペースに応じて、新しい線に移動します。
コンポーネントを非表示
コンポーネントは非表示になります(レイアウトコンテナのツールバーから復元できます)。
レイアウトモードでは、「コンポーネントをここにドラッグ」をタップまたはクリックすると、コンポーネント全体を選択できます。そうすると、このモードのツールバーが表示されます。
ツールバーには、レイアウトコンポーネントの状態やそれに属するコンポーネントに応じて異なるオプションが表示されます。次に例を示します。
上記の例では、フロートと非表示のアクションが使用可能になっています。これは、このレイアウトコンテナが親レイアウトコンテナ内にネストされているからです。
「非表示のコンポーネントを表示」オプションを選択すると、現在非表示のコンポーネントが元の場所で青色で表示されます。
「すべてを復元」を選択すると、非表示のすべてのコンポーネントが表示されます。