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