タッチ UI への移行 migration-to-the-touch-ui

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

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

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

基本知識 the-basics

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

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

sling:resourceType

  • 未使用

sling:resourceType

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

ダイアログノード:

  • 名前: dialog
  • jcr:primaryTypecq:Dialog

ダイアログノード:

  • 名前: cq:dialog
  • jcr:primaryTypent: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 の開発の基本は、堅実な基礎を提供します。

ページオーサリングの移行 migrating-page-authoring

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

コンソールの移行 migrating-consoles

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

関連する考慮事項 related-considerations

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

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

その他のリソース further-resources

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

CAUTION
AEM Modernization Tools はコミュニティの取り組みであり、Adobeによるサポートや保証はありません。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2