AEM UI の構造 structure-of-the-aem-ui

AEM UI には、基盤となる原則があり、いくつかの主要な要素で構成されています。

コンソール consoles

基本レイアウトとサイズ変更 basic-layout-and-resizing

UI はモバイルデバイスとデスクトップデバイスの両方に対応します。AEM では、2 つのスタイルを作成するのではなく、すべての画面とデバイスで機能する 1 つのスタイルを使用します。

すべてのモジュールで同じ基本レイアウトが使用されます。

レイアウトはレスポンシブデザインスタイルに従っており、使用するデバイスやウィンドウのサイズ、またはその両方のサイズに対応します。

例えば、解像度が 1024 ピクセル未満（モバイルデバイスなど）になると、それに応じて表示が調整されます。

ヘッダーバー header-bar

ヘッダーバーにはグローバル要素が表示されます。

ツールバー toolbar

ツールバーは、現在の場所に応じて変わり、下のページのビューやアセットの制御に関連したツールが表示されます。ツールバーは製品固有ですが、要素には若干共通性があります。

どの場所でも、ツールバーには現在実行可能なアクションが表示されます。

また、現在リソースが選択されているかどうかによっても異なります。

左レール left-rail

左レールは、必要に応じて表示／非表示を切り替えることができます。

デフォルトは、コンテンツのみ ​です（パネルは非表示）。

ページオーサリング page-authoring

ページをオーサリングする場合、構造化された領域は次のようになります。

コンテンツフレーム content-frame

ページコンテンツがコンテンツフレームでレンダリングされます。コンテンツフレームはエディターから独立しており、CSS や JavaScript による競合が発生しないようにします。

コンテンツフレームは、ウィンドウの右側セクションの、ツールバーの下に表示されます。

エディターフレーム editor-frame

エディターフレームによって編集機能が有効になります。

エディターフレームは、すべてのページオーサリング要素のためのコンテナ（抽象）です。コンテンツフレームの上にあり、以下が含まれます。

サイドパネル side-panel

3 つのデフォルトのタブが含まれます。「アセット」タブおよび「コンポーネント」タブを使用すると、そのような要素を選択し、パネルからドラッグしてページにドロップできます。「コンテンツツリー」タブを使用すると、ページ上のコンテンツの階層を調査できます。

サイドパネルは、デフォルトでは非表示です。選択すると、左側に表示されるか、モバイルデバイス上などウィンドウの幅が 1024 ピクセル未満の場合は、横にスライドしてウィンドウ全体を覆います。

サイドパネル - アセット side-panel-assets

「アセット」タブでは、様々なアセットから選択できます。また、特定の用語に基づいてフィルタリングしたり、グループを選択したりすることもできます。

サイドパネル - アセットグループ side-panel-asset-groups

「アセット」タブにはドロップダウンがあり、特定のアセットグループを選択できます。

サイドパネル - コンポーネント side-panel-components

「コンポーネント」タブでは、様々なコンポーネントから選択できます。また、特定の用語に基づいてフィルタリングしたり、グループを選択したりすることもできます。

サイドパネル - コンテンツツリー side-panel-content-tree

「コンテンツツリー」タブでは、ページ上のコンテンツの階層を表示できます。タブ内のエントリをクリックすると、エディター内のページ上のアイテムに移動し、そのアイテムを選択できます。

オーバーレイ overlays

コンテンツフレームをオーバーレイし、コンポーネントおよびそのコンテンツとの透過的なインタラクション方法を実現するために、レイヤーによって使用されます。

オーバーレイは、エディターフレーム内に（他のすべてのページオーサリング要素と共に）ありますが、実際はコンテンツフレームの適切なコンポーネントにオーバーレイします。

レイヤー layer

レイヤーは、独立した機能バンドルであり、アクティベートすると次のことが可能です。

レイヤーを使用すると、個々のコンポーネントに特定のアクションが提供されるのではなく、ページ全体に高度な機能が提供されます。

AEM には、編集、プレビュー、注釈など、ページオーサリング用のレイヤーがいくつか実装済みですレイヤー。

レイヤースイッチャー layer-switcher

レイヤースイッチャーを使用すると、使用するレイヤーを選択できます。 閉じた場合は、現在使用中の画層を示します。

レイヤースイッチャーは、ツールバー（ウィンドウ上部、エディターフレーム内）からドロップダウンとして使用できます。

コンポーネントツールバー component-toolbar

コンポーネントの各インスタンスは、（1 回クリックするか、ゆっくりしたダブルクリックで）クリックするとツールバーを表示します。ツールバーには、ページ上のコンポーネントインスタンスで使用できる特定のアクション（コピー、ペースト、エディターを開くなど）が含まれます。

表示可能なスペースによって、コンポーネントツールバーは、適切なコンポーネントの右上または右下の隅に配置されます。

その他の情報 further-information

技術情報について詳しくは、ページエディター用の JS ドキュメントセットを参照してください。