AEM Forms Workspace のカスタマイズの概要

AEM Forms Workspace では、プレゼンテーションセマンティックおよびインターフェイスの機能を変更することが可能です。スタイル、レイアウト、書式設定、ブランド、およびコア機能を変更するカスタマイズのタイプについては、以下に説明します。

cu_customized_workspace_example

カスタマイズされた Workspace の例

カスタマイズの種類

AEM Forms Workspace では、幅広く様々なカスタマイズをサポートしてユーザーインターフェイスのレイアウト、その表示方法、機能などを更新します。カスタマイズでは以下のうちの 1 つ以上を更新します。

  • ユーザーインターフェイスの表示方法
  • セマンティックのカスタマイズを使用した機能
  • 他のアプリケーションでの HTML コンポーネントの再利用

ユーザーインターフェイスの変更

AEM Forms Workspace の表示方法、レイアウト、およびその他のプレゼンテーションセマンティックを変更できます。CSS、HTML テンプレートおよび JavaScript™ ファイルをカスタマイズすることによって、Workspace を変更します。すべてのデフォルトファイルはデフォルトのインストレーションで提供されます。

最も一般的な手順については、AEM Forms Workspace カスタマイズの一般的な手順を参照してください。詳細な手順を含む、カスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。

スタイルシートの理解

Workspace をカスタマイズする前に、/libs/ws/css/style.css にある AEM Forms 付属のデフォルトスタイルシートを理解しておいてください。

Workspace をカスタマイズするには、/libs/ws/css フォルダー内にある既存のスタイルシート style.css を理解しておくことをお勧めします。新しい主なコンポーネントを以下に説明します。

CSS 要素

変更されたユーザーインターフェイスコンポーネント

#ヘッダー

AEM Forms Workspace のヘッダー

.categoryList

カテゴリーリスト

.categoryList .header

カテゴリーリストのヘッダー

.categories、.filters

カテゴリーリストの下の空白

.category、.filter

カテゴリ

.category:hover、.category.selected、.filter:hover、.filter.selected

選択されたカテゴリーとカテゴリーのマウスオーバースタイル

categoryListBar .tool、categoryListBar .content

開始プロセスページ (終了したカテゴリーリスト)

filterListBar .tool、filterListBar .content

To Do ページ (終了したフィルターリスト)

processNameListBar .tool、processNameListBar .content

トラッキングページ (終了したプロセス名リスト)

.startPointList、.tasklist

スタートポイントリストまたはタスクリスト

.startPointList .header、.tasklist .header

スタートポイントリストまたはタスクリストのヘッダー

.startpoint.selected、.task.selected

選択されたスタートポイントまたはタスク

.startpoint.selected .description、.task.selected .description

選択されたスタートポイントまたはタスクの説明

#taskarea

タスク領域

#header .dropdown

ヘッダー内のユーザードロップダウン

.sortDrop dd ul

ソートタスクドロップダウン

CSS

AEM Forms Workspace の表示方法は、CSS の表示方法を使用しています。CSS をカスタマイズすることにより、フォント、色、ブランド、レイアウトなどの Workspace のプレゼンテーションセマンティックを変更することができます。

CSS カスタマイズのためのトップレベルの手順を以下に示します。

  • CSS ファイルを作成します。
  • この CSS にスタイルアイテムを追加します。詳細については、「CSS スタイルについて」を参照してください。
  • html.jsp の参照を更新します。

これらのカスタマイズを行うための正確な手順については、AEM Forms Workspace カスタマイズの一般的な手順を参照してください。AEM Forms Workspace に付属している CSS ファイルは、/libs/ws/css/ にあります。CSS 関連のカスタマイズの場合は、出荷パッケージを使用します。CSS 関連のカスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。

画像

AEM Forms Workspace をカスタマイズしてユーザーのアバターを追加したり、組織のロゴを追加することができます。これらのカスタマイズの場合は、出荷パッケージを使用します。

画像をカスタマイズするためのトップレベルの手順を以下に示します。

  • WebDAV をインストールして設定します。
  • 新しい画像を追加します。
  • 追加した画像に対応する新しいスタイルを追加します。
  • html.jsp ファイル内の新しい CSS ファイルにリンクします。

AEM Forms Workspace の画像のカスタマイズを開始するには、AEM Forms Workspace カスタマイズの一般的な手順に従います。画像に関係するカスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。

HTML テンプレート

HTML テンプレートは、Workspace ユーザーインターフェイスの表示方法とレイアウトを定義するのに役立ちます。デフォルトの HTML テンプレートを更新することによって、デフォルトのユーザーインターフェイスのレイアウトをカスタマイズできます。

HTML テンプレートをカスタマイズするためのトップレベルの手順を以下に示します。

  • ユーザーが作成したフォルダーで、必要なデフォルトのファイルのコピーを作成します。
  • 新しいテンプレートをユーザー定義フォルダーに追加します。
  • 新しいテンプレートのパスなど、コピーしたファイルに関連する更新を行います。

このようなカスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。カスタマイズするテンプレートに応じて、Ship パッケージまたは Dev パッケージのいずれかを選択します。

