ドキュメントAEM 6.5ユーザーガイド

アダプティブフォームテーマを作成またはカスタマイズ introduction-to-theme

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 管理者
  • 開発者
バージョン
記事リンク
AEM as a Cloud Service
ここをクリックしてください
AEM 6.5
この記事

AEM Forms 6.5 では、テーマは、アダプティブフォームのスタイル（ルック＆フィール）を定義するために使用する AEM クライアントライブラリのことです。テーマには、コンポーネントとパネルのスタイルを設定するための詳細情報が含まれています。スタイルには、背景カラー、ステートカラー、透明度、配置、サイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。テーマはアダプティブフォームを参照せずに独立して管理され、複数のアダプティブフォーム間で再利用できます。

使用可能なテーマ available-theme

AEM 6.5 環境は、コアコンポーネントベースのアダプティブフォーム向けに、以下のテーマを備えています。

テーマの構造について understanding-structure-of-theme

テーマは、CSS ファイル、JavaScript ファイル、およびアダプティブフォームのスタイルを定義するリソース（アイコンなど）を網羅するパッケージです。アダプティブフォームのテーマは、次のコンポーネントで構成される特定の組織に従います。

  • src/theme.scss：このフォルダーには、テーマ全体に大きな影響を与える CSS ファイルが含まれます。テーマのスタイル設定と動作を一元的に定義および管理できます。このファイルを編集するとテーマ全体で共通して適用され、アダプティブフォームと AEM Sites の両方のページの外観と機能を変更することができます。

  • src/site：このフォルダーには、AEM Sites のページ全体に適用される CSS ファイルが含まれます。これらのファイルは、AEM Sites ページの全体的な機能やレイアウトに影響を与えるコードとスタイルで構成されています。ここで行った変更は、サイトのすべてのページに反映されます。

  • src/components：このフォルダーの CSS ファイルは、AEMの個々のコアコンポーネント用に設計されています。コンポーネントの各専用フォルダーには、アダプティブフォーム内の特定のコンポーネントのスタイルを設定する .scss ファイルが含まれています。例えば、/src/components/button/_button.scss ファイルには、アダプティブフォームのボタンコンポーネントのスタイル情報が含まれています。

    カンバステーマの構造

  • src/resources：このフォルダーには、アイコン、ロゴ、フォントなどの静的ファイルが含まれています。これらのリソースは、テーマの視覚的要素と全体的なデザインを強化するために使用されます。

テーマを作成

AEM Forms 6.5 は、コアコンポーネントベースのアダプティブフォーム向けに、以下のテーマを備えています。

これらのテーマをカスタマイズしてテーマを作成することができます。

テーマをカスタマイズ customize-a-theme-core-components-based-adaptive-forms

テーマのカスタマイズとは、テーマのアピアランスを変更し、パーソナライズするプロセスを指します。テーマをカスタマイズすると、デザイン要素、レイアウト、色、テキスト編集、基になるコードに変更を加えることができます。これにより、テーマで提供される基本的な構造と機能を維持しながら、web サイトやアプリケーションに独自のカスタマイズされたアピアランスを作成できます。

NOTE
  • パッケージマネージャーを使用して、すべてのオーサーインスタンスとパブリッシュインスタンスにテーマをデプロイします。
  • テーマのクライアントライブラリの読み込みおよび書き込みは、他のパッケージと同様に、パッケージマネージャーを使用して行われます。

テーマをカスタマイズするための前提条件 prerequisites

  • 環境でのアダプティブフォームコアコンポーネントの有効化

  • Apache Maven の最新リリースをインストールします。 Apache Maven は、主に Java™ プロジェクトで使用されるビルド自動処理ツールです。最新のリリースをインストールすると、テーマのカスタマイズに必要な依存関係が確保されます。

  • Adobe Experience Manager のクライアントライブラリの作成方法を学ぶAEM は、クライアントライブラリを提供しています。これにより、クライアントサイドコードをリポジトリに格納し、カテゴリ別に整理して、それぞれのカテゴリのコードをクライアントに提供するタイミングと方法を定義できます。

  • プレーンテキストエディターをインストールします。例えば Microsoft® Visual Studio Code などです。Microsoft® Visual Studio Code などのプレーンテキストエディターを使用すると、テーマファイルの編集と変更を行う際に使いやすい環境を利用できます。

  • AEM Forms 環境が起動および実行されていることを確認してください。

テーマのカスタマイズに関する考慮事項 consideration

  • テーマをカスタマイズする場合は、お使いの環境でアダプティブフォームコアコンポーネントの有効化に使用するアーキタイププロジェクトを使用していることを確認します。

  • アダプティブフォームを公開する際、クライアントライブラリはパブリッシュインスタンスでは自動的に公開されません。アダプティブフォーム内で参照されているクライアントライブラリは、パブリッシュ環境に手動で公開してください。

  • アドビでは、クライアントライブラリのクラス名を変更しないことをお勧めします。

