Show Menu
トピック×

AEM タッチ操作対応 UI の構造

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

コンソール

基本レイアウトとサイズ変更

UI はモバイルデバイスとデスクトップデバイスの両方に対応します。アドビでは、2 つのスタイルを作成するのではなく、すべての画面とデバイスで機能する 1 つのスタイルを使用することにしました。
すべてのモジュールで同じ基本レイアウトを使用すると、AEM では次のような表示になります。
レイアウトはレスポンシブデザインスタイルに従い、使用するデバイス/ウィンドウのサイズに合わせて調整されます。
例えば、解像度が 1024 px 未満(モバイルデバイスなど)になると、それに応じて表示が調整されます。

Header Bar

ヘッダーバーにはグローバル要素が表示されます。
  • ロゴと、現在使用している特定の製品/ソリューションAEMの場合、これはグローバルナビゲーションへのリンクも形成します。
  • 検索
  • ヘルプリソースにアクセスするためのアイコン
  • その他のソリューションにアクセスするためのアイコン
  • ユーザー対応が必要なアラートまたはインボックス項目のインジケーター(またはそれらへのアクセス)
  • ユーザーのプロファイル管理へのリンクになっているユーザーアイコン

ツールバー

現在の場所に応じて変わり、下のページのビューやアセットの制御に関連したツールが表示されます。ツールバーは製品専用ですが、要素は若干共通しています。
どの場所でも、ツールバーには現在実行可能なアクションが表示されます。
表示される内容は、現在リソースが選択されているかどうかによっても異なります。

左レール

左レールは、必要に応じて表示/非表示を切り替えることができます。
  • タイムライン
  • リファレンス
  • フィルター
デフォルトでは​ コンテンツのみ ​が表示されます(レールは非表示です)。

ページオーサリング

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

コンテンツフレーム

ページコンテンツはコンテンツフレームにレンダリングされます。コンテンツフレームはエディターにはまったく依存していません。これは、CSS や JavaScript による競合を回避するためです。
コンテンツフレームは、ウィンドウの右側セクションの、ツールバーの下に表示されます。

エディターフレーム

エディターフレームによって編集機能が実現されます。
エディターフレームは、すべてのページオーサリング要素のためのコンテナ(抽象)です。**​コンテンツフレームの上にあり、以下が含まれます。
  • 上部のツールバー
  • サイドパネル
  • すべてのオーバーレイ
  • その他のページオーサリング要素(コンポーネントツールバーなど)

サイドパネル

デフォルトのタブが 2 つ含まれており、アセットとコンポーネントを選択し、ここからドラッグしてページにドロップできます。
サイドパネルはデフォルトでは非表示です。選択すると、左側に表示されるか、横にスライドしてウィンドウ全体を覆います(モバイルデバイスのように、ウィンドウサイズが幅 1,024 px 未満の場合)。

サイドパネル - アセット

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

サイドパネル - アセットグループ

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

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

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

オーバーレイ

コンテンツフレームをオーバーレイし、コンポーネントおよびそのコンテンツとの(完全に透過的な)インタラクション方法を実現するために、 レイヤー によって使用されます。
オーバーレイは、エディターフレーム内に(他のすべてのページオーサリング要素と共に)ありますが、実際はコンテンツフレームの適切なコンポーネントにオーバーレイします。

レイヤー

レイヤーは、独立した機能バンドルであり、アクティベートすると次のことが可能です。
  • ページを別のビューで表示
  • ページの操作やインタラクションが可能
レイヤーを使用すると、個々のコンポーネントに特定のアクションが提供されるのではなく、ページ全体に高度な機能が提供されます。
AEM には、編集、プレビュー、注釈など、ページオーサリング用のレイヤーがいくつか実装済みです。
レイヤーは強力な概念であり、ページコンテンツのユーザーのビューや、ページコンテンツとのインタラクションに影響します。独自のレイヤーを開発するときは、終了時にレイヤーがクリーンアップされることを確認する必要があります。

レイヤースイッチャー

レイヤースイッチャーを使用すると、使用するレイヤーを選択できます。閉じると、現在使用中のレイヤーが示されます。
レイヤースイッチャーは、ツールバー(ウィンドウ上部、エディターフレーム内)からドロップダウンとして使用できます。

コンポーネントツールバー

コンポーネントの各インスタンスをクリック(1 回のクリックまたはゆっくりダブルクリック)すると、そのツールバーが表示されます。ツールバーには、ページ上のコンポーネントインスタンスで使用可能(編集可能)な特定のアクション(コピー、貼り付け、エディターを開くなど)が含まれます。
表示可能なスペースによって、コンポーネントツールバーは、適切なコンポーネントの右上または右下の隅に配置されます。

その他の情報

タッチ操作対応UIに関する概念について詳しくは、「AEMタッチ対応UIの概念」の記 事を参照してください
技術情報について詳しくは、タッチ対応ペ ージエディターの JSドキュメントセットを参照してください。