テーマを使用したコアコンポーネントベースのアダプティブフォームのスタイル設定 themes-for-af-using-core-components

Last update: Tue Sep 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

ユーザー
開発者

バージョン

記事リンク

AEM 6.5

ここをクリックしてください

AEM as a Cloud Service

この記事

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

この記事では、テーマを使用してコアコンポーネントベースのアダプティブフォームのカスタム外観を設計する方法について説明します。

コアコンポーネントのスタイル設定に使用できるテーマ

Forms as Cloud Service が提供する、コアコンポーネントベースのアダプティブフォームのテーマを以下に示します。

テーマの構造について

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

src/theme.scss：このフォルダーには、テーマ全体に大きな影響を与える CSS ファイルが含まれます。テーマのスタイル設定と動作を一元的に定義および管理できます。このファイルを編集するとテーマ全体で共通して適用され、アダプティブフォームと AEM Sites の両方のページの外観と機能を変更することができます。
src/site：このフォルダーには、AEM Sites のページ全体に適用される CSS ファイルが含まれます。これらのファイルは、AEM Sites のページの全体的な機能やレイアウトを対象とするコードとスタイルで構成されています。ここで行った変更は、サイトのすべてのページに反映されます。[使用するタイミング]
src/components：このフォルダーの CSS ファイルは、AEM の個々のコアコンポーネント用に設計されています。コンポーネント用の各専用フォルダーには、アダプティブフォーム内の特定のコンポーネントのスタイルを設定する .scss ファイルが含まれています。例えば、/src/components/accordion/_accordion.scss ファイルには、アダプティブフォームのアコーディオンコンポーネント向けのスタイル情報が含まれています。
src/resources：このフォルダーには、アイコン、ロゴ、フォントなどの静的ファイルが含まれています。これらのリソースは、テーマの視覚的要素と全体的なデザインを強化するために使用されます。

テーマの作成

Forms as Cloud Service が提供する、コアコンポーネントベースのアダプティブフォームのアダプティブフォームスタイル設定テーマを以下に示します。

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

テーマのカスタマイズのワークフロー

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

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

前提条件 prerequisites-to-customize

Cloud Manager でのパイプラインの設定に慣れてください。また、パイプラインの設定方法に関する基本的な知識を持つことで、テーマのカスタマイズを効率的に管理およびデプロイできます。
投稿者の役割を持つユーザーを設定する方法を説明します。投稿者の役割を持つユーザーを設定する方法を理解すると、テーマのカスタマイズに必要な権限を付与できます。
Apache Maven の最新リリースをインストールします。 Apache Maven は、主に Java™ プロジェクトで使用されるビルド自動処理ツールです。最新のリリースをインストールすると、テーマのカスタマイズに必要な依存関係が確保されます。
プレーンテキストエディターをインストールします。例えば Microsoft® Visual Studio Code などです。Microsoft® Visual Studio Code などのプレーンテキストエディターを使用すると、テーマファイルの編集と変更を行う際に使いやすい環境を利用できます。

環境の設定

ローカル開発と Cloud Service 環境でのアダプティブフォームコアコンポーネントの有効化
Cloud Service 環境用にフロントエンドデプロイメントパイプラインを設定します。または、後でパイプラインを設定することもできるため、デプロイメントパイプラインを設定する前に、テーマのテストと調整に優先順位を付けることができます。

前提条件を把握し、開発環境を設定したら、具体的な要件に従ってテーマをカスタマイズまたはスタイル設定する準備が整います。

テーマのカスタマイズ steps-to-customize-a-theme-core-components

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

テーマの複製
テーマの名前の設定
テーマのカスタマイズ
テーマのテスト
テーマのデプロイ

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

まず、テーマを使用して、コアコンポーネントベースのアダプティブフォームのブランドエクスペリエンスを作成するプロセスから始めましょう。

1. テーマの複製 download-a-theme-core-components

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

