アダプティブフォーム（コアコンポーネント）のテーマ

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

コアコンポーネントを使用してアダプティブフォームを作成すると、標準テーマが「スタイル」タブの下に表示されます。デフォルトでは、キャンバス​テーマのみ使用できます。

コアコンポーネントを使用したアダプティブフォームでのキャンバステーマの使用

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

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

2. Adobe Experience Manager／Forms／フォームとドキュメント​の順にタップします。

3. 作成／アダプティブフォーム​の順にクリックします。アダプティブフォームを作成するためのウィザードが開きます。

4. 「ソース」タブでコアコンポーネントテンプレートを選択します。

   メモ

   コアコンポーネントを含むアダプティブフォームを作成すると、「スタイル」タブの下にキャンバステーマが表示されます。これは、すぐに使用できる唯一の標準テーマです。ただし、テーマを好みに合わせて変更し、フロントエンドパイプラインを設定することで、あとで使用するために保存できます。

5. 「スタイル」タブでキャンバステーマを選択します。

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

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

テーマのカスタマイズ

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

• Cloud Manager でパイプラインを設定します。
• ユーザーを投稿者の役割として設定します。
• Git リポジトリと Cloud Service Git リポジトリの基礎知識が必要です。

キャンバステーマをカスタマイズするには、次の手順を実行します。

1. キャンバステーマをクローン
2. テーマの構造を理解する
3. package.json と package_lock.json の名前を変更する
4. テーマフォルダーで
5. ローカルの プロキシサーバーを開始します。
6. テーマのカスタマイズ
7. 変更をコミットする
8. パイプラインをデプロイする

1. キャンバステーマをクローンする

コマンドプロンプトを開き、次のコマンドを実行してキャンバステーマをクローンします。

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

2. テーマの構造を理解する

アダプティブフォームのテーマは、フォームのスタイルを定義し、アダプティブフォームのテーマの構造に準拠する 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 コンテンツに基づいてテーマのカスタマイズをリアルタイムで確認できます。

3. キャンバステーマの package.json と package_lock.json の名前を変更する

package.json および package_lock.json ファイル内のキャンバステーマの名前とバージョンを更新します。

4. テーマフォルダーに .env ファイルを作成する

テーマ フォルダーに .env ファイルを作成し、次のパラメーターを追加します。

• AEM の URL
  AEM_URL=https://[author-instance]

• AEM サイト名
  AEM_ADAPTIVE_FORM=Form_name

• AEM のプロキシポート
  AEM_PROXY_PORT=7000

5. ローカルプロキシサーバーを起動する

1. コマンドラインから、ローカルマシン上のテーマのルートに移動します。

2. npm install を実行すると、npm は依存関係を取得し、プロジェクトをインストールします。

3. npm run live を実行すると、プロキシサーバーが起動します。

   

4. 「ローカルでログイン (管理者タスクのみ)」をタップまたはクリックし、AEM 管理者から提供されたプロキシユーザーの資格情報を使用してログインします。

   

   メモ

   • ローカルユーザーを作成してローカルでログインします。 テーマデザイナーの投稿者の役割を指定します。
   • キャンバステーマの .env ファイルで AEM URL を http://localhost:[port]/ として指定すると、ブラウザーに直接リダイレクトされます。

5. ログインしたら、AEM 管理者が指定したサンプルコンテンツのパスを指すように、ブラウザーで URL を変更します。

   • 例えば、指定されたパスが /content/formname.html?wcmmode=disabled であった場合URL を http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled に変更します

   

アダプティブフォームに移動して、アダプティブフォームに適用されたキャンバステーマを確認します。

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

1. エディターで、<your-theme-sources>/src/site/_variables.scss ファイルを開きます。

   メモ

   サイト内のすべてのアダプティブフォームコンポーネントのスタイルを直接設定するには、site/_variables.scss ファイルを編集します。

2. font colour から red の変数を編集します。

   

   様々な AEM コンポーネントのスタイル設定

   アダプティブフォームの様々なコンポーネントのスタイルを設定するには、エディターで CSS ファイルを変更します。 キャンバステーマフォルダー内にはアダプティブフォームのコアコンポーネントごとに異なる CSS フォルダーがあります。

   

   テーマエディターで特定のコンポーネントのスタイルを指定するには、テーマフォルダー内の CSS を編集できます。例えば、テキストボックスフィールドの境界線の色を変更する場合は、CSS ファイルをエディターで開いて、境界線の色を変更します。

   

