某些 Creative Cloud 应用程序、服务和功能在中国不可用。
アドビは、AEM 5.6 でオーサー環境にレスポンシブデザインを採用した新しいタッチ操作向け UI を導入しました。この UI はタッチデバイスとデスクトップデバイスの両方で動作するように設計されているので、元のクラシック UI とは大きく異なります。
このタッチ操作向け UI は、クラシック UI に代わり、現在は AEM の標準 UI となっています。
注意：
現在はこのタッチ操作向け UI が AEM の標準 UI ですが、クラシック UI もまだサポートされています。
タッチ操作向け UI は以下で構成されます。
- スイートヘッダー：以下を表示します。
- ロゴ
- グローバルナビゲーションへのリンク
- 検索、ヘルプ、Marketing Cloud ソリューション、通知、ユーザー設定など、その他の汎用アクションへのリンク
- 左側のレール（必要に応じて表示／非表示の切り替えが可能）：以下を表示できます。
- タイムライン
- 参照
- フィルター
- タイムライン
- ナビゲーションヘッダー：コンテキストに応じて、以下を表示できます。
- 現在使用しているコンソールや、そのコンソール内の場所
- 左側のレールの選択内容
- パンくずリスト
- 適切な作成アクションへのアクセス
- 表示の選択状況
- 現在使用しているコンソールや、そのコンソール内の場所
- コンテンツ領域
- コンテンツの項目（ページ、アセット、フォーラム投稿など）のリストを表示します。
- 必要に応じて形式（コラム、カードまたはリストなど）を指定できます。
- レスポンシブデザインを使用します（デバイスやウィンドウサイズに応じて自動的に表示サイズが変更されます）。
- 無限スクロールを使用します（ページネーションがなく、すべての項目が 1 つのウィンドウに表示されます）。
注意：
ほとんどすべての AEM 機能がタッチ操作向け UI に移植されています。ただし、一部の限られたケースでは、機能がクラシック UI に戻ります。詳しくは、タッチ操作対応 UI 機能のステータスを参照してください。
タッチ操作向け UI は、複数の製品間で一貫性のあるユーザーエクスペリエンスを提供するように設計されています。以下をベースとしています。
- Coral UI（CUI）は、アドビのタッチ操作向け UI 用のビジュアルスタイル実装です。Coral UI は、製品／プロジェクト／Web アプリケーションで UI のビジュアルスタイルを採用するために必要となるすべてのものを備えています。
- Granite UI コンポーネントは、Coral UI を使用して構築されています。
タッチ操作向け UI の基本原則は次のとおりです。
- モバイル優先（デスクトップを念頭に置きながら）
- レスポンシブデザイン
- コンテキスト関連のディスプレイ
- 再利用可能
- 組み込みのリファレンスドキュメント
- 組み込みのテスト
- ボトムアップ設計（これらの原則がすべての要素およびコンポーネントに確実に適用されます）
Granite は、次のような各種コンポーネントを提供するアドビの公開 Web スタックです。
- アプリケーションランチャー
- すべてのデプロイ先となる OSGi フレームワーク
- アプリケーションの構築をサポートする多数の OSGi 簡易サービス
- 様々なログ API を提供する包括的なログフレームワーク
- JCR API 仕様の CRX リポジトリ実装
- Apache Sling Web フレームワーク
- 現在の CRX 製品の追加要素
注意：
Granite は、アドビ内で公開開発プロジェクトとして進められています。コード、ディスカッションおよび問題に会社全体が関与しています。
ただし、Granite はオープンソースプロジェクトではありません。いくつかのオープンソースプロジェクト（特に Apache Sling、Felix、Jackrabbit および Lucene）を重要なベースとしていますが、公開部分と非公開部分を明確に区別しています。
Granite エンジニアリングプラットフォームには、基盤 UI フレームワークも備わっています。主な目的は次のとおりです。
- 詳細な UI ウィジェットを提供します。
- UI 概念を実装し、ベストプラクティス（長いリストのレンダリング、リストのフィルター処理、オブジェクト CRUD、CUD ウィザードなど）を実践します。
- 拡張可能なプラグインベースの管理 UI を提供します。
ダウンロード
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 クライアント側ライブラリとして、次のカテゴリで提供されています。
granite.ui.foundation および granite.ui.foundation.admin
これらはコンテンツパッケージの一部として提供されています。
granite.ui.content
sling コンポーネントのコレクションによって形成され、作成者は Web アプリケーションを迅速に構成できるようになります。開発者がコンポーネントを開発し、作成者がそれらのコンポーネントを Web アプリケーションとしてアセンブルします。サーバー側の役割は、ハイパーメディアアフォーダンス（マークアップ）をクライアントに提供することです。
現在、コンポーネントは Granite リポジトリの次の場所にあります。
/libs/granite/ui/components/foundation
これはコンテンツパッケージの一部として提供されています。
granite.ui.content
| ExtJS | Granite UI |
| リモートプロシージャコール | 状態遷移 |
| データ転送オブジェクト | ハイパーメディア |
| クライアントによるサーバーの内部認識あり | クライアントによるサーバーの内部認識なし |
| 「ファットクライアント」 | 「シンクライアント」 |
| 専用クライアントライブラリ | 汎用クライアントライブラリ |
Granite UI 基盤コンポーネントは、UI を構築するために必要な基本の構築ブロックを提供します。次に例を示します。
- ボタン
- ハイパーリンク
- ユーザーアバター
このライブラリには、各 Coral 要素に対応する Granite UI コンポーネントが含まれています。コンポーネントはコンテンツに基づき、その設定はリポジトリに保持されます。これにより、HTML マークアップを手動で記述しなくても、Granite UI アプリケーションを構成することができます。
目的：
- HTML 要素のコンポーネントモデル
- コンポーネントの構成
- 自動単体および機能テスト
実装：
- 構成および設定に基づくリポジトリ
- Granite プラットフォームによって提供されるテスト機能を利用
- JSP テンプレート
Granite UI を使用するように ExtJS コードをアップグレードするときは、以下のリストを参照すると、ExtJS xtype およびノードタイプと、それぞれに対応する Granite UI のリソースタイプを確認できます。
| ExtJS xtype | Granite UI リソースタイプ |
| button | granite/ui/components/foundation/form/button |
| checkbox | granite/ui/components/foundation/form/checkbox |
| componentstyles | cq/gui/components/authoring/dialog/componentstyles |
| cqinclude | granite/ui/components/foundation/include |
| datetime | granite/ui/components/foundation/form/datepicker |
| dialogfieldset | granite/ui/components/foundation/form/fieldset |
| hidden | granite/ui/components/foundation/form/hidden |
| html5smartfile、html5smartimage | granite/ui/components/foundation/form/fileupload |
| multifield | granite/ui/components/foundation/form/multifield |
| numberfield | granite/ui/components/foundation/form/numberfield |
| pathfield、paragraphreference | granite/ui/components/foundation/form/pathbrowser |
| selection | granite/ui/components/foundation/form/select |
| sizefield | cq/gui/components/authoring/dialog/sizefield |
| tags | granite/ui/components/foundation/form/autocomplete cq/gui/components/common/datasources/tags |
| textarea | granite/ui/components/foundation/form/textarea |
| textfield | granite/ui/components/foundation/form/textfield |
| ノードタイプ | Granite UI リソースタイプ |
| cq:WidgetCollection | granite/ui/components/foundation/container |
| cq:TabPanel | granite/ui/components/foundation/container granite/ui/components/foundation/layouts/tabs |
| cq:panel | granite/ui/components/foundation/container |
Granite UI 管理コンポーネントは、基盤コンポーネントをベースに構築され、管理アプリケーションによって実装可能な一般的な構築ブロックを提供します。次に例を示します。
- グローバルナビゲーションバー
- パネル（スケルトン）
- 検索パネル
ダウンロード
Coral UI（CUI）は、アドビのタッチ操作向け UI 用のビジュアルスタイル実装です。タッチ操作向け UI は、複数の製品間で一貫性のあるユーザーエクスペリエンスを提供するように設計されています。Coral UI は、オーサー環境で使用されるビジュアルスタイルを採用するために必要となるすべてのものを備えています。
警告：
Coral UI は、AEM お客様が製品のライセンスで許容される範囲内でアプリケーションや Web インターフェイスを構築するために利用可能な UI ライブラリです。
Coral UI の使用は以下の場合にのみ認められます。
- AEM と一緒に出荷およびバンドルされている場合
- オーサー環境の既存の UI を拡張する目的で使用する場合
- アドビの販促品、広告、プレゼンテーション
- Adobe ブランドのアプリケーションの UI（他の用途で簡単に使用できるフォントは不可）
- わずかにカスタマイズされている場合
以下の場合は、Coral UI は使用しないでください。
- アドビに関係のないドキュメントその他の項目
- コンテンツ作成環境（前述の項目が他人によって生成されるおそれがある場合）
- アドビと明確なつながりのないアプリケーション／コンポーネント／Web ページ
最初からモジュール式として設計されており、各モジュールはそれぞれの主要な役割に基づいて個別のレイヤーを形成します。レイヤーは相互にサポートするように設計されていますが、必要に応じて単独で使用することもできます。これにより、あらゆる HTML 対応環境に Coral のユーザーエクスペリエンスを実装することが可能です。
Coral UI では、特定の開発モデルやプラットフォームを使用することは必須ではありません。Coral の主な目的は、統一されたクリーンな HTML5 マークアップを提供することにあり、このマークアップを実際に発行する方法は問いません。Coral は、クライアント側またはサーバー側でのレンダリング、テンプレート、JSP、PHP、さらには Adobe Flash RIA アプリケーションをはじめ、様々なものに使用されています。
実際のルックアンドフィールは CSS で指定します。ルックアンドフィールを簡単にカスタマイズできるように（ブランド設定をおこなう場合など）、実際のスタイル値は、実行時に LESS プリプロセッサーによって展開される変数として宣言します。
目的：
- 基本 UI 要素のルックアンドフィールを共通化
- デフォルトのグリッドシステムを提供
実装：
- ブートストラップからアイデアを得たスタイルを HTML タグで使用
- クラスは LESS ファイルで定義
- アイコンはフォントスプライトとして定義
<button class="btn btn-large btn-primary" type="button">Large button</button> <button class="btn btn-large" type="button">Large button</button>
.btn {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.buttonBackground(@btnBackground,
@btnBackgroundHighlight,
@grayDark, 0 1px 1px rgba(255,255,255,.75));
@btnBackgroundHighlight: darken(@white, 10%); @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @baseFontSize: 17px; @baseFontFamily: @sansFontFamily;
HTML 要素の多くは、ポップアップメニューの表示／非表示など、何らかの動的動作を示す必要があります。要素プラグインがこの役割を担い、JavaScript を使用して DOM を操作することによってこのようなタスクを実行します。
プラグインは次のいずれかです。
- 特定の DOM 要素に作用するように設計されています。例えば、ダイアログプラグインは、DIV class=dialog を検索することを想定しています。
- 汎用的な性質を持ちます。例えば、レイアウトマネージャーは、DIV または LI 要素のリスト用のレイアウトを提供します。
プラグインの動作は、次のいずれかの方法でパラメーターを使用してカスタマイズできます。
- Javascript 呼び出しによってパラメーターを渡します。
- HTML マークアップに関連付けられた専用の data-* 属性を使用します。
どのプラグインについても開発者がベストアプローチを選択できますが、経験則として以下を使用します。
- data-* 属性 - HTML レイアウトに関連するオプションの場合（列数を指定する場合など）
- API オプション／クラス - データに関連する機能の場合（表示する項目のリストを作成する場合など）
フォーム検証を実装する場合も同じ概念を使用します。要素を検証する場合、必要な情報フォームをカスタムの data-* 属性として指定する必要があります。この属性を検証プラグインのオプションとして使用します。
注意：
可能である場合または拡張する場合は、HTML5 固有のフォーム検証を使用する必要があります。
目的：
- HTML 要素の動的動作を提供
- CSS だけでは実現できないカスタムレイアウトを提供
- フォーム検証を実行
- 高度な DOM 操作を実行
実装：
- 特定の DOM 要素に関連付けた jQuery プラグイン
- data-* 属性を使用した動作のカスタマイズ
<ul data-column-width="220" data-layout="card" class="cards">
<li class="item">
<div class="thumbnail">
<img href="/a.html" src="/a.thumb.319.319..png">
<div class="caption">
<h4>Toolbar</h4>
<p><small>toolbar</small><br></p>
</div>
</div>
</li>
<li class="item">
<div class="thumbnail">
<img href="/a.html" src="/a.thumb.319.319..png">
<div class="caption">
<h4>Toolbar</h4>
<p><small>toolbar</small><br></p>
</div>
</div>
</li>
$(‘.cards’).cardlayout ();
ウィジェットでは、javascript プラグインを使用して 1 つ以上の基本要素を結合し、上位の UI 要素を形成します。これにより、単一要素の場合と比較して、より複雑な動作、さらにはより複雑なルックアンドフィールを実装できます。タグピッカーやパネルウィジェットがよい例です。
ウィジェットは、カスタムイベントの呼び出しとリスンの両役割を果たし、ページ上の他のウィジェットと連携できます。一部のウィジェットは、実際には Coral HTML 要素を使用するネイティブ jQuery ウィジェットです。
<input type="text" name="tags" placeholder="Tags" class="tagManager"/>
$(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"] })
<span>Pisa</span>
<a title="Removing tag" tagidtoremove="0"
id="myRemover_0" class="myTagRemover" href="#">x</a></span>
<span id="myTag_1" class="myTag"><span>Rome</span>
<a title="Removing tag" tagidtoremove="1"
id="myRemover_1" class="myTagRemover" href="#">x</a></span>
<input type="text" data-original-title="" class="input-medium tagManager"
placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
autocomplete="off">
