レスポンシブレイアウト

AEM では、レイアウトコンテナ​コンポーネントを使用して、ページのレスポンシブレイアウトを作成できます。

レスポンシブグリッド内にコンポーネントを配置できる段落システムを提供します。このグリッドでは、デバイスやウィンドウのサイズおよび形式に従ってレイアウトを再編成できます。このコンポーネントを、レイアウト​モードと連動して使用すると、デバイスに依存するレスポンシブレイアウトを作成および編集できます。

レイアウトコンテナには、次の特徴があります。

• 水平方向のスナップをグリッドに提供します。また、コンポーネントをグリッドに並べて配置して、折りたたみやリフローのタイミングを定義できます。

• 事前定義済みのブレークポイント（電話、タブレット用など）を使用して、関連するデバイスまたは向きのコンテンツに必要な動作を定義できます。

  • 例えば、コンポーネントのサイズや、特定のデバイスでコンポーネントを表示するかどうかをカスタマイズできます。

• ネストして、列を制御できます。

その後、エミュレーターを使用して、特定のデバイスのコンテンツのレンダリング方法を確認できます。

AEM は、次のメカニズムを組み合わせて使用することにより、ページのレスポンシブレイアウトを実現します。

• レイアウトコンテナ​コンポーネント

  このコンポーネントは、コンポーネントブラウザーで使用でき、レスポンシブグリッド内にコンポーネントを追加および配置できるグリッド段落システムを提供します。ページ上のデフォルトの段落システムとしても設定できます。

• レイアウトモード

  レイアウトコンテナをページに配置したら、レイアウト​モードを使用して、レスポンシブグリッド内にコンテンツを配置できます。

• エミュレーター：
  コンポーネントをインタラクティブにサイズ変更することによってデバイスやウィンドウのサイズに従ってレイアウトを再編成する、レスポンシブ Web サイトを作成および編集できます。その後、エミュレーターを使用して、コンテンツのレンダリング方法を確認できます。

これらのレスポンシブグリッドメカニズムを使用すると、次のことが可能になります。

• ブレークポイントを使用して、（デバイスのタイプと向きを基準とした）デバイスの幅に基づいて異なるコンテンツのレイアウトを定義する。
• これらの同じブレークポイントとコンテンツのレイアウトを使用して、デスクトップ上のブラウザーウィンドウのサイズに応じたコンテンツを作成する。
• グリッドに対して水平方向のスナップを使用し、グリッドにコンポーネントを配置し、必要に応じてサイズ変更し、横方向や上限／下限方向への折たたみや折り返しのタイミングを定義する。
• 特定のデバイスレイアウトのコンポーネントを非表示にする。
• 列の制御を実現する。

プロジェクトに応じて、レイアウトコンテナはページのデフォルトの段落システム、またはコンポーネントブラウザーを使用してページに追加できるコンポーネント（またはその両方）として使用できます。

レイアウトの定義、デバイスのエミュレーションおよびブレークポイント

Web サイトのコンテンツを作成する場合は、使用するデバイスに適した方法でコンテンツが表示されるようにする必要があります。

AEM では、デバイスの幅に依存するレイアウトを定義できます。

• エミュレーターを使用すると、これらのレイアウトを様々なデバイスに基づいてエミュレートできます。デバイスタイプに加えて、回転デバイス​オプションによって選択した方向も、幅の変更として選択されるブレークポイントに影響する場合があります。

• ブレークポイントとは、レイアウトの定義を区切るポイントのことです。

  • ブレークポイントでは、専用のレイアウトを使用するあらゆるデバイスの最大幅を（ピクセル単位で）効果的に定義します。
  • ブレークポイントは通常、デバイスのディスプレイの幅に応じて、様々なデバイスに使用できます。
  • ブレークポイントの範囲は、次のブレークポイントまで、左側に広がります。
  • ブレークポイントを具体的に選択することはできず、デバイスと向きの選択によって、適切なブレークポイントが自動的に選択されます。

