ドキュメントAEM 6.5ユーザーガイド

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

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

基本知識

移行時には、クラシック 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 タッチ操作対応 UI の概念
  • AEM タッチ操作対応 UI の構造

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

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

  • AEM コンポーネントの開発 (タッチ操作対応 UI を使用)

  • クラシックコンポーネントからの移行

  • AEM 最新化ツール — クラシック UI コンポーネントのダイアログをタッチ UI に変換することに役立ちます。

    • タッチ UI には、「タッチ UI のラッパー」内でクラシック UI ダイアログを開くための互換性レイヤーがありますが、機能が限られているので、長期的には推奨されません。
  • タッチ UI でのダイアログフィールドのカスタマイズ

  • 新しい Granite UI フィールドコンポーネントの作成

  • ページオーサリングのカスタマイズ(タッチ操作対応 UI を使用)

コンソールの移行

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

  • コンソールのカスタマイズ(タッチ操作対応 UI 用)

関連する考慮事項

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

  • テンプレート - 編集可能なテンプレート
  • コアコンポーネント
  • HTL
メモ
開発 - ベストプラクティスも参照してください。

その他のリソース

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

  • ユーザーガイドの作成
  • Granite UI ドキュメント
  • AEM 6.5 Sites のチュートリアルとビデオ
  • AEM Sites の開発の手引き - WKND チュートリアル
  • AEM Gems
  • AEM 最新化ツール
注意
AEM 最新化ツールはコミュニティの取り組みであり、アドビによるサポートまたは保証の対象外です。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2