セマンティックの変更

AEM Forms Workspace の機能を変更するには、JavaScript ソースコードを変更します。コア機能の変更は、セマンティックの変更としてラベル付けされます。AEM Forms Workspace のソースコードの一部として、モデル、ビュー、およびテンプレートを変更します。

セマンティックの変更を行って AEM Forms Workspace の機能を変更するためのトップレベルの手順を次に示します。

  • ユーザーが作成したフォルダーで、該当するデフォルトのファイルのコピーを作成します。
  • ユーザー定義フォルダーに新しいモデルおよびビューを追加します。
  • デフォルトの JavaScript ファイルで新しく追加したモデルおよびビューのパスを更新するなど、関連する更新を行います。
  • パッケージを縮小してパフォーマンスを最適化します。

ソースコードの一部であるコンポーネントに関する概念的詳細については、「再利用可能なコンポーネントの詳細」を参照してください。これらのカスタマイズの場合は、Dev パッケージを使用します。

再利用可能なコンポーネント

AEM Forms Workspace は容易にカスタマイズや再利用が可能なコンポーネントベースのソフトウェアです。Workspace コンポーネントを Web アプリケーションで容易に統合できます。

概念的な情報について詳しくは、再利用可能なコンポーネントの詳細を参照してください。コンポーネントを使用する手順について詳しくは、Web アプリケーションでの AEM Forms Workspace コンポーネントの統合を参照してください。

AEM Forms Workspace コードの構築

SDK パッケージ

パッケージには AEM Forms Workspace のソースコードが含まれます。パッケージは、[LC root]\sdk\html-workspace\adobe-lc-workspace-src.zip に格納されています。

これは主としてカスタマイズ向けで、

  • Ship、Debug、および Dev プロファイルの CRX パッケージ（下記の CRX パッケージに記載しています）
  • カスタマイズされたコードの縮小バージョン（セマンティックの変更用）

WS コンテンツ

  • client-pkg:

    • src - CRX ノードを作成するのに必要なアーティファクトを含みます。
    • pom.xml - 様々なプロファイルのデプロイパッケージを構築するスクリプト（WS-デプロイパッケージ）

  • client-html:

    • assembly - AEM Forms Workspace SDK を作成するスクリプトが使用する zip.xml を含みます。

    • src/main/webapp -

      • css - AEM Forms Workspace のスタイルシートを含みます。

      • images - AEM Forms Workspace で使用する画像を含みます。

      • js:

        • libs - AEM Forms Workspace で使用されているすべてのサードパーティライブラリを含みます。

        • licenses - HTML および JS ファイルのライセンス、およびこれらのライセンスをそれぞれのソースファイルの前に置くコードを含みます。

        • minifier - カスタマイズされた JavaScript コードの結合、縮小および醜怪化に使用されます。

        • resourcejs_optimizer - JavaScript ソースの結合、縮小および醜怪化に使用されます。

        • resource_generator - register.js および modelcontrollerpath.js の生成に使用されます。

        • runtime:

          • initializer - AEM Forms Workspace で使用するバックボーンビューやモデルを初期化するために使用する initializer.js を含みます。
          • models - AEM Forms Workspace にあるすべてのコンポーネントのバックボーンモデルを含みます。
          • routes - AEM Forms Workspace に開始プロセス、todo、トラッキングおよび環境設定を読み込む JavaScript ファイルと HTML ファイルを含みます。
          • services - AEM Forms Workspace 内で使用されている service.js を含みます。すべてのサーバー呼び出しは service.js を介して行われます。
          • templates - AEM Forms Workspace 内にあるすべてのテンプレート、すなわちすべてのビューの HTML ファイルを含みます。
          • util - AEM Forms Workspace 内で使用されているすべてのユーティリティファイル（javascrip）を含みます。
          • views - AEM Forms Workspace 内のすべてのコンポーネントのバックボーンビューを含みます。

        • main.js

        • router.js

      • libs/ws：pdf.html および pluginPing.pdf は、PDF フォームを AEM Forms Workspace に読み込むのに使用されます。WSNextAdapter.swf は、SWF フォームおよび Guide を AEM Forms Workspace に読み込むのに使用されます。

      • locales:

        • de-DE - ドイツ語の translation.json を含みます。
        • en-US - 英語の translation.json を含みます。
        • fr-FR - フランス語の translation.json を含みます。
        • ja-JP - 日本語の translation.json を含みます。
        • html.jsp - 現在のブラウザーのロケールを調べるコードを含みます。

      • html.jsp

      • GET.jsp

CRX パッケージ

CRX パッケージは CRX™ リポジトリにデプロイすることができます。これは、[LC root]\crx-repository\install\adobe-lc-workspace-pkg.zip に格納されています。

このパッケージは、以下の 3 つのプロフィルを使用して構築することができます。