デスクトップ​デバイスには、特定の幅がなく、デフォルトのブレークポイントに関連します（つまり、すべてが最後に設定したブレークポイントを上回ります）。

エミュレーターを使用してエミュレーションおよびレイアウト定義用の特定のデバイスを選択すると、関連するブレークポイントもハイライト表示されます。レイアウト変更は、ブレークポイントが適用される他のデバイス（アクティブなブレークポイントマーカーの左側で、次のブレークポイントマーカーの前に位置するすべてのデバイス）にも適用できます。

例えば、エミュレーションとレイアウトのためにデバイス iPhone 6 Plus（幅の定義は 540 ピクセル）を選択した場合、ブレークポイント​電話（768 ピクセルで定義）もアクティブ化されます。iPhone 6 へのレイアウト変更は、電話​ブレークポイントの下の他のデバイス（iPhone 5（320 ピクセルで定義）など）に適用できます。

エミュレートするデバイスの選択

1. 必要なページを編集用に開きます。次に例を示します。

   http://localhost:4502/editor.html/content/we-retail/us/en/experience.html

2. 上部のツールバーから​エミュレーター​アイコンを選択します。

   

3. エミュレーターツールバーが開きます。

   

   エミュレーターツールバーに追加のレイアウトオプションが表示されます。

   • デバイスを回転 - 垂直方向（縦）から水平方向（横）に（またはその逆に）デバイスを回転できます。

   

   • デバイスを選択 - エミュレートする特定のデバイスをリストから定義します（詳しくは次のステップを参照）。

   

4. エミュレートするデバイスを選択するには、次のどちらかの方法を使用できます。

   • デバイスを選択アイコンを使用して、ドロップダウンセレクターから選択する。
   • エミュレーターツールバーのデバイスのインジケーターをタップまたはクリックする。

   

5. 特定のデバイスを選択すると、次のことができます。

   • 選択したデバイス（iPad など）のアクティブマーカーを確認する。
   • 該当するブレークポイント（タブレット​など）のアクティブマーカーを確認する。

   

   • 青い点線は、選択したデバイスの​フォールド​を表します（ここでは iPhone 6）。

   

   • フォールドは、コンテンツのページの改行と見なすこともできます（ブレークポイントと混同しないでください）。これは、デバイスでスクロールする前にユーザーに表示されるコンテンツの部分を確認するために表示されます。
   • エミュレートしているデバイスの高さが画面サイズより高い場合、フォールドの線は表示されません。
   • フォールドは、作成者の利便性のために表示されます。公開されたページには表示されません。

レイアウトコンテナとそのコンテンツの追加（編集モード）

レイアウトコンテナ​は、次の特徴を持つ段落システムです。

• 他のコンポーネントを含む。
• レイアウトを定義する。
• 変更に応答する。

1. レイアウトコンテナ​は、コンポーネントブラウザーで標準コンポーネントとして使用できます。ここから、ページ上の必要な場所へドラッグできます。そうすると、「コンポーネントをここにドラッグ」プレースホルダーが表示されます。

2. その後、コンポーネントをレイアウトコンテナに追加できます。これらのコンポーネントには実際のコンテンツが含まれます。

   

レイアウトコンテナでの選択およびアクションの実行（編集モード）

他のコンポーネントと同様に、レイアウトコンテナは、選択してからアクション（切り取り、コピー、削除）を実行できます（編集​モードのとき）。

1. グリッドのプレースホルダーの上にマウスを移動するか、タップすると、アクションメニューが表示されます。

   

   親​オプションを選択する必要があります。

   

