現在表示中:

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

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

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

  • 水平方向のスナップをグリッドに提供します。また、コンポーネントをグリッドに並べて配置して、折りたたみやリフローのタイミングを定義できます。
  • 事前定義済みのブレークポイント(電話、タブレット用など)を使用して、関連するデバイスまたは向きのコンテンツに必要な動作を定義できます。
    • 例えば、コンポーネントのサイズや、特定のデバイスでコンポーネントを表示するかどうかをカスタマイズできます。
  • ネストして、列を制御できます。

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

警告:

レイアウトコンテナコンポーネントは、クラシック UI でも使用できます。ただし、完全な機能がサポートされ、使用できるのは、タッチ対応 UI の場合のみです。

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

  • レイアウトコンテナコンポーネント
    このコンポーネントは、コンポーネントブラウザーで使用でき、レスポンシブグリッド内にコンポーネントを追加および配置できるグリッド段落システムを提供します。ページ上のデフォルトの段落システムとしても設定できます。
  • レイアウトモード
    レイアウトコンテナをページに配置したら、レイアウトモードを使用して、レスポンシブグリッド内にコンテンツを配置できます。
  • エミュレーター
    コンポーネントをインタラクティブにサイズ変更することによってデバイスやウィンドウのサイズに従ってレイアウトを再編成する、レスポンシブ Web サイトを作成および編集できます。その後、エミュレーターを使用して、コンテンツのレンダリング方法を確認できます。

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

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

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

注意:

アドビはフロントエンド開発者用にレスポンシブレイアウトの GitHub ドキュメントをリファレンスとして提供しており、フロントエンド開発者は AEM の外部で AEM グリッドを使用できます(例えば、今後の AEM サイトの静的 HTML モックアップを作成する場合)。

注意:

前述のメカニズムの使用は、テンプレートでの設定によって有効になります。詳しくは、レスポンシブレイアウトの設定を参照してください。

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

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

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

  • エミュレーターを使用すると、これらのレイアウトを様々なデバイスに基づいてエミュレートできます。デバイスタイプに加えて、回転デバイスオプションによって選択した方向も、幅の変更として選択されるブレークポイントに影響する場合があります。
  • ブレークポイントとは、レイアウトの定義を区切るポイントのことです。
    • ブレークポイントでは、専用のレイアウトを使用するあらゆるデバイスの最大幅を(ピクセル単位で)効果的に定義します。
    • ブレークポイントは通常、デバイスのディスプレイの幅に応じて、様々なデバイスに使用できます。
    • ブレークポイントの範囲は、次のブレークポイントまで、左側に広がります。
    • ブレークポイントを具体的に選択することはできず、デバイスと向きの選択によって、適切なブレークポイントが自動的に選択されます。

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

注意:

個別のデバイスごとにブレークポイントを定義するという方法も考えられますが、そうするとレイアウトの定義とメンテナンスに必要となる作業が大幅に増加することになります。

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

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

screen_shot_2018-03-23at084058

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

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

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

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

    screen_shot_2018-03-23at084256
  3. エミュレーターツールバーが開きます。

    screen_shot_2018-03-23at084551

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

    • デバイスを回転 - 垂直方向(縦)から水平方向(横)に(またはその逆に)デバイスを回転できます。
    screen_shot_2018-03-23at084612
    screen_shot_2018-03-23at084637
    • デバイスを選択 - エミュレートする特定のデバイスをリストから定義します(詳しくは次のステップを参照)。
    screen_shot_2018-03-23at084743
  4. エミュレートするデバイスを選択するには、次のどちらかの方法を使用できます。

    • デバイスを選択アイコンを使用して、ドロップダウンセレクターから選択します。
    • エミュレーターツールバーのデバイスのインジケーターをタップまたはクリックする。
    screen_shot_2018-03-23at084818
  5. 特定のデバイスを選択すると、次のことができます。

    • 選択したデバイス(iPad など)のアクティブマーカーを確認する。
    • 該当するブレークポイントタブレットなど)のアクティブマーカーを確認する。
    screen_shot_2018-03-23at084932
    • 青い点線は、選択したデバイスのフォールドを表します(ここでは iPhone 6)。
    screen_shot_2018-03-23at084947
    • フォールドは、コンテンツのページの改行と見なすこともできます(ブレークポイントと混同しないでください)。これは、デバイスでスクロールする前にユーザーに表示されるコンテンツの部分を確認するために表示されます。
    • エミュレートしているデバイスの高さが画面サイズより高い場合、フォールドの線は表示されません。
    • フォールドは、作成者の利便性のために表示されます。公開されたページには表示されません。

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

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

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

注意:

まだ使用可能になっていない場合は、レイアウトコンテナを明示的に段落システムまたはページ用にアクティベートする必要があります(デザインモードを使用するなどの方法があります)。

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

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

    screen_shot_2018-03-23at085500

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

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

警告:

レイアウトコンテナは段落システムなので、このコンポーネントを削除すると、レイアウトグリッドに加えて、そのコンテナ内にあるすべてのコンポーネント(およびそのコンテンツ)も削除されます。

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

    screen_shot_2018-03-23at085357

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

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

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

    • ネストの一番下のレベルのレイアウトコンテナは、黒色で描画されます。
    • ネストの次のレベルのレイアウトコンテナは、濃灰色です。
    • それ以上のコンテナは明るい灰色です。
    screen_shot_2018-03-23at085636
  3. グリッド全体が、コンテンツも含めて強調表示されます。アクションツールバーが表示され、ここから、「削除」などのアクションを選択できます。

    screen_shot_2018-03-23at085724

レイアウトの定義(レイアウトモード)

注意:

ブレークポイントごとに別々のレイアウトを定義できます(エミュレートされたデバイスのタイプと向きによって決定)。

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

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

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

    • 編集モードまたはターゲット設定モードに切り替えるときと同様に、レイアウトモードを選択します。
    • レイアウトモードは持続され、モードセレクターで別のモードを選択するまで、レイアウトモードから変わりません。
  • 個別のコンポーネントを編集する場合。

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

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

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

    screen_shot_2018-03-23at090140

    注意:

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

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


    • 全体的にアクションを実行するために、レイアウトコンテナコンポーネント全体を選択できます。
    • 新規行にフロート
      コンポーネントが、グリッド内の空きスペースに応じて、新しい行に移動します。
    • コンポーネントを非表示
      コンポーネントが非表示になります(レイアウトコンテナのツールバーから復元できます)。
    screen_shot_2018-03-23at090246
  • レイアウトモードでは、「コンポーネントをここにドラッグ」をタップまたはクリックすると、コンポーネント全体を選択できます。そうすると、このモードのツールバーが表示されます。

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

    • 親 - 親コンポーネントを選択します。
    screen_shot_2018-03-23at090823
    • 非表示のコンポーネントを表示 - すべてまたは個別のコンポーネントを表示します。数字は現在非表示のコンポーネントの数を示します。カウンターは非表示のコンポーネントの数を示します。
    screen_shot_2018-03-23at091007
    • ブレークポイントレイアウトを元に戻す - デフォルトのレイアウトに戻します。カスタマイズされたレイアウトが適用されなくなります。
    screen_shot_2018-03-23at091013
    • 新規行にフロート - コンポーネントの位置を上に移動します(間隔がある場合)。
    screen_shot_2018-03-23at090829
    • コンポーネントを非表示 - 現在のコンポーネントを非表示にします。
    screen_shot_2018-03-23at090834

    注意:

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

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

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

    screen_shot_2018-03-23at091224

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー