タッチ UI への移行

バージョン 6.0 以降、Adobe Experience Manager（AEM）では、タッチ操作対応 UI（単に​タッチ UI​とも呼ばれます）をクリックします。これは、Adobe Experience Cloudと、全体的なAdobeユーザーインターフェイスのガイドラインに合わせて表示されます。 これは AEM の標準的な UI で、レガシーでデスクトップ向けのインターフェースは​クラシック UI と呼ばれています。

クラシック UI でAEMを使用している場合は、インスタンスを移行するためのアクションを実行します。 このページは、それぞれのリソースへのリンクを提供することで、スプリングボードとしての役割を果たすことを目的としています。

メモ

このような移行プロジェクトは、インスタンスに大きな影響を与える可能性があります。詳しくは、プロジェクトの管理 — ベストプラクティスを参照してください。

基本知識

移行時には、クラシック UI とタッチ UI の主な違いに注意してください。

クラシック UI タッチ操作対応 UI
JCR リポジトリでノードの構造として記述されます。UI の要素を表すすべてのノードは ExtJS ウィジットと呼ばれ、ExtJS によってクライアントサイドでレンダリングされます。 JCR リポジトリでもノードの構造として説明されています。ただし、この場合、すべてのノードは Sling リソースタイプ（Sling コンポーネント）を参照し、そのレンダリングを担当します。 したがって、UI は（基本的に）サーバーサイドでレンダリングされます。

sling:resourceType

  • 未使用
 sling:resourceType
  • 使用済み
  • 例えば、次のように参照します。
    cq/gui/components/authoring/dialog

ダイアログノード：

  • 名前： dialog
  • jcr:primaryType: cq:Dialog

ダイアログノード：

  • 名前： cq:dialog
  • jcr:primaryType: nt:unstructured

JavaScript の場所：

  • 必須部分は、リスナーを使用して直接埋め込むか、clientlib で管理します。

JavaScript の場所：

  • 必須部分は、ダイアログ定義に埋め込むことはできません。これは、責任の分離です。

イベントの処理：

  • ダイアログウィジェットは JavaScript コードを直接参照します。

イベントの処理：

  • JavaScript がダイアログイベントを監視します。
クライアントがレンダリングを実行：
  • クライアントは UI コンポーネントを動的に作成します。
  • クライアントは、（JSON 形式で）サーバーからコンポーネント定義をリクエスト（プル）します。
 サーバーがレンダリングを実行：
  • クライアントは、関連する UI と共にページを要求します。
  • サーバーは UI を HTML ドキュメントとして送信（プッシュ）します。Coral UI コンポーネントを使用します。

つまり、UI の一部をクラシック UI からタッチ UI に移行するということは、ExtJS ウィジェット​を Sling コンポーネント​に移行することを意味します。これを容易にするために、タッチ UI は、Granite UI フレームワークに基づいています。このフレームワークは、既に UI 用の Sling コンポーネント（Granite UI コンポーネントと呼ばれます）を提供しています。

開始する前に、ステータスと関連する推奨事項を確認してください。

タッチ UI の開発の基本は、堅実な基礎を提供します。

ページオーサリングの移行

コンポーネントを移行する際、ダイアログは主な要因です。

コンソールの移行

また、コンソールをカスタマイズすることもできます。

タッチ UI への移行とは直接関係ありませんが、移行に際して検討を推奨する関連事項として、次のものがあります。

メモ

開発 - ベストプラクティスも参照してください。

その他のリソース

AEM の開発について詳しくは、以下のリソースのコレクションを参照してください。

注意

AEM Modernization Tools はコミュニティの取り組みであり、Adobeによるサポートや保証はありません。

このページ