タッチ操作対応UIへの移行

バージョン6.0以降、Adobe Experience Manager(AEM)は、タッチ対応UI(単に​タッチUI​とも呼ばれる)と呼ばれる新しいユーザーインターフェイスを導入しました。 これは、Adobe Marketing CloudおよびAdobeのユーザインターフェイスの全体的なガイドラインと一致します。 これは、従来のデスクトップ指向インターフェイス(クラシックUI)を備えたAEMの標準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によるサポートや警戒は行われていません。

このページ