3. ファイルを保存すると、プロキシサーバーが [Browsersync] File event [change] 行を介して変更を認識します。

   

4. ローカルのプロキシサーバーのブラウザーに切り替えると、変更が直ちに表示されます。

   

テーマデザイナーは、ローカルプロキシサーバーで変更をプレビューし、様々な AEM コンポーネントの要件に応じてテーマをカスタマイズします。

変更を AEM Git リポジトリにコミットする前に、Git リポジトリ情報にアクセスする必要があります。

7. 変更をコミットする

テーマに変更を加え、ローカルプロキシサーバーでテストした後、その変更を AEM Forms Cloud Service の Git リポジトリにコミットします。 これにより、カスタマイズされたテーマが Forms Cloud Service 環境で使用でき、アダプティブフォームの作成者が使用できるようになります。

変更を AEM Forms Cloud Service の Git リポジトリにコミットする前に、ローカルマシン上にリポジトリのクローンを作成する必要があります。 リポジトリのクローンを作成するには、次を手順を実行します。

1. 新しいテーマリポジトリを作成するには、「リポジトリ」オプションをクリックします。

   

2. リポジトリを追加​をクリックし、リポジトリを追加​ダイアログボックスで​リポジトリ名​を指定します。「保存」をクリックします。

   

3. リポジトリ URL をコピー​をクリックし、作成したリポジトリの URL をコピーします。

   

4. コマンドプロンプトを開き、上記で作成したクラウドリポジトリをクローンします。

   git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
   

5. 編集中のテーマリポジトリのファイルをクラウドリポジトリに移動するには、次のようなコマンドを使用します。
   cp -r [source-theme-folder]/* [destination-cloud-repo]
   例えば、次のコマンドを使用します。
   cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]

6. クラウドリポジトリのディレクトリで、先ほど移動したテーマファイルを次のコマンドでコミットします。

   git add .
   git commit -a -m "Adding theme files"
   git push
   

7. カスタマイズ内容は Git リポジトリにプッシュされます。

   

これで、カスタマイズ内容が Git リポジトリに安全に保存されました。

8. フロントエンドパイプラインを実行する

1. フロントエンドパイプラインを作成して、カスタマイズしたテーマをデプロイします。詳しくは、カスタマイズしたテーマをデプロイするためのフロントラインパイプラインの設定方法を参照してください。
2. 作成したフロントエンドパイプラインを実行し、アダプティブフォームの作成ウィザードの「スタイル」タブで、カスタマイズしたテーマフォルダーをデプロイします。

テーマのカスタマイズ例

1. AEM Forms オーサーインスタンスにログインします。
2. コアコンポーネントを使用して作成されたアダプティブフォームを開きます。
3. コマンドプロンプトでローカルプロキシサーバーを起動し、「ローカルでログイン (管理者タスクのみ)」をクリックします。
4. ログインすると、ブラウザーにリダイレクトされ、適用されたテーマが表示されます。
5. キャンバステーマをダウンロードし、ダウンロードした zip フォルダーを抽出します。
6. 抽出した zip フォルダーを任意のエディターで開きます。
7. テーマフォルダーで .env ファイルを作成し、AEM URL、AEM_ADAPTIVE_FORM および AEM_PROXY_PORT パラメーターを追加します。
8. キャンバステーマフォルダーのテキストボックスの CSS ファイルを開き、境界線のカラーを red に変更し、保存します。
9. ブラウザーを再度開くと、変更が直ちにアダプティブフォームに反映されます。
10. クローンしたリポジトリ内のキャンバステーマフォルダーを移動します。
11. 変更をコミットし、フロントエンドパイプラインを実行します。

パイプラインを実行すると、「スタイル」タブでテーマを使用できるようになります。

ベストプラクティス

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

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

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

• コンテナパネルのレイアウト幅の変更

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

• ヘッダーとフッターを操作する際のフォームエディターまたはテーマエディターの使用

  テーマエディターは、フォントスタイル、背景、透明度などのスタイル設定オプションを使用してヘッダーとフッターのスタイルを設定する場合に使用します。
  ヘッダーにロゴイメージや企業名などの情報を表示し、フッターに著作権情報を表示する場合は、フォームエディターのオプションを使用します。

Business.Adobe.com リソース