コアコンポーネントを使用してテーマを作成および適用することで、アダプティブフォームのスタイルを設定できます。テーマには、コンポーネントとパネルのスタイルを設定するための詳細情報が含まれています。スタイルには、背景カラー、ステートカラー、透明度、配置、サイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。テーマは、アダプティブフォームを参照せずに、独立して管理されます。
コアコンポーネントを使用してアダプティブフォームを作成すると、標準テーマが「スタイル」タブの下に表示されます。デフォルトでは、キャンバステーマのみ使用できます。
アダプティブフォームのテーマをアダプティブフォームのテンプレートと混同しないでください。アダプティブフォームのテーマには、アダプティブフォームのスタイル設定情報のみが含まれます。アダプティブフォームのテンプレートは、フォーム構造と初期コンテンツを定義します。また、新しいアダプティブフォームを作成できるようにするためのテーマが含まれています。
アダプティブフォームにテーマを適用するには、次の手順を実行します。
AEM Forms オーサーインスタンスにログインします。
Adobe Experience Manager/Forms/フォームとドキュメントの順にタップします。
作成/アダプティブフォームの順にクリックします。アダプティブフォームを作成するためのウィザードが開きます。
「ソース」タブでコアコンポーネントテンプレートを選択します。
コアコンポーネントを含むアダプティブフォームを作成すると、「スタイル」タブの下にキャンバステーマが表示されます。これは、すぐに使用できる唯一の標準テーマです。ただし、テーマを好みに合わせて変更し、フロントエンドパイプラインを設定することで、あとで使用するために保存できます。
「スタイル」タブでキャンバステーマを選択します。
「作成」をクリックします。
アダプティブフォームのテーマは、アダプティブフォームの作成時にスタイルを定義する、アダプティブフォームのテンプレートの一部として使用されます。
テーマをカスタマイズするには、次の手順を実行します。
キャンバステーマをカスタマイズするには、次の手順を実行します。
コマンドプロンプトを開き、次のコマンドを実行してキャンバステーマをクローンします。
git clone https://github.com/adobe/aem-forms-theme-canvas
フォーム作成ウィザードの「スタイル」タブには、package.json ファイルと同じテーマ名が表示されます。
アダプティブフォームのテーマは、フォームのスタイルを定義し、アダプティブフォームのテーマの構造に準拠する CSS、JavaScript、および静的リソースを含むパッケージです。アダプティブフォームのテーマは、フロントエンドプロジェクトに典型的な次の構造を持ちます。
src/components
:AEM コアコンポーネント固有の JavaScript ファイルおよび CSS ファイルsrc/resources
:アイコン、ロゴ、フォントなどの静的ファイルsrc/site
:AEM Sites ページ全体に適用される JavaScript ファイルおよび CSS ファイルsrc/theme.ts
:JavaScript および CSS テーマの主なエントリポイントsrc\theme.scss
:テーマ全体に適用される JavaScript および CSS ファイルsrc/components
フォルダーには、すべての AEM コアコンポーネント専用の JavaScript および CSS ファイル(ボタン、チェックボックス、コンテナ、フッターなど)が含まれます。 ボタンまたはチェックボックスのスタイルを設定するには、AEM コンポーネントに固有の CSS ファイルを編集します。
テーマをカスタマイズするには、ローカルプロキシサーバーを起動して、実際の AEM コンテンツに基づいてテーマのカスタマイズをリアルタイムで確認できます。
package.json
および package_lock.json
ファイル内のキャンバステーマの名前とバージョンを更新します。
名前に @aemforms
タグを使用しないでください。ユーザーが指定した名前の単純なテキストにする必要があります。
テーマ フォルダーに .env
ファイルを作成し、次のパラメーターを追加します。
AEM の URL
AEM_URL=https://[author-instance]
AEM サイト名
AEM_ADAPTIVE_FORM=Form_name
AEM のプロキシポート
AEM_PROXY_PORT=7000
コマンドラインから、ローカルマシン上のテーマのルートに移動します。
npm install
を実行すると、npm は依存関係を取得し、プロジェクトをインストールします。
npm run live
を実行すると、プロキシサーバーが起動します。
「ローカルでログイン (管理者タスクのみ)」をタップまたはクリックし、AEM 管理者から提供されたプロキシユーザーの資格情報を使用してログインします。
.env
ファイルで AEM URL を http://localhost:[port]/
として指定すると、ブラウザーに直接リダイレクトされます。ログインしたら、AEM 管理者が指定したサンプルコンテンツのパスを指すように、ブラウザーで URL を変更します。
/content/formname.html?wcmmode=disabled
であった場合URL を http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled
に変更しますアダプティブフォームに移動して、アダプティブフォームに適用されたキャンバステーマを確認します。
エディターで、<your-theme-sources>/src/site/_variables.scss
ファイルを開きます。
サイト内のすべてのアダプティブフォームコンポーネントのスタイルを直接設定するには、site/_variables.scss
ファイルを編集します。
font colour
から red
の変数を編集します。
様々な AEM コンポーネントのスタイル設定
アダプティブフォームの様々なコンポーネントのスタイルを設定するには、エディターで CSS ファイルを変更します。 キャンバステーマフォルダー内にはアダプティブフォームのコアコンポーネントごとに異なる CSS フォルダーがあります。
テーマエディターで特定のコンポーネントのスタイルを指定するには、テーマフォルダー内の CSS を編集できます。例えば、テキストボックスフィールドの境界線の色を変更する場合は、CSS ファイルをエディターで開いて、境界線の色を変更します。
ファイルを保存すると、プロキシサーバーが [Browsersync] File event [change]
行を介して変更を認識します。
ローカルのプロキシサーバーのブラウザーに切り替えると、変更が直ちに表示されます。
テーマデザイナーは、ローカルプロキシサーバーで変更をプレビューし、様々な AEM コンポーネントの要件に応じてテーマをカスタマイズします。
変更を AEM Git リポジトリにコミットする前に、Git リポジトリ情報にアクセスする必要があります。
テーマに変更を加え、ローカルプロキシサーバーでテストした後、その変更を AEM Forms Cloud Service の Git リポジトリにコミットします。 これにより、カスタマイズされたテーマが Forms Cloud Service 環境で使用でき、アダプティブフォームの作成者が使用できるようになります。
変更を AEM Forms Cloud Service の Git リポジトリにコミットする前に、ローカルマシン上にリポジトリのクローンを作成する必要があります。 リポジトリのクローンを作成するには、次を手順を実行します。
新しいテーマリポジトリを作成するには、「リポジトリ」オプションをクリックします。
リポジトリを追加をクリックし、リポジトリを追加ダイアログボックスでリポジトリ名を指定します。「保存」をクリックします。
リポジトリ URL をコピーをクリックし、作成したリポジトリの URL をコピーします。
コマンドプロンプトを開き、上記で作成したクラウドリポジトリをクローンします。
git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
編集中のテーマリポジトリのファイルをクラウドリポジトリに移動するには、次のようなコマンドを使用します。
cp -r [source-theme-folder]/* [destination-cloud-repo]
例えば、次のコマンドを使用します。
cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]
クラウドリポジトリのディレクトリで、先ほど移動したテーマファイルを次のコマンドでコミットします。
git add .
git commit -a -m "Adding theme files"
git push
カスタマイズ内容は Git リポジトリにプッシュされます。
これで、カスタマイズ内容が Git リポジトリに安全に保存されました。
今後、キャンバステーマフォルダーで変更を加える場合は、上記のパイプラインを再実行する必要があります。そのため、パイプラインの名前を覚えておく必要があります。
.env
ファイルを作成し、AEM URL、AEM_ADAPTIVE_FORM および AEM_PROXY_PORT パラメーターを追加します。red
に変更し、保存します。パイプラインを実行すると、「スタイル」タブでテーマを使用できるようになります。
別のテーマに属するアセットの回避
テーマを編集する際、アセット(画像など)を他のテーマから参照して追加することができます。例えば、ページの背景を編集しているとします。例えば、ページ /背景/追加/画像を選択すると、他のテーマの画像を参照して追加することが可能なダイアログが表示されます。
アセットを別のテーマから追加し、そのテーマが移動または削除されると、現在のテーマに問題が生じる場合があります。他のテーマからアセットを参照して追加しないようにすることをお勧めします。
コンテナパネルのレイアウト幅の変更
コンテナパネルのレイアウト幅の変更はお勧めしません。コンテナパネルの幅を指定すると、幅が静的になり、様々なディスプレイに合わせて調整されません。
ヘッダーとフッターを操作する際のフォームエディターまたはテーマエディターの使用
テーマエディターは、フォントスタイル、背景、透明度などのスタイル設定オプションを使用してヘッダーとフッターのスタイルを設定する場合に使用します。
ヘッダーにロゴイメージや企業名などの情報を表示し、フッターに著作権情報を表示する場合は、フォームエディターのオプションを使用します。