Adobe Experience Manager タッチ操作対応 UI の概念

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

作成対象：

  • 開発者

Adobe Experience Manager（AEM）は、タッチデバイスとデスクトップデバイスの両方で動作するように設計されたオーサー環境向けに、レスポンシブデザインを採用したタッチ操作対応 UI を備えています。

NOTE
タッチ対応 UI は AEM の標準 UI です。クラシック UI は AEM 6.4 で非推奨となりました。

タッチ対応 UI は以下で構成されます。

  • スイートヘッダー：

    • ロゴを表示します
    • グローバルナビゲーションへのリンクを表示します
    • 検索、ヘルプ、Experience Cloud ソリューション、通知、ユーザー設定など、その他の汎用アクションへのリンクを表示します。

  • 左側のレール（必要に応じて表示／非表示の切り替えが可能）には次を表示できます。

    • タイムライン
    • 参照
    • フィルター

  • ナビゲーションヘッダー：コンテキストに応じて、次を表示できます。

    • 現在使用しているコンソールやそのコンソール内の場所、または両方
    • 左側のパネルの選択内容
    • パンくずリスト
    • 適切な​ 作成 ​アクションへのアクセス
    • 表示の選択状況

  • 次の特長を持つコンテンツ領域：

    • コンテンツの項目（ページ、アセット、フォーラム投稿など）をリストします。
    • 必要に応じて形式（コラム、カードまたはリストなど）を指定できます。
    • レスポンシブデザインを使用します（デバイスやウィンドウのサイズに応じて自動的に表示サイズが変更されます）。
    • 無限スクロールを使用します（ページネーションがなく、すべての項目が 1 つのウィンドウに表示されます）。

chlimage_1-79

NOTE
ほとんどすべての AEM 機能がタッチ操作対応 UI に移植されています。ただし、一部の限られたケースでは、機能がクラシック UI に戻ります。詳しくは、タッチ操作対応 UI 機能のステータスを参照してください。

タッチ操作対応 UI は、複数の製品間で一貫性のあるユーザーエクスペリエンスを提供するように設計されています。次をベースとしています。

  • Coral UI（CUI）は、アドビのタッチ操作対応 UI 用のビジュアルスタイル実装です。Coral UI は、製品／プロジェクト／web アプリケーションで UI のビジュアルスタイルを採用するうえで必要となるすべてのものを備えています。
  • Granite UI コンポーネントは、Coral UI を使用して作成されています。

タッチ操作対応 UI の基本原則は次のとおりです。

  • モバイル優先（デスクトップを念頭に置きながら）
  • レスポンシブデザイン
  • コンテキストに適した表示
  • 再利用可能
  • 組み込みのリファレンスドキュメント
  • 組み込みのテスト
  • ボトムアップ設計（これらの原則がすべての要素およびコンポーネントに確実に適用されます）

タッチ操作対応 UI の構造の概要について詳しくは、AEM タッチ操作対応 UI の構造を参照してください。

AEM テクノロジースタック

AEM がベースとして使用する Granite プラットフォームには、特に Java™ コンテンツリポジトリが含まれます。

chlimage_1-80

Granite

Granite は、アドビのオープン web スタックで、次のような様々なコンポーネントを提供します。

  • アプリケーションランチャー
  • すべてがデプロイされる OSGi フレームワーク
  • アプリケーションの構築をサポートする複数の OSGi 簡易サービス
  • 様々なログ API を提供する包括的なログフレームワーク
  • JCR API 仕様の CRX リポジトリ実装
  • Apache Sling web フレームワーク
  • 現在の CRX 製品の追加要素
NOTE
Granite は、アドビ内でオープンな開発プロジェクトとして進められています。コード、ディスカッションおよび問題に会社全体が関与しています。
ただし、Granite はオープンソースプロジェクトでは​ ありません。いくつかのオープンソースプロジェクト（特に Apache Sling、Felix、Jackrabbit および Lucene）を重要なベースとしていますが、アドビは公開部分と非公開部分を明確に区別しています。

Granite UI

Granite エンジニアリングプラットフォームには、基盤 UI フレームワークも用意されています。主な目的は次のとおりです。

  • 詳細な UI ウィジェットの提供
  • UI の概念を実装し、ベストプラクティス（長いリストのレンダリング、リストのフィルタリング、オブジェクト CRUD、CUD ウィザードなど）を説明します。
  • 拡張可能なプラグインベースの管理 UI の提供

これらは次の要件に準拠しています。

  • 「モバイル優先」を重視
  • 拡張可能
  • 上書きが簡単

chlimage_1-81
GraniteUI.pdf

ファイルを取得
Granite UI は次のようになります。

  • Sling の RESTful アーキテクチャを使用
  • コンテンツ中心の web アプリケーションの構築を目的としたコンポーネントライブラリを実装
  • 詳細な UI ウィジェットの提供
  • デフォルトの標準化された UI を提供
  • 拡張可能
  • モバイルデバイスとデスクトップデバイスの両方に対応（モバイル優先）
  • Granite ベースのすべてのプラットフォーム／製品／プロジェクト（AEM など）で使用

chlimage_1-82