Adobe Experience Manager タッチ操作対応 UI の概念 concepts-of-the-aem-touch-enabled-ui

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

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

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

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

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

AEM テクノロジースタック aem-technology-stack

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

Granite granite

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

Granite UI granite-ui

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

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

GraniteUI.pdf

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

クライアントサイドとサーバーサイド client-side-vs-server-side

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

クライアント側 client-side

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

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

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

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

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

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

granite.ui.content

サーバーサイド server-side

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

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

/libs/granite/ui/components/foundation

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

granite.ui.content

クラシック UI との違い differences-with-the-classic-ui

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

Granite UI 基盤コンポーネント granite-ui-foundation-components

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

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

/libs/granite/ui/components/foundation

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

目的：

実装：

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

ExtJS と対応する Granite UI コンポーネント extjs-and-corresponding-granite-ui-components

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

Granite UI 管理コンポーネント granite-ui-administration-components

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

目的：

実装：

Coral UI coral-ui

CoralUI.pdf

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

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

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

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

HTML 要素 - マークアップレイヤー html-elements-the-markup-layer

HTML 要素は、すべての基本 UI 要素（ナビゲーションバー、ボタン、メニュー、パネルなど）に共通のルックアンドフィールを提供します。

最も基本的なレベルの HTML 要素は、専用のクラス名を持つ HTML タグです。より複雑な要素は、（特定の方法で）相互にネストされた複数のタグで構成できます。

CSS を使用して、実際のルックアンドフィールを指定します。ルックアンドフィールを簡単にカスタマイズできるように（ブランド設定を行う場合など）、実際のスタイル値は、実行時に LESS プリプロセッサーによって展開される変数として宣言します。

目的：

実装：

例えば、マークアップは次のようになります。

<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>

このマークアップは次のように表示されます。

ルックアンドフィールは LESS で定義し、専用のクラス名によって要素に関連付けます（次の抜粋は短縮され、簡潔に示されています）。

.btn {
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    .buttonBackground(@btnBackground,
                                @btnBackgroundHighlight,
                                @grayDark, 0 1px 1px rgba(255,255,255,.75));

実際の値は LESS 変数ファイルで定義します（次の抜粋は短縮され、簡潔に示されています）。

@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;

要素プラグイン element-plugins

HTML 要素の多くは、ポップアップメニューの表示／非表示など、何らかの動的動作を示す必要があります。要素プラグインがこの役割を担い、JavaScript を使用して DOM を操作することで、このようなタスクを実行します。

プラグインは次のいずれかです。

プラグインの動作は、次のいずれかの方法でパラメーターを使用してカスタマイズできます。

開発者はどのプラグインにも最適なアプローチを選択できますが、経験則では以下のように使用します。

フォームの検証を実装する場合も同じ概念を使用します。要素を検証する場合、必要な入力フォームをカスタムの data-* 属性として指定する必要があります。この属性は、検証プラグインのオプションとして使用されます。

目的：

実装：

次にマークアップの例の抜粋を示します（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>

次に jQuery プラグインの呼び出しを示します。

$('.cards').cardlayout ();

これは次のように表示されます。

cardLayout プラグインでは、囲まれた UL 要素のレイアウトを決定する際、それぞれの高さを基準とし、さらに親の幅を考慮します。

HTML 要素ウィジェット html-elements-widgets

ウィジェットでは、1 つ以上の基本要素を JavaScript プラグインと組み合わせて「上位」の UI 要素を形成します。これにより、単一要素の場合と比較して、より複雑な動作と、より複雑なルックアンドフィールを実装できます。タグピッカーやパネルウィジェットがよい例です。

ウィジェットは、カスタムイベントのトリガーとリッスンの両方を行って、ページ上の他のウィジェットと連携できます。一部のウィジェットは、Coral HTML 要素を使用するネイティブ jQuery ウィジェットです。

目的：

実装：

マークアップの例を次に示します。

<input type="text" name="tags" placeholder="Tags" class="tagManager"/>

jQuery プラグインの呼び出し（オプション指定あり）を次に示します。

$(".tagManager").tagsManager({
        prefilled: ["Pisa", "Rome"] })

プラグインは HTML マークアップを発行します（このマークアップでは、他のプラグインを内部で使用する基本要素を使用しています）。

<span>Pisa</code>
<a title="Removing tag" tagidtoremove="0"
   id="myRemover_0" class="myTagRemover" href="#">x</a></code>

<span id="myTag_1" class="myTag"><span>Rome</code>
<a title="Removing tag" tagidtoremove="1"
   id="myRemover_1" class="myTagRemover" href="#">x</a></code>

<input type="text" data-original-title="" class="input-medium tagManager"
       placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
       autocomplete="off">

これは次のように表示されます。

ユーティリティライブラリ utility-library

このライブラリは、次のような JavaScript ヘルパープラグインや関数のコレクションです。

これには、XSS の処理やイベントバスが含まれます。

HTML 要素のプラグインおよびウィジェットは、ユーティリティライブラリが提供する機能に依存する場合がありますが、ユーティリティライブラリは、要素やウィジェット自体に強く依存できません。

目的：

実装：