アダプティブフォームテーマの作成またはカスタマイズ

適用先： ✅アダプティブフォームのコアコンポーネント❎ アダプティブフォームの基盤コンポーネント.

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

使用可能なテーマ

AEM 6.5 環境は、コアコンポーネントベースのアダプティブForms向けに、次のテーマを提供しています。

• キャンバステーマ
• WKND テーマ
• EASEL のテーマ

テーマの構造について

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

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

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

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

  

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

テーマの作成

AEM Forms 6.5 では、コアコンポーネントベースのアダプティブFormsについて、以下に示すテーマを提供しています。

• キャンバステーマ
• WKND テーマ
• EASEL のテーマ

以下が可能です。 テーマを作成するためにこれらのテーマをカスタマイズする.

テーマのカスタマイズ

テーマのカスタマイズとは、テーマの外観を変更し、パーソナライズするプロセスを指します。 テーマをカスタマイズすると、デザイン要素、レイアウト、色、タイポグラフィ、および基になるコードが変更される場合があります。 これにより、テーマで提供される基本的な構造と機能を維持しながら、Web サイトやアプリケーションの独自のカスタマイズされた外観を作成できます。

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

• アダプティブFormsコアコンポーネントの有効化 環境に適用されます。

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

• を作成する方法を学ぶ Adobe Experience Managerのクライアントライブラリ. AEMはクライアントライブラリを提供します。このライブラリを使用すると、クライアントサイドコードをリポジトリに保存し、カテゴリに整理し、コードの各カテゴリをクライアントに提供するタイミングと方法を定義できます。

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

• AEM Forms環境が起動および実行中であることを確認します。

テーマをカスタマイズする際の考慮事項

• 必ず アダプティブFormsコアコンポーネントの有効化に使用するアーキタイププロジェクト を使用してテーマをカスタマイズします。

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

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

テーマのカスタマイズ

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

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

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

1.テーマの Git リポジトリを複製します。

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

• キャンバステーマ
• WKND テーマ
• EASEL のテーマ

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

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

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

      git clone [Path of Git Repository of the theme]
   

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

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

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

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

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

2. テーマをカスタマイズする

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

• テーマレベルのスタイルを設定する

• コンポーネントレベルスタイルを設定する

テーマレベルのスタイルを設定する

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

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

2. 任意のプロパティの値を変更します。 例えば、デフォルトのエラー色は赤です。 エラーの色を赤から青に変更するには、 $error変数を使用します。 例：$error: #196ee5。

   

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

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

コンポーネントレベルスタイルを設定する

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

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

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

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

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

3.テーマをデプロイする準備をする

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

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

2. <your-theme-sources> フォルダーに移動します。例：C:\aem-forms-theme-canvas

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

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

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

       npm run create-clientlib --category=adaptiveform.theme.customcanvastheme
   

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

   

   

4.テーマをローカル環境にデプロイする

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

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

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

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

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

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

   mvn clean install

   

5.テーマを実稼動環境にデプロイする

ローカル開発環境でテーマを正常にテストしたら、作成者インスタンスと発行インスタンスの両方を含む実稼動環境にテーマをデプロイする手順に進むことができます。 テーマを実稼動環境にデプロイするには、次の手順に従います。

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

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

テーマをアダプティブフォームに適用する

アダプティブフォームにテーマを適用する手順は次のとおりです。

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

2. Experience Manager のログインページに資格情報を入力します。選択 Adobe Experience Manager > Forms > Forms & Documents.

3. クリック 作成 > アダプティブForms.

4. アダプティブFormsコアコンポーネントテンプレートを選択し、 次へ. The プロパティを追加 現在

5. 次を指定します。 名前 アダプティブフォームに適用されます。

   メモ

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

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

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

テーマの削除

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

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

よくある質問

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

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

Q: カスタムテーマが テーマクライアントライブラリ?

回答： カスタムテーマが テーマクライアントライブラリ ドロップダウンで、次の手順に従います。

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

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

       formstheme:true
       allowproxy:true
   

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

関連トピック

• コアコンポーネントベースのアダプティブフォームの作成
• ルールエディターを使用して、フォームに動的な動作を追加します。
• コアコンポーネントベースのアダプティブFormsのテーマを作成またはカスタマイズする
• コアコンポーネントベースのアダプティブFormsのテンプレートを作成する
• アダプティブフォームを作成するか、AEM Sitesページまたはエクスペリエンスフラグメントに追加する
• サンプルのテーマ、テンプレートおよびフォームデータモデル