バージョン | 記事リンク |
---|---|
AEM 6.5 | ここをクリックしてください |
AEM as a Cloud Service | この記事 |
テーマを作成して適用し、アダプティブフォームのスタイルを設定することができます。 テーマには、コンポーネントとパネルのスタイルを設定するための詳細情報が含まれています。スタイルには、背景カラー、ステートカラー、透明度、配置、サイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。テーマは、アダプティブフォームを参照せずに独立して管理され、複数のアダプティブFormsで再利用できます。
Forms as a Cloud Serviceが提供する、コアコンポーネントベースのアダプティブFormsのテーマを以下に示します。
テーマは、CSS ファイル、JavaScript ファイル、およびアダプティブFormsのスタイルを定義するリソース(アイコンなど)を含むパッケージです。 アダプティブフォームのテーマは、次のコンポーネントで構成される特定の組織に従います。
src/theme.scss
:このフォルダーには、テーマ全体に大きな影響を与える CSS ファイルが含まれます。 テーマのスタイル設定と動作を一元的に定義および管理できます。 このファイルを編集すると、テーマ全体で共通に適用される変更を加え、アダプティブFormsとAEM Sitesの両方のページの外観と機能に影響を与えることができます。
src/site
:このフォルダーには、AEMサイトのページ全体に適用される CSS ファイルが含まれます。 これらのファイルは、AEM Site のページの全体的な機能やレイアウトに影響を与えるコードとスタイルで構成されています。 ここで行った変更は、サイトのすべてのページに反映されます。 [使用するタイミング]
src/components
:このフォルダーの CSS ファイルは、AEMの個々のコアコンポーネント用に設計されています。 コンポーネント用の各専用フォルダーには、 .scss
アダプティブフォーム内の特定のコンポーネントのスタイルを設定するファイル。 例えば、 /src/components/accordion/_accordion.scssファイルには、アダプティブFormsアコーディオンコンポーネントのスタイル情報が含まれています。
src/resources
:このフォルダーには、アイコン、ロゴ、フォントなどの静的ファイルが含まれています。 これらのリソースは、テーマの視覚的要素と全体的なデザインを強化するために使用されます。
Forms as Cloud Serviceが提供する、コアコンポーネントベースのアダプティブFormsのテーマを以下に示します。
以下が可能です。 新しいテーマを作成するために、これらのテーマをカスタマイズします。.
テーマのカスタマイズとは、テーマの外観を変更し、パーソナライズするプロセスを指します。 テーマをカスタマイズすると、デザイン要素、レイアウト、色、タイポグラフィ、および基になるコードが変更される場合があります。 テーマで提供される基本的な構造と機能を維持しながら、Web サイトやアプリケーションを独自のカスタマイズされた外観で作成できます。
前提条件を学習し、開発環境を設定した後、具体的な要件に従ってテーマをカスタマイズする準備が整いました。
テーマのカスタマイズは複数の手順で行います。 テーマをカスタマイズするには、次の手順を順に実行します。
このドキュメントで示す例は、 カンバス テーマに関しては重要ですが、同じ手順を使用して任意のテーマを複製し、カスタマイズできることに注意してください。 これらの手順はどのテーマにも適用でき、特定のニーズに応じてテーマを変更できます。
コアコンポーネントベースのアダプティブFormsのテーマを複製するには、次のいずれかのテーマを選択します。
テーマを複製するには、次の手順に従います。
コマンドプロンプトまたはターミナルウィンドウをローカル開発環境で開きます。
を実行します。 git clone
コマンドを使用してテーマを複製します。
git clone [Path of Git Repository of the theme]
次を [テーマの Git リポジトリのパス] を、テーマの対応する Git リポジトリの実際の URL に置き換えます。
たとえば、キャンバステーマを複製するには、次のコマンドを実行します。
git clone https://github.com/adobe/aem-forms-theme-canvas
コマンドを正常に実行すると、そのテーマのローカルコピーが aem-forms-theme-canvas
フォルダー。
テーマフォルダーをプレーンテキストエディターで開きます。 例えば、 aem-forms-theme-canvas
Visual Studio Code Editor のフォルダー。
aem-forms-theme-canvas
フォルダーに移動します。
次のコマンドを実行します。
code .
Visual Studio コードでフォルダが開きます。
package.json
ファイルを編集用に開きます。
の値を設定します。 name
および description
属性。
name 属性は、「aem-forms-wknd-theme」などのテーマを一意に識別するために使用され、 スタイル タブ フォーム作成ウィザード. description 属性は、目的や設計されたシナリオなど、テーマに関する追加の詳細を提供します。 また、テーマのバージョン、説明、ライセンスを指定することもできます。
ファイルを保存して閉じます。
個々のコンポーネントをカスタマイズしたり、テーマのグローバル変数を使用してテーマレベルの変更を行ったりできます。 グローバル変数に対して行った変更は、個々のコンポーネントすべてに影響を与えます。 例えば、グローバル変数を使用してアダプティブフォームのすべてのコンポーネントの境界線の色を変更したり、明るい塗りの色を使用して、ボタンコンポーネントを使用して CTA(Call to action) を設定したりできます。
The variable.scss
ファイルには、テーマのグローバル変数が含まれます。 これらの変数を更新すると、テーマレベルでスタイル関連の変更を行うことができます。 テーマレベルのスタイルを適用するには、次の手順に従います。
<your-theme-sources>/src/site/_variables.scss
ファイルを編集用に開きます。
任意のプロパティの値を変更します。 例えば、デフォルトのエラー色は次のようになります。 red
. エラーの色を次のように変更するには: red
から blue
を変更する場合は、 $errorvariable
. 例:$error: #196ee5
ファイルを保存して閉じます。
同様に、 variable.scss
ファイル:複数のアダプティブフォームコンポーネントに影響を与えるフォントファミリーと種類、テーマとフォントの色、フォントサイズ、テーマの間隔、エラーアイコン、テーマの境界線のスタイル、その他の変数を設定します。
また、特定のアダプティブフォームコアコンポーネントのフォント、色、サイズ、およびその他の CSS プロパティを変更することもできます。 (ボタン、チェックボックス、コンテナ、フッターなど)。 特定のコンポーネントの CSS ファイルを編集して、組織のスタイルに合わせてボタンやチェックボックスのスタイルを設定できます。 コンポーネントのスタイルをカスタマイズするには:
ファイルを開きます。 <your-theme-sources>/src/components/<component>/<component.scss>
(編集用)。 例えば、ボタンコンポーネントのフォントカラーを変更するには、 <your-theme-sources>/src/components/button/button.scss
、ファイル。
必要に応じて、の値を変更します。 例えば、マウスポインターを置いたときのボタンコンポーネントの色をに変更するには、次のように指定します。 green
を変更した場合、 color: $white
プロパティを cmp-adaptiveform-button__widget:hover
クラスを 16 進コードに #12B453
その他の幾分かの green
. 最終的なコードは次のようになります。
.cmp-adaptiveform-button__widget:hover {
background: $dark-gray;
color: #12B453;
}
ファイルを保存して閉じます。
テーマレベルとコンポーネントレベルの両方でスタイルを定義する場合、コンポーネントレベルで定義されたスタイルが優先されます。
ローカル環境で変更をプレビューおよびテストし、様々なAEMコンポーネントの要件に応じてテーマをカスタマイズするには、次の手順を実行します。
テーマフォルダーをプレーンテキストエディターで開きます。 例えば、 aem-forms-theme-canvas
Visual Studio Code Editor のフォルダー。
名前を変更 env_template
~にファイルを送る .env
theme フォルダーにファイルを作成し、次のパラメーターを追加します。
* **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
. したがって、次の値が適用されます。
http://localhost:4502/
contactusform
ファイルを保存します。
テーマフォルダーのルートに移動します。 この場合、テーマのフォルダー名は次のようになります。 aem-forms-theme-canvas
.
コマンドプロンプトまたはターミナルを開きます。
実行 npm install
依存関係をインストールする。
実行 npm run live
更新されたテーマを使用してフォームをローカルブラウザーでプレビューする場合。
の実行中にエラーが発生した場合、 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
color ボタンコンポーネントのラベルの色が green
ホバリングの時に
テーマレベルスタイルのプレビュー
コンポーネントレベルスタイルのプレビュー
また、AEM Formsas a Cloud Serviceインスタンスでホストされるアダプティブフォームのテーマをテストすることもできます。 クラウドインスタンス上でホストされるアダプティブFormsを使用してテーマをテストするためのローカル環境を設定および設定するには、次の手順を実行します。
テーマフォルダーをプレーンテキストエディターで開きます。 例えば、 aem-forms-theme-canvas
Visual Studio Code Editor のフォルダー。
名前を変更 env_template
~にファイルを送る .env
ファイルを開き、次のパラメーターを追加します。
* **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
. したがって、次の値が適用されます。
https://author-XXXX-cmstg.adobeaemcloud.com/
contactusform
ファイルを保存します。
ローカルユーザーを作成します。
ローカルユーザーを作成するには:
forms-users
グループ化します。テーマフォルダーのルートに移動します。 この場合、テーマのフォルダー名は次のようになります。 aem-forms-theme-canvas
.
実行 npm run live
ローカルブラウザーにリダイレクトされます。
クリック SIGN IN LOCALLY (ADMIN TASKS ONLY)
ローカルユーザーの資格情報を使用してログインします。
最新の変更を含むアダプティブフォームをプレビューできます。 テーマフォルダーでの変更内容が完了したら、フロントエンドパイプラインを使用してAEM Cloud Service環境にテーマをデプロイします。
フロントエンドパイプラインを使用してCloud Service環境にテーマをデプロイするには:
テーマをデプロイするには、リポジトリが必要です。 にログインします。 AEM Cloud Manager リポジトリ テーマの新しいリポジトリを追加します。
テーマの新しいリポジトリを作成するには、 リポジトリ > リポジトリを追加.
次を指定します。 リポジトリ名 (内) リポジトリを追加 ダイアログボックス。 例えば、指定した名前は次のようになります。 custom-canvas-theme-repo
.
「保存」をクリックします。
クリック リポジトリ URL をコピー をクリックして、リポジトリの URL をコピーします。
custom-canvas-theme-repo
、キャンバステーマ、WKND テーマ、EASEL テーマ用。 ただし、テーマをデプロイするには、別々のフロントエンドパイプラインを作成する必要があります。 対応するフロントエンドパイプラインを使用して、特定のテーマの将来のカスタマイズがデプロイされます。次に、変更をAEM FormsCloud Serviceのテーマリポジトリにプッシュします。
テーマフォルダーのルートに移動します。 この場合、テーマのフォルダー名は次のようになります。 aem-forms-theme-canvas
.
コマンドプロンプトまたはターミナルを開きます。
次のコマンドを一覧の順序で実行します。
git remote add [alias-name-for-repository] [URL of repository]
git add .
git commit
git push [name-for-createdrepository]
次に例を示します。
git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
git add .
git commit
git push canvascloudthemerepo
テーマは、 フロントエンドパイプライン。。テーマをデプロイするには、次の手順を実行します。
AEM Cloud Manager リポジトリにログインします。
クリック 追加 ボタンを パイプライン 」セクションに入力します。
選択 実稼動以外のパイプラインを追加 または 実稼動パイプラインを追加 Cloud Service環境に基づく 例えば、次に例を示します。 実稼動パイプラインを追加 」オプションが選択されている。
Adobe Analytics の 実稼動パイプラインを追加 ~の一部としての対話 設定 ステップで、パイプラインの名前を指定します。 例えば、パイプラインの名前は customcanvastheme
.
「続行」をクリックします。
を選択します。 ターゲットのデプロイメント > フロントエンドコード オプション、 ソースコード 手順。
を選択します。 リポジトリ そして Git ブランチ 最新の変更を含む値。 例えば、ここで選択したリポジトリ名は次のようになります。 custom-canvas-theme-repo
また、Git ブランチは main
.
を選択します。 コードの場所 as /
変更がルートフォルダーに存在する場合は、をクリックします。
「保存」をクリックします。
パイプラインの設定が完了したら、コールトゥアクションカードが更新されます。
作成したパイプラインを右クリックします。
「実行」をクリックします。
ビルドが完了すると、オーサーインスタンスでテーマを使用できるようになります。 これは、 スタイル 」タブをクリックします。
アダプティブフォームにテーマを適用する手順は次のとおりです。
AEM Forms オーサーインスタンスにログインします。
Adobe Experience Manager/Forms/フォームとドキュメントの順にタップします。
作成/アダプティブフォームの順にクリックします。アダプティブフォームを作成するためのウィザードが開きます。
「ソース」タブでコアコンポーネントテンプレートを選択します。
テーマを スタイル タブをクリックします。
「作成」をクリックします。
アダプティブフォームのテーマは、アダプティブフォームの作成時にスタイルを定義する、アダプティブフォームのテンプレートの一部として使用されます。
別のテーマに属するアセットの回避
テーマを編集する際、アセット(画像など)を他のテーマから参照して追加することができます。例えば、ページの背景を編集しているとします。例えば、ページ /背景/追加/画像を選択すると、他のテーマの画像を参照して追加することが可能なダイアログが表示されます。
アセットを別のテーマから追加し、そのテーマが移動または削除されると、現在のテーマに問題が生じる場合があります。他のテーマからアセットを参照して追加しないようにすることをお勧めします。
コンテナパネルのレイアウト幅の変更
コンテナパネルのレイアウト幅の変更はお勧めしません。コンテナパネルの幅を指定すると、幅が静的になり、様々なディスプレイに合わせて調整されません。
ヘッダーとフッターを操作する際のフォームエディターまたはテーマエディターの使用
テーマエディターは、フォントスタイル、背景、透明度などのスタイル設定オプションを使用してヘッダーとフッターのスタイルを設定する場合に使用します。
ヘッダーにロゴイメージや企業名などの情報を表示し、フッターに著作権情報を表示する場合は、フォームエディターのオプションを使用します。
Q: テーマフォルダーのカスタマイズをグローバルレベルとコンポーネントレベルの両方で行う場合、どのカスタマイズが優先されますか?
回答: グローバルレベルとコンポーネントレベルの両方でカスタマイズが行われる場合は、コンポーネントレベルでのカスタマイズが優先されます。