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

最終更新日： 2024年7月15日
  • 適用対象：
  • Experience Manager 6.5

作成対象：

  • 開発者

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

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

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

  • スイートヘッダー：

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

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

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

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

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

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

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

chlimage_1-79

メモ
ほとんどすべての 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 製品の追加要素
メモ
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

クライアントサイドとサーバーサイド

Granite UI でのクライアントとサーバーの通信は、オブジェクトではなく、ハイパーテキストで行われるので、クライアントでビジネスロジックを認識する必要はありません。

  • サーバーは HTML をセマンティックデータで強化
  • クライアントはハイパーテキストをハイパーメディア（インタラクション）で強化

chlimage_1-83

クライアント側

HTML ボキャブラリの拡張が使用され、作成者はインタラクティブな web アプリケーションを構築するという意向を表明できるようになります。これは、WAI-ARIA および microformats と同様のアプローチです。

主に、クライアントサイドで実行される JS および CSS コードによって解釈されるインタラクションパターンのコレクション（例えば、フォームの非同期送信）で構成されます。クライアントサイドの役割は、（サーバーによってハイパーメディアアフォーダンスとして指定された）マークアップを拡張してインタラクティブ機能を持たせることです。

クライアントサイドは、どのサーバーテクノロジーとも無関係です。サーバーが適切なマークアップを提供している限り、クライアントサイドはその役割を果たすことができます。

現在、JS および CSS コードは、Granite clientlibs として、次のカテゴリで提供されています。

granite.ui.foundation and granite.ui.foundation.admin

これらはコンテンツパッケージの一部として提供されています。

granite.ui.content

サーバーサイド

sling コンポーネントのコレクションによって形成され、作成者は Web アプリケーションを迅速に構成できるようになります​ 。 ​開発者はコンポーネントを開発し、作成者はコンポーネントを組み立てて web アプリを作成します。サーバーサイドの役割は、ハイパーメディアアフォーダンス（マークアップ）をクライアントに提供することです。

現在、コンポーネントは Granite リポジトリの次の場所にあります。

/libs/granite/ui/components/foundation

これはコンテンツパッケージの一部として提供されています。

granite.ui.content

クラシック UI との違い

Granite UI と ExtJS（クラシック UI に使用）の違いも重要です。

ExtJSGranite UI
リモート手続き呼び出しステートのトランジション
データ移行オブジェクトハイパーメディア
クライアントはサーバの内部を把握していますクライアントは内部を把握していません
「ファットクライアント」「シンクライアント」
専用クライアントライブラリユニバーサルクライアントライブラリ

Granite UI 基盤コンポーネント

Granite UI 基盤コンポーネントは、UI の構築に必要な基本的な構築ブロックを提供します。次に例を示します。

  • ボタン
  • ハイパーリンク
  • ユーザーアバター

基盤コンポーネントは次の場所にあります。

/libs/granite/ui/components/foundation

このライブラリには、各 Coral 要素の Granite UI コンポーネントが含まれます。コンポーネントはコンテンツ主導で、その設定はリポジトリに保持されます。これにより、HTML マークアップを手動で記述しなくても、Granite UI アプリケーションを構成できます。

目的：

  • HTML 要素のコンポーネントモデル
  • コンポーネントの構成
  • 自動単体および機能テスト

実装：

  • リポジトリベースの構成と設定
  • Granite プラットフォームが提供するテスト機能の使用
  • JSP テンプレート

この基盤コンポーネントライブラリは他のライブラリで使用または拡張できます。

ExtJS と対応する Granite UI コンポーネント

Granite UI を使用するように ExtJS コードをアップグレードする際は、次のリストでは、ExtJS xtype およびノードタイプと、それぞれに対応する Granite UI のリソースタイプを確認できます。

ExtJS xtypeGranite UI のリソースタイプ
buttongranite/ui/components/foundation/form/button
checkboxgranite/ui/components/foundation/form/checkbox
componentstylescq/gui/components/authoring/dialog/componentstyles
cqincludegranite/ui/components/foundation/include
datetimegranite/ui/components/foundation/form/datepicker
dialogfieldsetgranite/ui/components/foundation/form/fieldset
hiddengranite/ui/components/foundation/form/hidden
html5smartfile, html5smartimagegranite/ui/components/foundation/form/fileupload
multifieldgranite/ui/components/foundation/form/multifield
numberfieldgranite/ui/components/foundation/form/numberfield
pathfield, paragraphreferencegranite/ui/components/foundation/form/pathbrowser
selectiongranite/ui/components/foundation/form/select
sizefieldcq/gui/components/authoring/dialog/sizefield
tagsgranite/ui/components/foundation/form/autocomplete``cq/gui/components/common/datasources/tags
textareagranite/ui/components/foundation/form/textarea
textfieldgranite/ui/components/foundation/form/textfield
ノードタイプGranite UI のリソースタイプ
cq:WidgetCollectiongranite/ui/components/foundation/container
cq:TabPanelgranite/ui/components/foundation/container``granite/ui/components/foundation/layouts/tabs
cq:panelgranite/ui/components/foundation/container

Granite UI 管理コンポーネント

Granite UI 管理コンポーネントは、基盤コンポーネントをベースに構築され、あらゆる管理アプリケーションが実装できる汎用構築ブロックを提供します。次に例を示します。

  • グローバルナビゲーションバー
  • パネル（スケルトン）
  • 検索パネル

目的：

  • 管理アプリケーションの統一されたルックアンドフィール
  • 管理アプリケーション向けの Rad

実装：

  • 基盤コンポーネントを使用した事前定義済みのコンポーネント
  • カスタマイズ可能なコンポーネント

Coral UI

CoralUI.pdf

ファイルを取得
Coral UI（CUI）は、アドビのタッチ操作対応 UI 用のビジュアルスタイルを実装したものです。複数の製品間で一貫性のあるユーザーエクスペリエンスを提供するように設計されています。Coral UI は、オーサリング環境で使用されるビジュアルスタイルを採用するのに必要なものをすべて備えています。

注意
Coral UI は、AEM のお客様が製品ライセンスの許容範囲内でアプリケーションや web インターフェイスの構築に利用できる UI ライブラリです。
Coral UI は次の場合にのみ使用できます。
  • AEM にバンドルされて出荷された場合。
  • オーサリング環境の既存の UI を拡張する際に使用する場合。
  • アドビの販促品、広告、プレゼンテーション
  • アドビブランドアプリケーションの UI（フォントは他の用途にすぐに利用できないようにする必要があります）。
  • わずかにカスタマイズされている場合。
次の場合は、Coral UI の使用は避けてください。
  • アドビに関係しないドキュメントやその他の項目。
  • コンテンツ作成環境（前述の項目が他者によって生成される可能性がある場合）。
  • アドビと明確なつながりのないアプリケーション／コンポーネント／web ページ

Coral UI は、web アプリケーションを開発するための構成要素のコレクションです。

chlimage_1-84

最初からモジュール式に設計され、各モジュールは、主な役割に基づいて個別のレイヤーを形成します。レイヤーは相互にサポートするように設計されていますが、必要に応じて単独で使用することもできます。これにより、あらゆる HTML 対応環境で Coral のユーザーエクスペリエンスを実装できます。

Coral UI では、特定の開発モデルやプラットフォームを使用することは必須ではありません。Coral の主な目的は、統一されたクリーンな HTML5 マークアップを提供することにあり、このマークアップを実際に生成する方法は関係しません。これは、クライアントサイドまたはサーバサイドのレンダリング、テンプレート、JSP、PHP、さらには Adobe Flash RIA アプリケーションなどに使用される場合があります。