2. レイアウトコンポーネントがネストされている場合は、親​オプションを選択するとドロップダウンに選択肢が表示され、ネストしたレイアウトコンテナまたはその親を選択できます。

   ドロップダウンのコンテナ名の上にマウスを移動すると、アウトラインがページに表示されます。

   • ネストの一番下のレベルのレイアウトコンテナは、黒色で描画されます。
   • ネストの次のレベルのレイアウトコンテナは、濃灰色です。
   • それ以上のコンテナは明るい灰色です。

   

3. グリッド全体が、コンテンツも含めて強調表示されます。アクションツールバーが表示され、ここから、「削除」などのアクションを選択できます。

   

レイアウトの定義（レイアウトモード）

レイアウトコンテナと共に実装されているレスポンシブグリッドのレイアウトを設定するには、レイアウト​モードを使用する必要があります。

レイアウト​モードは 2 つの方法で開始できます。

• ツールバーのモードメニューを使用して​レイアウト​モードを選択する。

  • 編集​モードまたは​ターゲット設定​モードに切り替える場合と同様に、レイアウト​モードを選択します。
  • レイアウト​モードは持続され、モードセレクターで別のモードを選択するまで、レイアウト​モードのままです。

• 個別のコンポーネントを編集する。

  • コンポーネントのクイックアクションメニューの「レイアウト」オプションを使用すると、レイアウト​モードに切り替えることができます。
  • レイアウト​モードはコンポーネントを編集している間持続し、フォーカスが別のコンポーネントに移ると​編集​モードに戻ります。

レイアウトモードでは、グリッドに対して様々なアクションを実行できます。

• 青いドットを使用して、コンテンツのコンポーネントのサイズを変更します。サイズ変更は常にグリッドにスナップされます。背景のサイズを変更する際には、次のように位置揃えを補助するためのグリッドが表示されます。

  

  メモ

  コンポーネント（画像​など）のサイズが変更されても、割合と比率は維持されます。

• コンテンツコンポーネントをクリックまたはタップします。ツールバーで次の操作を実行できます。

  • 親

    全体的にアクションを実行するために、レイアウトコンテナコンポーネント全体を選択できます。

  • 新規行にフロート

    コンポーネントは、グリッド内の空きスペースに応じて、新しい線に移動します。

  • コンポーネントを非表示

    コンポーネントは非表示になります（レイアウトコンテナのツールバーから復元できます）。
    

• レイアウト​モードでは、「コンポーネントをここにドラッグ」をタップまたはクリックすると、コンポーネント全体を選択できます。そうすると、このモードのツールバーが表示されます。

  ツールバーには、レイアウトコンポーネントの状態やそれに属するコンポーネントに応じて異なるオプションが表示されます。次に例を示します。

  • 親 - 親コンポーネントを-選択します。

  

  • 非表示のコンポーネントを表示 - すべてまたは個別のコンポーネントを表示します。数字は現在非表示のコンポーネントの数を示します。カウンターは非表示のコンポーネントの数を示します。

  

  • ブレークポイントレイアウトを元に戻す - デフォルトのレイアウトに戻します。カスタマイズされたレイアウトが適用されなくなります。

  

  • 新規行にフロート - コンポーネントの位置を上に移動します（間隔がある場合）。

  

  • コンポーネントを非表示 - 現在のコンポーネントを非表示にします。

  

  メモ

  上記の例では、フロートと非表示のアクションが使用可能になっています。これは、このレイアウトコンテナが親レイアウトコンテナ内にネストされているからです。

  • コンポーネントを表示​親コンポーネントを選択して、「
    非表示のコンポーネントを表示」オプションを含むアクションツールバーを表示します。この例では、2 つのコンポーネントが非表示にされています。
    

  「非表示のコンポーネントを表示」オプションを選択すると、現在非表示のコンポーネントが元の場所で青色で表示されます。

  

  「すべてを復元」を選択すると、非表示のすべてのコンポーネントが表示されます。

Business.Adobe.com リソース

Ecommerce Integrations Auto Form Fill Targeted Content Personalized Experiences Document Generation Digital Rights Management