タッチ操作対応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によるサポートや警戒は行われていません。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now