アダプティブフォームのスタイル設定

カスタムテーマの作成、個々のコンポーネントのスタイル設定、テーマでのWeb Fontsの使用について説明します。

これは、最初のアダプティブフォームを作成するシリーズを構成するチュートリアルです。Adobeでは、チュートリアルの使用例を理解し、実行し、デモを行うために、時系列に従うことをお勧めします。

チュートリアルについて

テーマを使用して、アダプティブフォームに独自の外観とスタイルを設定することができます。 アダプティブフォームエディターに付属している標準のテーマを適用することも、独自のカスタムテーマを作成することもできます。 AEM Forms はカスタムテーマを作成するためのテーマエディターを提供します。1 つのテーマで、モバイル、タブレット、デスクトップで開いた同じアダプティブフォームに異なる外観を提供できます。 テーマエディターを使用する場合、CSS または LESS に関する事前の知識は必要ありませんが、これは必要です。

チュートリアルの最後までに、次の操作をおこなう必要があります。

• 標準搭載のテーマをアダプティブフォームに適用する
• テーマエディターを使用してアダプティブフォームのテーマを作成する
• 個々のコンポーネントのスタイル設定
• ボーナスセクション：カスタムWeb Fontsでのテーマの使用

このチュートリアルを完了すると、フォームは次のようになります。

事前準備

以下に示すヘッダースタイルとロゴの画像をローカルマシンにダウンロードします。 shipping-address-add-update-form アダプティブフォームのヘッダーは、ヘッダースタイルとロゴの画像を使用します。ヘッダースタイルの画像はヘッダーの右側に表示されます。

ファイルを入手

ファイルを入手

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

アダプティブフォームエディターには、すぐに使用できる複数のテーマが用意されています。 アダプティブフォームでカスタムスタイルを使用しない場合は、標準のテーマを持つアダプティブフォームを発行することもできます。 テーマはアダプティブフォームとは独立しています。 同じテーマを複数のアダプティブフォームに適用することができます。

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

1. アダプティブフォームを編集用に開きます。

   http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. のプロパティを開く アダプティブフォームコンテナ. プロパティブラウザーで、に移動します。 基本 > アダプティブフォームのテーマ. すべての初期設定済みテーマとカスタムテーマが、「アダプティブフォームのテーマ」フィールドに表示されます。デフォルトではキャンバステーマが適用されます。

3. 次からテーマを選択： アダプティブフォームのテーマ フィールドに入力します。 例： 調査のテーマ. タップ 選択したテーマを適用できます。

   

   図： デフォルトのテーマを使用したアダプティブフォーム

   

   図： 調査テーマを使用したアダプティブフォーム

手順 2：アダプティブフォームの更新

上記のデザインでは、既存のアダプティブフォームのプレースホルダーテキストとロゴを変更する必要があります。

アダプティブフォームを更新するには：

1. ヘッダーの既存のロゴおよびテキストを変更します。 ロゴを削除するには：

   1. フォームエディターでフォームを開きます。

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

   2. ヘッダーコンポーネントでロゴの画像をタップし、 「プロパティ」をタップします。画像のプロパティで X をタップし、既存のロゴの画像を削除します。

   3. 「アップロード」をタップして、logo.png を選択し、 をタップして変更を保存します。この画像は「事前準備」セクションでダウンロードした画像です。

   4. ヘッダーテキスト We.Retail をタップしてから、 「編集」をタップします。ヘッダーテキストを we retail に変更します。太字書式を we retail の we にのみ適用します。

      

2. タイトルを削除してプレースホルダーテキストを追加します。

   1. 「顧客 ID」フィールドをタップし、「プロパティ」をタップします。

   2. 「タイトル」フィールドの内容を「プレースホルダーテキスト」フィールドにコピーします。

   3. 「タイトル」 フィールドのコンテンツを削除して、 をタップします。

   4. フォーム内のすべてのテキストボックス、数値ボックス、メールフィールドで、上記の 3 つの手順を繰り返します。

      

手順 3：アダプティブフォームのカスタムテーマを作成する

以下を使用すると、 テーマエディター をクリックしてカスタムテーマを作成します。 テーマエディターは、WYSIWYG の全機能を備えたエディターです。 これは、アダプティブフォームの様々なコンポーネントに CSS を適用する視覚的な方法です。 アダプティブフォームのコンポーネントやパネルのスタイルをより細かく制御できます。

テーマは、アダプティブフォームと同様、個別のエンティティです。 アダプティブフォームのコンポーネントやパネルのスタイル (CSS) が含まれています。 スタイルには、背景色、状態色、透明度、整列、サイズなどの CSS プロパティが含まれます。 テーマを適用すると、指定したスタイルがアダプティブフォームの対応するコンポーネントに適用されます。

