レスポンシブレイアウト responsive-layout
AEM では、レイアウトコンテナ コンポーネントを使用することで、ページのレスポンシブレイアウトを作成できます。
これにより、レスポンシブグリッド内にコンポーネントを配置できる段落システムが提供されます。このグリッドでは、デバイスやウィンドウのサイズと形式に応じてレイアウトを並べ替えることができます。レイアウト モードと組み合わせてこのコンポーネントを使用すると、デバイスに依存するレスポンシブレイアウトを作成および編集できます。
レイアウトコンテナには、次の特徴があります。
- グリッドに対して水平方向のスナップを提供します。また、グリッドにコンポーネントを並べて配置し、折りたたみや折り返しのタイミングを定義できます。
- 事前定義済みのブレークポイント（「電話」、「タブレット」など）を使用して、関連するデバイスや向きで必要とされるコンテンツの動作を定義できます。
- 例えば、コンポーネントのサイズや、特定のデバイスでコンポーネントを表示できるかどうかをカスタマイズできます。
- ネストして、列を制御できます。
その後、エミュレーターを使用して、特定のデバイスのコンテンツのレンダリング方法を確認できます。
AEM は、次のメカニズムを組み合わせて使用することにより、ページのレスポンシブレイアウトを実現します。
-
レイアウトコンテナ コンポーネント
このコンポーネントは、コンポーネントブラウザーで使用でき、レスポンシブグリッド内にコンポーネントを追加および配置できるグリッド段落システムを提供します。ページ上のデフォルトの段落システムとしても設定できます。
-
レイアウトコンテナをページに配置したら、レイアウト モードを使用して、レスポンシブグリッド内にコンテンツを配置できます。
-
エミュレーター
これにより、コンポーネントのサイズをインタラクティブに変更することで、デバイスやウィンドウのサイズに従ってレイアウトを並べ替えるレスポンシブ web サイトを作成および編集できます。その後、ユーザーはエミュレーターを使用してコンテンツがどのようにレンダリングされるかを確認できます。
これらのレスポンシブグリッドのメカニズムを使用すると、次のことができます。
- ブレークポイントを使用して、（デバイスのタイプと向きに関連した）デバイスの幅に基づいて異なるコンテンツレイアウトを定義する。
- これらの同じブレークポイントとコンテンツのレイアウトを使用して、デスクトップ上のブラウザーウィンドウのサイズに応じたコンテンツを作成する。
- グリッドに対して水平方向のスナップを使用し、グリッドにコンポーネントを配置し、必要に応じてサイズ変更し、横方向や上限／下限方向への折たたみや折り返しのタイミングを定義する。
- 特定のデバイスレイアウトのコンポーネントを非表示にする。
- 列の制御を実現する。
プロジェクトに応じて、レイアウトコンテナはページのデフォルトの段落システム、またはコンポーネントブラウザーを使用してページに追加できるコンポーネント（またはその両方）として使用できます。
レイアウトの定義、デバイスのエミュレーションおよびブレークポイント layout-definitions-device-emulation-and-breakpoints
Web サイトのコンテンツを作成する場合は、使用するデバイスに適した方法でコンテンツが表示されるようにする必要があります。
AEM では、デバイスの幅に応じたレイアウトを定義できます。
-
エミュレーターを使用すると、これらの様々なデバイス上のレイアウトをエミュレートできます。デバイスタイプに加えて、回転デバイス オプションによって選択した方向も、幅の変更として選択されるブレークポイントに影響する場合があります。
-
ブレークポイントとは、レイアウトの定義を区切るポイントのことです。
- ブレークポイントでは、専用のレイアウトを使用するあらゆるデバイスの最大幅を（ピクセル単位で）効果的に定義します。
- ブレークポイントは通常、デバイスのディスプレイの幅に応じて、様々なデバイスに使用できます。
- ブレークポイントの範囲は、次のブレークポイントまで、左側に広がります。
- ブレークポイントを具体的に選択することはできず、デバイスと向きの選択によって、適切なブレークポイントが自動的に選択されます。
デスクトップ デバイスには、特定の幅がなく、デフォルトのブレークポイントに関連します（つまり、すべてが最後に設定したブレークポイントを上回ります）。
エミュレーターを使用する場合、エミュレーションとレイアウトの定義用の特定のデバイスを選択すると、関連するブレークポイントもハイライト表示されます。レイアウトの変更は、ブレークポイントが適用される他のデバイスに適用できます。つまり、アクティブなブレークポイントマーカーの左側、次のブレークポイントマーカーの前に位置するデバイスです。
例えば、エミュレーションとレイアウトのためにデバイス「iPhone 6 Plus」（幅の定義は 540 ピクセル）を選択した場合、ブレークポイント「電話」（768 ピクセルで定義）もアクティブ化されます。iPhone 6 へのレイアウト変更は、電話 ブレークポイント下の他のデバイス（iPhone 5（320 ピクセルで定義）など）に適用されます。
エミュレートするデバイスの選択 selecting-a-device-to-emulate
-
必要なページを編集用に開きます。次に例を示します。
http://<host>:<port>/editor.html/content/wknd/en/sports/la-skateparks.html -
上部のツールバーから エミュレーター アイコンを選択します。
-
エミュレーターツールバーが開きます。
エミュレーターツールバーに追加のレイアウトオプションが表示されます。
- デバイスを回転 - 垂直方向（縦）から水平方向（横）およびその逆に、デバイスを回転できます。
- デバイスを選択 - エミュレートする特定のデバイスをリストから定義します（詳しくは次のステップを参照）。
-
エミュレートする特定のデバイスを選択するには、次のいずれかを実行します。
- デバイスを選択アイコンを使用して、ドロップダウンセレクターから選択する。
- エミュレーターツールバーのデバイスのインジケーターを選択します。
-
特定のデバイスを選択すると、次のことができます。
- 選択したデバイス（iPad など）のアクティブマーカーを確認する。
- 該当するブレークポイント（タブレット など）のアクティブマーカーを確認する。
- 青い点線は、選択したデバイス（ここでは横置きの iPhone 6 Plus）の フォールド を表します。
- 折りたたみは、コンテンツの改ページと見なすこともできます（ブレークポイントと混同しないでください）。これは、デバイスでスクロールする前にユーザーに表示されるコンテンツの部分を確認するために表示されます。
- エミュレートしているデバイスの高さが画面サイズより高い場合、フォールドの線は表示されません。
- フォールドは、作成者の利便性のために表示されます。公開されたページには表示されません。
レイアウトコンテナとそのコンテンツの追加（編集モード） adding-a-layout-container-and-its-content-edit-mode
レイアウトコンテナ は、次の特徴を持つ段落システムです。
- 他のコンポーネントを含む。
- レイアウトを定義します。
- 変更に応答します。
-
レイアウトコンテナ は、コンポーネントブラウザーで標準コンポーネントとして使用できます。ここから、ページ上の必要な場所へドラッグできます。そうすると、「コンポーネントをここにドラッグ」プレースホルダーが表示されます。
-
その後、レイアウトコンテナにコンポーネントを追加できます。これらのコンポーネントには、実際のコンテンツが格納されます。
レイアウトコンテナでの選択およびアクションの実行（編集モード） selecting-and-taking-action-on-a-layout-container-edit-mode
他のコンポーネントと同様に、レイアウトコンテナは、選択してから処理（切り取り、コピー、削除）を実行できます（編集 モードの場合）。
-
グリッドのプレースホルダーにマウスを置くか、グリッドのプレースホルダーを選択すると、アクションメニューが表示されます。
親 オプションを選択する必要があります。
-
レイアウトコンポーネントがネストされている場合は、「親」オプションを選択するとドロップダウンに選択肢が表示され、ネストされたレイアウトコンテナまたはその親を選択できます。
ドロップダウンのコンテナ名の上にマウスを移動すると、アウトラインがページに表示されます。
- ネストの一番下のレベルのレイアウトコンテナのアウトラインは青色で表示されます。
- それと隣接するレベルのコンテナのアウトラインはすべて明るい青色になります。
-
グリッド全体とその内容がハイライト表示されます。アクションツールバーが表示され、ここから、「削除」などのアクションを選択できます。
レイアウトの定義（レイアウトモード） defining-layouts-layout-mode
レイアウトコンテナと共に実装されているレスポンシブグリッドのレイアウトを設定するには、レイアウト モードを使用する必要があります。
レイアウト モードは 2 つの方法で開始できます。
-
ツールバーのモードメニューを使用して レイアウト モードを選択する。
- 編集 モードまたは ターゲット設定 モードに切り替える場合と同様に、レイアウト モードを選択します。
- レイアウト モードは持続され、モードセレクターで別のモードを選択するまで、レイアウト モードのままです。
-
- コンポーネントのクイックアクションメニューの「レイアウト」オプションを使用すると、レイアウト モードに切り替えることができます。
- コンポーネントを編集している間は レイアウト モードが維持され、別のコンポーネントにフォーカスが移ると 編集 モードに戻ります。
レイアウトモードでは、グリッドに対して様々なアクションを実行できます。
-
青いドットを使用して、コンテンツのコンポーネントのサイズを変更します。サイズ変更は、常にグリッドにスナップされます。背景のサイズを変更する際には、次のように位置揃えを補助するためのグリッドが表示されます。
note note NOTE コンポーネント（画像 など）のサイズが変更されても、割合と比率は維持されます。 -
コンテンツコンポーネントを選択します。ツールバーで次の操作を実行できます。
- 親 - 全体的にアクションを実行するために、レイアウトコンテナコンポーネント全体を選択できます。
- 新規行にフロート - コンポーネントが、グリッド内の空きスペースに応じて、新しい行に移動します。
- コンポーネントを非表示 - コンポーネントが非表示になります（レイアウトコンテナのツールバーから復元できます）。
-
レイアウト モードでは、「コンポーネントをここにドラッグ」を選択すると、コンポーネント全体を選択できます。このモードでは、ツールバーが表示されます。
ツールバーには、レイアウトコンポーネントの状態やそれに属するコンポーネントに応じて異なるオプションが表示されます。次に例を示します。
-
親 - 親コンポーネントを-選択します。
-
非表示のコンポーネントを表示 - すべてのコンポーネントまたは個々のコンポーネントを表示します。数値は、現在非表示になっているコンポーネントの個数を示します。カウンターは非表示のコンポーネントの数を示します。
-
ブレークポイントレイアウトを元に戻す - デフォルトのレイアウトに戻します。カスタマイズされたレイアウトは適用されません。
-
新規行にフロート - コンポーネントの位置を上に移動します（間隔がある場合）。
-
コンポーネントを非表示 - 現在のコンポーネントを非表示にします。
note note NOTE 上記の例では、フロートと非表示のアクションが使用可能になっています。これは、このレイアウトコンテナが親レイアウトコンテナ内にネストされているからです。 -
コンポーネントを表示 親コンポーネントを選択して、「非表示のコンポーネントを表示」オプションを含むアクションツールバーを表示します。この例では、2 つのコンポーネントが非表示にされています。
「非表示のコンポーネントを表示」オプションを選択すると、現在非表示のコンポーネントが元の場所で青色で表示されます。
「すべてを復元」を選択すると、非表示のすべてのコンポーネントが表示されます。
-