タッチ UI への移行

最終更新日： 2024年7月15日

適用対象：
Experience Manager 6.5

トピック：
開発

作成対象：

開発者

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

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

NOTE

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

基本知識

移行時には、クラシック 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 の開発の基本は、堅牢な基礎を提供します。

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

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

AEM コンポーネントの開発（タッチ操作対応 UI を使用）
クラシックコンポーネントからの移行
AEM 最新化ツール — クラシック UI コンポーネントのダイアログをタッチ UI に変換することに役立ちます。
- タッチ UI には、「タッチ UI のラッパー」内でクラシック UI ダイアログを開くための互換性レイヤーがありますが、機能が限られているので、長期的には推奨されません。
タッチ UI でのダイアログフィールドのカスタマイズ
新しい Granite UI フィールドコンポーネントの作成
ページオーサリングのカスタマイズ（タッチ操作対応 UI を使用）