このチュートリアルでは、ヘッダーとフッター、テキストと数値のコンポーネント、添付ファイルコンポーネント、ボタンのスタイルを設定します。 まず、テーマを作成します。

テーマの作成

1. AEM オーサーインスタンスにログインして、Adobe Experience Manager／Forms／テーマ​に移動します。デフォルトの URL は http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes です。

2. 「作成」をタップし、「テーマ」を選択します。テーマの作成が必要なフィールドを含む「テーマを作成」ページが表示されます。「タイトル」フィールドと「名前」フィールドは入力必須です。

   • タイトル：​テーマのタイトルを指定します。例： グローバルテーマ。 タイトルを指定すると、テーマのリストからテーマを特定しやすくなります。
   • 名前：​テーマの名前を指定します。例： グローバルテーマ。​指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。 候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。

3. 「作成」をタップします。テーマが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」をタップし、新規作成されたテーマを新しいタブで開きます。テーマがテーマエディターで開きます。 スタイル設定には、AEM に付属している標準提供のアダプティブフォームがテーマエディターにより使用されます。Forms

   テーマエディターの UI の使用について詳しくは、 テーマエディターについて.

4. テーマオプション ／設定​をタップします。「フォームのプレビュー」フィールドで shipping-address-add-update-form アダプティブフォームを選択し、 「」、「 保存」の順にタップします。テーマエディターで、デフォルトのアダプティブフォームではなく独自のアダプティブフォームを使用できるようになります。テーマエディターに戻るには、「キャンセル」をタップします。

   

   図： shipping-address-add-update-form アダプティブフォームを使用したテーマエディター

   

   図： デフォルトのフォームを使用したアダプティブフォーム

ヘッダーとフッターのスタイル設定

ヘッダーとフッターを使用すると、アダプティブフォームの外観が一貫して独特になります。 通常、ヘッダーには組織のロゴと名前が含まれ、フッターには著作権情報が含まれます。また、これらは組織の複数の形式で同じままです。 shipping-address-add-update-form アダプティブフォームのヘッダーとフッターのスタイルを設定するには、次の手順を実行します。

1. 次に移動： ヘッダー > テキスト 」オプションが表示されます。 セレクターパネルは、テーマエディターの左側に表示されます。 パネルが表示されない場合は、「 」をタップします。

2. 「テキスト」アコーディオンで以下のプロパティを設定し、「」をタップします。

   プロパティ	値
   フォントファミリー	Arial®
   フォントカラー	FFFFFF
   フォントサイズ	54 px

3. ヘッダーウィジェットをタップし、「ヘッダー」をタップします。ヘッダーウィジェットのスタイルを設定するオプションが左側に表示されます。「寸法と位置」アコーディオンを展開し、「高さ 」を 120pxに設定して、 「」をタップします。

4. ヘッダーウィジェットの「背景」アコーディオンを展開し、「背景色」を「F6921E.」に設定します。

   画像とグラデーション／+ 追加​にポインターを合わせ、 「画像」をタップします。以下のプロパティを設定し、「」をタップします。

   プロパティ	値
   画像	header-style.png をアップロードします。 この画像は「事前準備」セクションでダウンロードした画像です。
   位置	右下
   タイル	繰り返しなし

5. テーマエディターで、ヘッダーのロゴをタップし、「ヘッダーロゴ」をタップします。「寸法と位置」アコーディオンを展開し、次のプロパティを設定して、「」をタップします。

   余白	値
   余白	上： 1.5rem 下： -35 px 左：1rem ヒント： 次をタップします。 リンクアイコンを使用して、各フィールドに異なる値を指定します。
   高さ	4.75rem

6. フッターウィジェットをタップし、「フッター」をタップします。「背景」アコーディオンを展開し、「背景色」を「F6921E 」に設定して、「」をタップします。

データ取得コンポーネントのスタイルを設定し、アダプティブフォームに背景を適用する

アダプティブフォーム内の複数のコンポーネントを使用して、データを取り込むことができます。 例えば、テキストボックスや数値ボックスなどです。 すべてのデータ取り込みコンポーネントと同じスタイルを指定するか、各コンポーネントに別々のスタイルを指定することができます。 このチュートリアルでは、数値ボックス（顧客 ID、郵便番号）とテキストボックス（顧客 ID、名前、発送先住所、状態、メール）に同じスタイルを適用します。データ取得コンポーネントのスタイルを設定するには、次の手順を実行します。

1. 「顧客 ID」フィールドをタップし、「フィールドウィジェット」オプションをタップします。次のプロパティを設定し、「」をタップします。

   アコーディオン	プロパティ	値
   境界線	枠色	A7A9AC
   境界線	境界線の半径	上：7 px 右：7 px 下：7 px 左：7 px
   テキスト	フォントファミリー	Arial®
   テキスト	フォントカラー	939598
   テキスト	フォントサイズ	18 px
   寸法と位置	幅	60%
   寸法と位置	余白	左：10rem