テーマをコピーするには、次の手順を実行します。

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

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`

コマンドを正常に実行すると、マシンの aem-forms-theme-canvas フォルダーにテーマのローカルコピーが作成されます。

2. テーマの名前の設定 set-name-of-theme

IDE でテーマフォルダーを開きます。例えば、Visual Studio Code Editor の aem-forms-theme-canvas フォルダーを開きます。
aem-forms-theme-canvas フォルダーに移動します。

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

code language-none
`code .`

テーマフォルダーをプレーンテキストエディターで開く

Visual Studio Code でフォルダーが開きます。

package.json ファイルを編集用に開きます。

name および version 属性の値を設定します。

キャンバステーマ名の変更画像

note note
NOTE
name 属性は、テーマを一意に識別するのに使用され、指定した名前がフォーム作成ウィザードの「スタイル」タブに表示されます。選択に応じて、テーマの名前を選択できます（`mytheme` または `customtheme` など）。ここでは、名前を `aem-forms-wknd-theme` に指定します。

package-lock.json ファイルを編集用に開きます。
name および version の属性の値を設定します。Package-lock.json ファイルの name および version の属性の値は、Package.json ファイルの値と一致する必要があります。
（オプション）ReadMe ファイルを編集用に開いて、テーマの名前を更新します。
ファイルを保存して閉じます。

テーマの名前を設定する際の考慮事項

Package.json ファイルと Package-lock.json ファイルのテーマの名前から @aemforms を削除する必要があります。カスタマイズしたテーマの名前から @aemforms を削除できない場合は、テーマのデプロイメント中にフロントエンドパイプラインが失敗します。
テーマに対する時間の経過に伴う変更や機能強化が正確に反映されるよう、Package.json ファイルと Package-lock.json ファイルのテーマ version を更新することをお勧めします。
使用方法、インストール手順、その他の関連する詳細についての重要な情報は、ReadMe ファイルでテーマ名を更新することをお勧めします。

3. テーマのカスタマイズ customize-the-theme

個々のコンポーネントをカスタマイズしたり、テーマのグローバル変数を使用してテーマのレベルを変更したりすることができます。グローバル変数に対して行った変更は、すべての個々のコンポーネントに影響を与えます。例えば、グローバル変数を使用してアダプティブフォームのすべてのコンポーネントの境界線の色を変更したり、明るい塗りつぶしの色とボタンコンポーネントを使用して CTA（コールトゥアクション）を設定したりできます。

テーマレベルのスタイルの設定
コンポーネントレベルのスタイルの設定

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

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

<your-theme-sources>/src/site/_variables.scss ファイルを編集用に開きます。
任意のプロパティの値を変更します。例えば、エラーのデフォルトの色は red ですが、これを red から blue に変更する場合は、$errorvariable の16 進数カラーコードを変更します。例：$error: #196ee5。
ファイルを保存して閉じます。

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

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

また、アダプティブフォームの特定のコアコンポーネントのフォント、色、サイズ、およびその他の CSS プロパティを変更することもできます（ボタン、チェックボックス、コンテナ、フッターなど）。組織のスタイルに合わせて特定のコンポーネントの CSS ファイルを編集して、ボタンやチェックボックスのスタイルを設定できます。コンポーネントのスタイルをカスタマイズするには：

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

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

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

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

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

4. カスタマイズされたテーマのテスト test-the-theme

ローカル環境で変更をプレビューおよびテストし、様々な AEM コンポーネントの要件に応じてテーマをカスタマイズするには、次の手順を実行します。

4.1 テスト用のローカル環境の設定
4.2 ローカル環境を使用してテーマをテストする

4.1. テスト用のローカル環境の設定 rename-env-file-theme-folder

IDE でテーマフォルダーを開きます。例えば、Visual Studio Code エディターの aem-forms-theme-canvas フォルダーを開きます。

テーマフォルダーで env_template ファイルの名前を .env ファイルに変更し、次のパラメーターを追加します。

code language-none
`* AEM url AEM_URL=https://[author-instance] * AEM Adaptive form name AEM_ADAPTIVE_FORM=Form_name * AEM proxy port AEM_PROXY_PORT=7000`

例えば、フォームの URL が http://localhost:4502/editor.html/content/forms/af/contactusform.html です。したがって、次の値：

AEM_URL = http://localhost:4502/
AEM_ADAPTIVE_FORM = contactusform

ファイルを保存します。

4.2 ローカル環境を使用したテーマのテスト start-a-local-proxy-server

