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

AEM 5.6Adobeでは、 レスポンシブデザイン オーサー環境用。 タッチデバイスとデスクトップデバイスの両方で動作するように設計されているので、これは元のクラシック UI とは大きく異なります。

このタッチ操作対応 UI は、クラシック UI に代わるAEMの標準 UI になりました。

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

タッチ操作対応 UI は、複数の製品間でユーザーエクスペリエンスの一貫性を保つために、Adobeが設計しました。 次の項目に基づいています。

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

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

AEM Technology Stack aem-technology-stack

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

Granite granite

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

Granite UI granite-ui

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

これらは要件に従います。

Granite UI は次のようになります。

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

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

クライアント側 client-side

作成者がインタラクティブな WebHTMLを構築する意向を表現できるように、アプリの語彙を拡張します。 これは、 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

Coral UI(CUI) は、複数の製品間でユーザーエクスペリエンスの一貫性を保つように設計された、タッチ操作対応 UI 用のAdobeのビジュアルスタイルの実装です。 Coral UI は、オーサリング環境で使用されるビジュアルスタイルを採用するために必要なすべてを提供します。

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

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

Coral UI では、特定の開発モデルやプラットフォームを使用する必要はありません。 Coral の主な目的は、このマークアップの発行に使用される実際の方法とは無関係に、統合されたクリーンなHTML5 マークアップを提供することです。 これは、クライアント側またはサーバ側のレンダリング、テンプレート、JSP、PHP、またはAdobeFlashの 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-&ast として指定されたオプションに注意）属性 ):

<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

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

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

目的：

実装：

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

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

jQuery プラグインの呼び出し（オプションを含む）:

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

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

<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">

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

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

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

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

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

目的：

実装：