2. 「顧客 ID」フィールドの上部で空白領域をタップし、「レスポンシブパネルコンテナ」をタップします。背景／背景色​を F1F2F2 に設定します。「」をタップします。

   

ボタンのスタイル設定

カスタムテーマを使用すると、アダプティブフォームのすべてのボタンに同じスタイルを適用することも、特定のボタンにインラインスタイル設定を適用することもできます。ボタンのスタイルを設定するには、次の手順を実行します。

1. 「送信」ボタンをタップし、「ボタン」オプションをタップします。次のプロパティを設定し、「」をタップします。

   アコーディオン	プロパティ	値
   背景	背景色	F6921E
   境界線	枠色	F6921E
   境界線	境界線の半径	上：7 px 右：7 px 下：7 px 左：7 px
   テキスト	フォントファミリー	Arial®
   テキスト	フォントカラー	FFFFFF
   テキスト	フォントサイズ	18 px

2. カスタムテーマの適用、グローバルテーマをアダプティブフォームに適用します。 スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを削除した後、もう一度実行してください。

   

手順 4：個々のコンポーネントのスタイル設定

一部のスタイルは、特定のコンポーネントにのみ適用されます。 このようなコンポーネントは、アダプティブフォームエディターでスタイル設定されます。

1. アダプティブフォームを編集用に開きます。http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. 上部バーで「スタイル」オプションを選択します。

   

3. 「添付」ボタンをタップし、 アイコンをタップします。「寸法と位置」アコーディオンで以下のプロパティを設定します。

   プロパティ	値
   浮動小数	Left
   幅	10%

4. 「Government approved address proof」オプションをタップし、 アイコンをタップします。次のプロパティを設定します。

   アコーディオン	プロパティ	値
   寸法と位置	浮動小数	Left
   寸法と位置	幅	73%
   寸法と位置	パディング	左： 10 px
   寸法と位置	高さ	40 px
   寸法と位置	余白	右：2 rem 左：10rem
   背景	背景色	FFFFFF
   境界線	境界線の幅	1 px
   境界線	境界線のスタイル	実線
   境界線	枠色	A7A9AC
   境界線	境界線の半径	7 px
   テキスト	フォントファミリー	Arial®
   テキスト	フォントカラー	BCBEC0
   テキスト	フォントサイズ	18 px
   テキスト	行の高さ	2

5. 「送信」ボタンをタップし、 アイコンをタップします。次のプロパティを設定します。

   アコーディオン	プロパティ	値
   寸法と位置	浮動小数	右
   寸法と位置	余白	上：5 rem 右： 14 rem 下：20 px 左： 20 px
   背景	背景色	F6921E
   境界線	枠色	F6921E

   

ステップ 5：ボーナスセクション：カスタムテーマでのWeb Fontsの使用

様々なフォントを使用して、アダプティブフォームをデザインすることができます。 アダプティブフォームが表示されるすべてのデバイスに、アダプティブフォームのデザインに使用されるフォントがない場合があります。 Web フォントサービスを使用して、必要なフォントをターゲットデバイスに配信できます。

Adobe Fonts は、Web Fontsサービスです。 アダプティブフォームでこのサービスを設定、使用できます。Adobe Fonts をアダプティブフォームで使用するには：

1. Adobe Fonts アカウントを作成し、キットを作成します。次に、Myriad Pro フォントをキットに追加してキットを発行し、キット ID を取得します。これは、 Adobe Fonts (Web Fonts) を使用して、アダプティブフォーム内でデータを読み込むことができます。

2. AEM内 Forms サーバー、に移動します。 Adobe Experience Manager > ツール > Adobe Fonts. 次に、設定フォルダーを開きます。設定が既に使用可能な場合は、 作成 ボタンを使用してインスタンスを作成します。

   設定を作成ダイアログで、新しい設定の「タイトル」を指定し、「作成」をクリックします。設定ページにリダイレクトされます。コンポーネントを編集ダイアログが表示されるので、キット ID を入力して「OK」をクリックします。

3. Adobe Fonts 設定を使用するようにテーマを設定します。オーサーインスタンスで、テーマエディターを使用して「グローバルテーマ」を開きます。テーマエディターで、テーマオプション ／設定​に移動します。Adobe Analytics の Adobe Fonts Configuration 「 」フィールドでキットを選択し、 保存.

   Adobe Fonts に追加したフォントは、すべてのコンポーネントの「テキスト」アコーディオンで選択できます。

Business.Adobe.com リソース

Content Insights Automated Onboarding Personalized Experiences Customer Communications Web Content Management Dynamic Forms