テーマをカスタマイズ customize-a-theme-core-components

テーマの作成またはカスタマイズは、複数の手順で行います。テーマを作成またはカスタマイズするには、次の手順をリスト順に実行します。

  1. テーマを複製
  2. テーマの外観をカスタマイズ
  3. ローカルデプロイメント用にテーマを準備
  4. テーマをローカル環境にデプロイ
  5. テーマを実稼動環境にデプロイ

このドキュメントで示す例は、カンバス ​テーマに基づいていますが、任意のテーマを複製し、同じ手順を使用してカスタマイズできます。これらの手順はどのテーマにも適用でき、特定のニーズに応じてテーマを変更できます。

1. テーマの Git リポジトリを複製する clone-git-repo-of-theme

コアコンポーネントベースのアダプティブフォームのテーマを複製するには、次のいずれかのテーマを選択します。

次の手順を実行して、テーマを複製します。

  1. コマンドプロンプトまたはターミナルウィンドウをローカル開発環境で開きます。

  2. git clone コマンドを実行して、テーマを複製します。

    code language-none 
       git clone [Path of Git Repository of the theme]

    [テーマの Git リポジトリのパス]を、テーマの対応する Git リポジトリの実際の URL に置き換えます。

    例えば、カンバステーマを複製するには、次のコマンドを実行します。

    code language-none 
       git clone https://github.com/adobe/aem-forms-theme-canvas

  3. 「親フォルダー内のすべてのファイルの作成者を信頼する」を選択し、「はい、私は作成者を信頼します」をクリックします。

コマンドを正常に実行すると、そのテーマのローカルコピーがお使いのコンピューターの aem-forms-theme-canvas フォルダーで使用可能になります。

2. テーマをカスタマイズ customize-the-theme

個々のコンポーネントをカスタマイズしたり、テーマのグローバル変数を使用してテーマレベルを変更したりできる柔軟性があります。グローバル変数を変更すると、個々のコンポーネントすべてにカスケードエフェクトが適用されます。例えば、グローバル変数を利用して、アダプティブフォーム内のすべてのコンポーネントの境界線の色を変更したり、鮮やかな塗りつぶし色をコールトゥアクション (CTA) ボタンに適用したりできます。以下の操作を実行できます。

テーマレベルのスタイルを設定する theme-customization-global-level

variable.scss ファイルは、テーマのグローバル変数を含んでいます。これらの変数を更新すると、テーマレベルでスタイル関連の変更ができます。テーマレベルのスタイルを適用するには、次の手順を実行します。

  1. <your-theme-sources>/src/site/_variables.scss ファイルを編集用に開きます。

  2. 任意のプロパティの値を変更します。例えば、デフォルトのエラーの色は赤です。エラーの色を赤から青に変更するには、$error 変数の 16 進数カラーコードを変更します。例えば、$error: #196ee5 のように指定します。

    例：エラーの色を青に設定

  3. ファイルを保存して閉じます。

同様に、variable.scss ファイルを使って、フォントファミリーとタイプ、テーマおよびフォントカラー、フォントサイズ、テーマ間隔、エラーアイコン、テーマの境界線のスタイルなど、複数のアダプティブフォームコンポーネントに影響を与える変数を設定できます。

コンポーネントレベルのスタイルを設定する component-based-customization

また、特定のアダプティブフォームコアコンポーネント（ボタン、チェックボックス、コンテナ、フッターなど）のフォント、カラー、サイズ、その他の CSS プロパティをカスタマイズすることもできます。特定のコンポーネントに関連付けられた CSS ファイルを編集することで、そのスタイルを組織のブランディングに合わせることができます。コンポーネントのスタイルをカスタマイズするには、次の手順を実行します。

  1. <your-theme-sources>/src/components/<component>/<component.scss> ファイルを編集用に開きます。例えば、ボタンコンポーネントのフォントの色を変更するには、<your-theme-sources>/src/components/button/button.scss ファイルを開きます。

  2. 必要に応じて値を変更します。例えば、ポインタを合わせたときのボタンコンポーネントの色を緑に変更するには、cmp-adaptiveform-button__widget:hover クラスで color: $white プロパティの値を 16 進数コード #12b453 またはその他の緑の色合いに変更します。最終的なコードは次のようになります。

    code language-none 
     .cmp-adaptiveform-button__widget:hover {
 background: $dark-gray;
 color: #12b453;
 }

  3. ファイルを保存して閉じます。

NOTE
テーマレベルとコンポーネントレベルの両方でスタイルを定義する場合、コンポーネントレベルで定義されたスタイルが優先されます。

3. デプロイメント用にテーマを準備 generate-the-clientlib