テーマフォルダーのルートに移動します。この場合、テーマのフォルダー名は aem-forms-theme-canvas です。
コマンドプロンプトまたはターミナルを開きます。
npm install を実行して依存関係をインストールします。

npm run live を実行して、更新されたテーマを使用したフォームをローカルブラウザーでプレビューする場合。

note note
NOTE
`npm run live` コマンドの実行中にエラーが発生した場合、`npm run live` コマンドの前に次のコマンドを実行します。
`npm install parcel --save-dev` `npm i @parcel/transformer-sass`

これはホットデプロイメントです。したがって、変更を加えて _variables.scss および button.scss ファイルを保存すると、サーバーは自動的に変更を選択し、最新の出力をプレビューします。行 [Browsersync] File event [change] は、サーバが最新の変更を認識し、ローカル環境に変更をデプロイしていることを示します。

プロキシブラウザー同期

テーマのカスタマイズに関して、テーマレベルとコンポーネントレベルの両方でアダプティブフォーム（コアコンポーネント）のスタイル設定の例に従うと、アダプティブフォームのエラーメッセージの色は blue に変わりますが、ボタンコンポーネントのラベルの色はカーソルを合わせると green になります。

テーマレベルスタイルのプレビュー

例：エラーを青色に設定

コンポーネントレベルスタイルのプレビュー

例：カーソルを合わせるときのカラーを緑色に設定

テーマをカスタマイズすると、組織の要件に応じて、コアコンポーネントベースのアダプティブフォームのカスタム外観を設計するのに役立ちます。

Cloud Service 環境でホストされるフォームのテーマをテストする

また、AEM Forms as a Cloud Serviceインスタンスでホストされるアダプティブフォームのテーマをテストすることもできます。クラウドインスタンス上でホストされるアダプティブフォームを使用して、テーマをテストするためのローカル環境を設定するには、次の手順を実行します。

IDE でテーマフォルダーを開きます。例えば、Visual Studio Code エディターの aem-forms-theme-canvas フォルダーを開きます。

env_template ファイルを .env ファイルに名前を変更し、次のパラメーターを追加します。

code language-none
`* AEM url AEM_URL=https://[author-instance] * AEM Adaptive form name AEM_ADAPTIVE_FORM=Form_name * AEM proxy port AEM_PROXY_PORT=7000`

例えば、クラウド環境のフォームの URLは https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html です。したがって、次の値：

AEM_URL = https://author-XXXX-cmstg.adobeaemcloud.com/
AEM_ADAPTIVE_FORM = contactusform

ファイルを保存します。

ローカルユーザーを作成します。

note note
NOTE
ローカルユーザーを作成するには、以下の手順に従います。
AEM ホーム／ツール／セキュリティ／ユーザーに移動します。ユーザーが `forms-users` グループのメンバーであることを確認してください。

テーマフォルダーのルートに移動します。この場合、テーマのフォルダー名は aem-forms-theme-canvas です。
npm run live を実行すると、ローカルブラウザーにリダイレクトされます。
SIGN IN LOCALLY (ADMIN TASKS ONLY) をクリックして、ローカルユーザーの資格情報を使用してログインします。

最新の変更を含むアダプティブフォームをプレビューできます。テーマフォルダーでの変更内容が完了したら、フロントエンドパイプラインを使用して、AEM Cloud Service 環境にテーマをデプロイします。

5. テーマのデプロイ deploy-the-theme

フロントエンドパイプラインを使用して Cloud Service 環境にテーマをデプロイするには、以下を行います。

5.1 テーマのリポジトリを作成
5.2 リポジトリへの変更のプッシュ
5.3. フロントエンドパイプラインの実行

5.1 テーマのリポジトリを作成 create-a-new-theme-repo

テーマをデプロイするには、リポジトリが必要です。AEM Cloud Manager のリポジトリにログインして、テーマの新しいリポジトリを追加します。

テーマの新しいリポジトリを作成するには、リポジトリ／リポジトリを追加 をクリックします。
リポジトリを追加 ダイアログボックスで「リポジトリの名前」を指定します。例えば、custom-canvas-theme-repo などと指定します。
「保存」をクリックします。

