タッチ操作対応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によるサポートや保証はありません。

このページ