AEM インスタンスにテーマをデプロイするには、テーマをクライアントライブラリに変換する必要があります。テーマをクライアントライブラリに変換するには、次の手順に従います。

  1. コマンドプロンプトまたはターミナルウィンドウを開きます。

  2. <your-theme-sources> フォルダーに移動します。例えば、C:\aem-forms-theme-canvas のように指定します。

  3. 次のコマンドを実行します。

    code language-none 
       npm run create-clientlib --category=adaptiveform.theme.[yourtheme]

    [yourtheme] をカスタムテーマの名前に置き換えます。例えば、カスタムテーマの名前が customcanvastheme の場合、次のコマンドを実行します。

    code language-none 
        npm run create-clientlib --category=adaptiveform.theme.customcanvastheme

    コマンドが正常に実行されると、themerepo\theme-clientlibs\[yourtheme] にクライアントライブラリフォルダーが作成されます。

    クライアントライブラリの生成

    クライアントライブラリの場所

4. ローカル環境にテーマをデプロイ deploy-the-theme-on-a-local-environment

ローカル開発またはテスト環境にテーマをデプロイするには、次の手順に従います。

  1. アーキタイププロジェクトの次のパスに、前の節で作成したクライアントライブラリをコピーします。

    /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

  2. コマンドプロンプトまたはターミナルを開きます。

  3. アダプティブフォームのコアコンポーネントを有効にするために使用する AEM アーキタイププロジェクトのルートディレクトリに移動します。

  4. 次のコマンドを実行して、環境にカスタムテーマをデプロイします。

    mvn clean install

    クライアントライブラリのビルド

5. 実稼動環境にテーマをデプロイ deploy-theme

ローカル開発環境でテーマのテストを正常に行うことができたら、オーサーインスタンスとパブリッシュインスタンスの両方を含む実稼動環境にテーマをデプロイする手順を実行できます。実稼動環境にテーマをデプロイするには、次の手順に従います。

  1. AEM 環境にログインします。
  2. パッケージマネージャーを開きます。デフォルトの URL は https://localhost:4502/crx/packmgr/index.jsp です。
  3. 「パッケージをアップロード」、「参照」の順にクリックします。
  4. [AEM Archetype Project Folder]\all\target[appid].all-[version].zip に移動して選択します。「開く」をクリックします。
  5. 「インストール」をクリックします。すべての実稼動環境でこの手順を繰り返します。

パッケージがインストールされると、テーマを選択できるようになります。

テーマクライアントライブラリ

NOTE
パブリッシュインスタンスのログインダイアログにアクセスして、パッケージマネージャーでパッケージをインストールできない場合は、次の URL を使用してログインしてみてください：http://[Publish Server URL]:[PORT]/system/consoleこれにより、パブリッシュインスタンスにログインして、インストールプロセスを続行できます。

アダプティブフォームにテーマを適用 using-theme-in-adaptive-form

アダプティブフォームにテーマを適用するには、次の手順を実行します。

  1. AEM オーサーインスタンスにログインします。

  2. Experience Manager のログインページに資格情報を入力します。Adobe Experience Manager／Forms／フォームとドキュメント ​を選択します。

  3. 作成／アダプティブフォーム ​の順にクリックします。

  4. アダプティブフォームコアコンポーネントテンプレートを選択し、「次へ」をクリックします。プロパティを追加 ​が表示されます。

  5. アダプティブフォームの​ 名前 ​を指定します。

    note note
    NOTE
    • デフォルトでは、adaptiveform.theme.canvas3 のテーマが選択されています。
    • 別のテーマは​ テーマクライアントライブラリ ​ドロップダウンメニューから選択できます。

  6. 「作成」をクリックします。

アダプティブフォームのテーマは、アダプティブフォームの作成時にスタイルを定義する、アダプティブフォームのテンプレートの一部として使用されます。

テーマを削除 delete-a-theme

未使用または不要なテーマを削除するには：

  1. オーサーインスタンスにログインします。
  2. http://[Publish Server URL]:[PORT]/crx/de/index.jsp を開きます。
  3. apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme] に移動します。
  4. テーマフォルダーを削除し、変更を保存します。

よくある質問 faq

Q：テーマフォルダーのカスタマイズをグローバルレベルとコンポーネントレベルの両方で行う場合、どちらのカスタマイズが優先されますか？

A：テーマレベルとコンポーネントレベルの両方でスタイルを定義すると、コンポーネントレベルで定義されたスタイルが優先されます。

Q：カスタムテーマが​ テーマクライアントライブラリ ​に表示されていない場合、どうすればよいですか？

A：カスタムテーマが​ テーマクライアントライブラリ ​ドロップダウンに表示されない場合は、次の手順に従ってください。

  1. カスタムテーマのクライアントライブラリを追加した場所に移動します。推奨パスは /ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme> です。

  2. .content.xml ファイルを開き、次のメタデータを含めます。

    code language-none 
        formstheme:true
    allowproxy:true

  3. ファイルを保存し、テーマを再デプロイします。

関連トピック

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2