Adobe Experience Manager タッチ操作対応 UI の概念
Adobe Experience Manager（AEM）は、タッチデバイスとデスクトップデバイスの両方で動作するように設計されたオーサー環境向けに、レスポンシブデザインを採用したタッチ操作対応 UI を備えています。
メモタッチ対応 UI は以下で構成されます。
-
スイートヘッダー：
- ロゴを表示します
- グローバルナビゲーションへのリンクを表示します
- 検索、ヘルプ、Experience Cloud ソリューション、通知、ユーザー設定など、その他の汎用アクションへのリンクを表示します。
-
左側のレール（必要に応じて表示／非表示の切り替えが可能）には次を表示できます。
- タイムライン
- 参照
- フィルター
-
ナビゲーションヘッダー：コンテキストに応じて、次を表示できます。
- 現在使用しているコンソールやそのコンソール内の場所、または両方
- 左側のパネルの選択内容
- パンくずリスト
- 適切な 作成 アクションへのアクセス
- 表示の選択状況
-
次の特長を持つコンテンツ領域：
- コンテンツの項目（ページ、アセット、フォーラム投稿など）をリストします。
- 必要に応じて形式（コラム、カードまたはリストなど）を指定できます。
- レスポンシブデザインを使用します（デバイスやウィンドウのサイズに応じて自動的に表示サイズが変更されます）。
- 無限スクロールを使用します（ページネーションがなく、すべての項目が 1 つのウィンドウに表示されます）。
メモタッチ操作対応 UI は、複数の製品間で一貫性のあるユーザーエクスペリエンスを提供するように設計されています。次をベースとしています。
- Coral UI（CUI）は、アドビのタッチ操作対応 UI 用のビジュアルスタイル実装です。Coral UI は、製品／プロジェクト／web アプリケーションで UI のビジュアルスタイルを採用するうえで必要となるすべてのものを備えています。
- Granite UI コンポーネントは、Coral UI を使用して作成されています。
タッチ操作対応 UI の基本原則は次のとおりです。
- モバイル優先（デスクトップを念頭に置きながら）
- レスポンシブデザイン
- コンテキストに適した表示
- 再利用可能
- 組み込みのリファレンスドキュメント
- 組み込みのテスト
- ボトムアップ設計（これらの原則がすべての要素およびコンポーネントに確実に適用されます）
タッチ操作対応 UI の構造の概要について詳しくは、AEM タッチ操作対応 UI の構造を参照してください。
AEM テクノロジースタック
AEM がベースとして使用する Granite プラットフォームには、特に Java™ コンテンツリポジトリが含まれます。
Granite
Granite は、アドビのオープン web スタックで、次のような様々なコンポーネントを提供します。
- アプリケーションランチャー
- すべてがデプロイされる OSGi フレームワーク
- アプリケーションの構築をサポートする複数の OSGi 簡易サービス
- 様々なログ API を提供する包括的なログフレームワーク
- JCR API 仕様の CRX リポジトリ実装
- Apache Sling web フレームワーク
- 現在の CRX 製品の追加要素
メモGranite UI
Granite エンジニアリングプラットフォームには、基盤 UI フレームワークも用意されています。主な目的は次のとおりです。
- 詳細な UI ウィジェットの提供
- UI の概念を実装し、ベストプラクティス（長いリストのレンダリング、リストのフィルタリング、オブジェクト CRUD、CUD ウィザードなど）を説明します。
- 拡張可能なプラグインベースの管理 UI の提供
これらは次の要件に準拠しています。
- 「モバイル優先」を重視
- 拡張可能
- 上書きが簡単
GraniteUI.pdf
ファイルを取得
Granite UI は次のようになります。
- Sling の RESTful アーキテクチャを使用
- コンテンツ中心の web アプリケーションの構築を目的としたコンポーネントライブラリを実装
- 詳細な UI ウィジェットの提供
- デフォルトの標準化された UI を提供
- 拡張可能
- モバイルデバイスとデスクトップデバイスの両方に対応（モバイル優先）
- Granite ベースのすべてのプラットフォーム／製品／プロジェクト（AEM など）で使用
- Granite UI 基盤コンポーネント
この基盤コンポーネントライブラリは他のライブラリで使用または拡張できます。 - Granite UI 管理コンポーネント
クライアントサイドとサーバーサイド
Granite UI でのクライアントとサーバーの通信は、オブジェクトではなく、ハイパーテキストで行われるので、クライアントでビジネスロジックを認識する必要はありません。
- サーバーは HTML をセマンティックデータで強化
- クライアントはハイパーテキストをハイパーメディア（インタラクション）で強化
クライアント側
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 に使用）の違いも重要です。
Granite UI 基盤コンポーネント
Granite UI 基盤コンポーネントは、UI の構築に必要な基本的な構築ブロックを提供します。次に例を示します。
- ボタン
- ハイパーリンク
- ユーザーアバター
基盤コンポーネントは次の場所にあります。
/libs/granite/ui/components/foundation
このライブラリには、各 Coral 要素の Granite UI コンポーネントが含まれます。コンポーネントはコンテンツ主導で、その設定はリポジトリに保持されます。これにより、HTML マークアップを手動で記述しなくても、Granite UI アプリケーションを構成できます。
目的：
- HTML 要素のコンポーネントモデル
- コンポーネントの構成
- 自動単体および機能テスト
実装：
- リポジトリベースの構成と設定
- Granite プラットフォームが提供するテスト機能の使用
- JSP テンプレート
この基盤コンポーネントライブラリは他のライブラリで使用または拡張できます。