プロファイル 説明 使用方法
Ship プロファイル このプロファイルは縮小を使用して最も小さい CRX パッケージを作成します。このパッケージが最も効率的です。すべての JavaScript™ ファイルは単一の JS ファイルに結合されて縮小されます。 このプロファイルは、JS ファイルにこれ以上セマンティックの変更が必要でない場合に使用します。
Debug プロファイル このプロファイルは、適度に効率的な CRX パッケージを作成します。このパッケージのサイズは、Ship プロファイルを使用して作成したパッケージよりも若干大きくなります。このパッケージにはほとんどの JavaScript ファイルが単一の JS ファイルに結合されています。 このプロファイルはデバッグに使用します。
Dev プロファイル このプロファイルは、最も大きなサイズの CRX パッケージを作成します。すべての JavaScript ファイルは SDK パッケージ内にあるため、別々に入手することができます。 セマンティックの変更を組み込む場合はこのプロファイルを使用します。

Ship プロファイル

コマンド

  • クライアントに出荷される Source パッケージの client-pkg フォルダーへの mvn clean -P Ship install
  • Ship プロファイルコマンド実行は 64 ビット JVM でのみ 動作します。

WS コンテンツ

  • css - style.css、ie.css および jquery-ui.css を含みます。

  • images - すべての画像を含みます。

  • js:

    • libs:

      • require - require.js を含みます。
      • jqueryui - jquery.ui.datepicker.ja.js を含みます。

    • runtime:

      • templates - AEM Forms Workspace 内にあるすべてのテンプレート、すなわちすべてのコンポーネントの HTML ファイルを含みます。

    • main.js （combined、minified および uglified）。

    • registry.js

  • libs:

    • ws - pluginPing.pdf、pdf.html および WSNextAdapter.swf を含みます。

  • Locale - .content.xml を含みます。

  • locales:

    • de-DE - ドイツ語の translation.json を含みます。
    • en-US - 英語の translation.json を含みます。
    • fr-FR - フランス語の translation.json を含みます。
    • ja-JP - 日本語の translation.json を含みます。
    • html.jsp - 現在のブラウザーのロケールを調べるコードを含みます。

  • Index - .content.xml を含みます。

  • profile - offline.jsp を含みます。

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

Debug プロファイル

コマンド

  • client-pkg への mvn clean -P Debug install
  • Debug プロファイルコマンド実行は 64 ビット JVM でのみ機能します。

WS コンテンツ

  • css - style.css、ie.css および jqueri-ui.css を含みます。

  • images - すべての画像を含みます。

  • js:

    • libs:

      • require - require.js を含みます。
      • jqueryui - jquery.ui.datepicker.ja.js を含みます。

    • runtime:

      • templates - AEM Forms Workspace 内にあるすべてのテンプレート、すなわちすべてのコンポーネントの HTML ファイルを含みます。

    • main.js (組み合わせ)

    • registry.js

  • libs:

    • ws - pluginPing.pdf、pdf.html および WSNextAdapter.swf を含みます。

  • Locale - .content.xml を含みます。

  • locales:

    • de-DE - ドイツ語の translation.json を含みます。
    • en-US - 英語の translation.json を含みます。
    • fr-FR - フランス語の translation.json を含みます。
    • ja-JP - 日本語の translation.json を含みます。
    • html.jsp - 現在のブラウザーのロケールを調べるコードを含みます。

  • Index - .content.xml を含みます。

  • profile - offline.jsp を含みます。

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

Dev プロファイル

コマンド

client-pkg への mvn clean -P Dev install

WS コンテンツ

  • css - style.css、ie.css および jqueri-ui.css を含みます。

  • images - すべての画像を含みます。

  • js:

    • libs - AEM Forms Workspace で使用されているすべてのライブラリを含みます。

    • require - require.js を含みます。

    • jqueryui - jquery.ui.datepicker.ja.js を含みます。

    • runtime:

      • initializer - initializer.js と modelcontrollerpath.js を含みます。
      • models - AEM Forms Workspace 内のすべてのコンポーネントのモデルを含みます。
      • routes - AEM Forms Workspace に開始プロセス、todo、トラッキングおよび環境設定を読み込む JavaScript ファイルと HTML ファイルを含みます。
      • services - AEM Forms Workspace 内で使用されている service.js を含みます。
      • templates - AEM Forms Workspace 内にあるすべてのテンプレート、すなわちすべてのコンポーネントの HTML ファイルを含みます。
      • util - AEM Forms Workspace 内で使用されているすべてのユーティリティファイル（javascrip）を含みます。
      • views - AEM Forms Workspace 内のすべてのコンポーネントのビューを含みます。

    • main.js

    • registry.js

    • router.js

  • libs:

    • ws - pluginPing.pdf、pdf.html および WSNextAdapter.swf を含みます。

  • Locale - .content.xml を含みます。

  • locales:

    • de-DE - ドイツ語の translation.json を含みます。
    • en-US - 英語の translation.json を含みます。
    • fr-FR - フランス語の translation.json を含みます。
    • ja-JP - 日本語の translation.json を含みます。
    • html.jsp - 現在のブラウザーのロケールを調べるコードを含みます。

  • Index - .content.xml を含みます。

  • profile - offline.jsp を含みます。

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

このページ