Adobe Experience Manager(AEM) タッチ操作対応 UI には、基盤となる原則があり、いくつかの主要な要素で構成されています。
UI はモバイルデバイスとデスクトップデバイスの両方に対応します。アドビでは、2 つのスタイルを作成するのではなく、すべての画面とデバイスで機能する 1 つのスタイルを使用することにしました。
すべてのモジュールで同じ基本レイアウトを使用すると、AEM では次のような表示になります。
レイアウトはレスポンシブデザインスタイルに従っており、使用するデバイスやウィンドウのサイズに収まるように自動で調整されます。
例えば、解像度が 1024 px 未満(モバイルデバイスなど)になると、それに応じて表示が調整されます。
ヘッダーバーにはグローバル要素が表示されます。
現在の場所に応じて変わり、下のページのビューやアセットの制御に関連したツールが表示されます。ツールバーは製品固有ですが、要素には一般的なものもあります。
どの場所でも、ツールバーには現在実行可能なアクションが表示されます。
また、リソースが選択されているかどうかにも依存します。
左レールは、必要に応じて表示/非表示を切り替えることができます。
デフォルトはです。 コンテンツのみ (非表示のレール)。
ページをオーサリングする際の構造領域は次のようになります。
ページコンテンツがコンテンツフレームにレンダリングされます。 コンテンツフレームはエディターに依存しません。これは、CSS や JavaScript による競合がないようにするためです。
コンテンツフレームは、ウィンドウの右側セクションの、ツールバーの下に表示されます。
エディターフレームが編集機能を実現します。
エディターフレームは、すべてのページオーサリング要素のためのコンテナ(抽象)です。コンテンツフレームの上にあり、以下が含まれます。
これには、アセットとコンポーネントを選択できる 2 つのデフォルトタブが含まれています。 ここからドラッグしてページにドロップできます。
サイドパネルはデフォルトでは非表示です。選択すると、左側に表示されるか、横にスライドしてウィンドウ全体を覆います(モバイルデバイスのように、ウィンドウサイズが幅 1,024 px 未満の場合)。
「アセット」タブでは、一連のアセットから選択できます。特定の用語でフィルタリングしたり、グループを選択することもできます。
「アセット」タブには、特定のアセットグループを選択するためのドロップダウンがあります。
「コンポーネント」タブでは、様々なコンポーネントから選択できます。また、特定の用語に基づいてフィルタリングしたり、グループを選択したりすることもできます。
コンテンツフレームをオーバーレイし、 レイヤー コンポーネントとそのコンテンツとの(透過的な)やり取り方法の仕組みを実現する。
オーバーレイは、エディターフレーム内に(他のすべてのページオーサリング要素と共に)ありますが、実際はコンテンツフレームの適切なコンポーネントにオーバーレイします。
レイヤーは、独立した機能バンドルであり、アクティベートすると次のことが可能です。
レイヤーを使用すると、個々のコンポーネントに特定のアクションが提供されるのではなく、ページ全体に高度な機能が提供されます。
AEMには、編集、プレビュー、注釈など、ページオーサリング用のレイヤーがいくつか実装されています。
レイヤーは、ユーザーのページコンテンツの表示や操作に影響を与える強力な概念です。 独自のレイヤーを開発する場合は、レイヤーを終了する際に、必ずクリーンアップする必要があります。
レイヤースイッチャーを使用すると、使用するレイヤーを選択できます。 閉じた場合は、現在使用中の画層を示します。
レイヤースイッチャーは、ツールバー(ウィンドウ上部、エディターフレーム内)からドロップダウンとして使用できます。
コンポーネントの各インスタンスは、(1 回クリックするか、ゆっくりしたダブルクリックで)ツールバーを表示します。 ツールバーには、ページ上のコンポーネントインスタンス(編集可能)で使用できる特定のアクション(コピー、貼り付け、エディターを開くなど)が含まれています。
表示可能なスペースによって、コンポーネントツールバーは、適切なコンポーネントの右上または右下の隅に配置されます。
タッチ操作対応 UI に関する概念について詳しくは、 AEMタッチ操作対応 UI の概念.
技術情報について詳しくは、 JS ドキュメントセット タッチ操作対応ページエディター用。