「リポジトリ URL をコピー」をクリックし、リポジトリの URL をコピーします。

キャンバステーマの URL

note note

NOTE

1 つのリポジトリを複数のテーマに使用できます。
異なるテーマをデプロイするには、別々のフロントエンドパイプラインを作成する必要があります。
例えば、キャンバステーマ、WKND テーマ、イーゼルテーマ用に custom-canvas-theme-repo という同じレポジトリを使用できます。ただし、テーマをデプロイするには、別々のフロントエンドパイプラインを作成する必要があります。特定のテーマに対する今後のカスタマイズは、対応するフロントエンドパイプラインを使用してデプロイされます。

5.2. リポジトリへの変更のプッシュ committing-the-changes

次に、変更を AEM Forms Cloud Service のテーマリポジトリにプッシュします。

テーマフォルダーのルートに移動します。ここでは、テーマのフォルダー名は aem-forms-theme-canvas です。
コマンドプロンプトまたはターミナルを開きます。

次のコマンドをリストされている順序で実行します。

code language-none
`git remote add [alias-name-for-repository] [URL of repository] git add . git commit git push [name-for-createdrepository]`

次に例を示します。

code language-none
`git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/ git add . git commit git push canvascloudthemerepo`

コミット済みの変更

5.3. フロントエンドパイプラインの実行 run-a-frontend-pipeline

テーマは、フロントエンドパイプラインを使用してデプロイします。。テーマをデプロイするには、次の手順を実行します。

AEM Cloud Manager リポジトリにログインします。
「パイプライン」セクションの「追加」ボタンをクリックします。
Cloud Service 環境に応じて、「実稼動以外のパイプラインを追加」または「実稼動パイプラインを追加」を選択します。ここでは「実稼動パイプラインを追加」を選択します。
設定手順に含まれる「実稼動パイプラインを追加」ダイアログで、パイプラインの名前を指定します。例えば、customcanvastheme という名前にします。
「続行」をクリックします。
ソースコード の手順で、
ターゲットデプロイメント／フロントエンドコード オプションを選択します。
最新の変更を含む リポジトリ と Git ブランチ の値を選択します。ここで選択したリポジトリ名は custom-canvas-theme-repo で、Git ブランチは main です。
変更がルートフォルダーにある場合は、/ として「コードの場所」を選択します。
「保存」をクリックします。

パイプラインの設定が完了したら、コールトゥアクションカードが更新されます。
作成したパイプラインを右クリックします。
「実行」をクリックします。

作成が完了すると、オーサーインスタンスでテーマを使用できるようになります。これは、アダプティブフォームの作成中に作成ウィザードの「スタイル」タブに表示されます。

「スタイル」タブで使用可能なカスタムのテーマ

カスタマイズされたテーマは、コアコンポーネントベースのアダプティブフォームでブランドエクスペリエンスを作成する際に役立ちます。

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

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

AEM Forms オーサーインスタンスにログインします。
Adobe Experience Manager／Forms／フォームとドキュメント を選択します。
作成／アダプティブフォーム の順にクリックします。アダプティブフォームを作成するためのウィザードが開きます。
「ソース」タブでコアコンポーネントテンプレートを選択します。
「スタイル」タブでテーマを選択します。
「作成」をクリックします。

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

ベストプラクティス best-practices

別のテーマに属するアセットの回避

テーマを編集する際、アセット（画像など）を他のテーマから参照して追加することができます。例えば、ページの背景を編集しているとします。例えば、ページ ／背景／追加／画像を選択すると、他のテーマの画像を参照して追加することが可能なダイアログが表示されます。

アセットを別のテーマから追加し、そのテーマが移動または削除されると、現在のテーマに問題が生じる場合があります。他のテーマからアセットを参照して追加しないようにすることをお勧めします。
コンテナパネルのレイアウト幅の変更

コンテナパネルのレイアウト幅の変更はお勧めしません。コンテナパネルの幅を指定すると、幅が静的になり、様々なディスプレイに合わせて調整されません。

よくある質問 faq

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

A：グローバルレベルとコンポーネントレベルの両方でカスタマイズが行われる場合は、コンポーネントレベルでのカスタマイズが優先されます。