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

最終更新日： 2024年7月15日
  • 適用対象：
  • Experience Manager 6.5
  • トピック：

作成対象：

  • 管理者
  • ユーザー
  • 開発者

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 .contentTo 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 関連のカスタマイズの場合は、Ship パッケージを使用します。CSS 関連のカスタマイズの特殊な例について詳しくは、この記事の最後にある関連ヘルプトピックを参照してください。

画像

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

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

  • 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 内で使用されているすべてのユーティリティファイル（JavaScript）を含みます。
          • 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