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

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

これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

このチュートリアルについて

テーマを使用すると、アダプティブフォームに独自の外観やスタイルを設定できます。アダプティブフォームエディターの初期設定済みテーマを適用することも、独自のカスタムテーマを作成することもできます。AEM Formsは、カスタムテーマを作成するためのテーマエディターを提供しています。 単一のテーマを使用すると、モバイル、タブレット、デスクトップで開いた同一のアダプティブフォームに異なる外観を設定できます。テーマエディターを使用する場合、CSS や LESS の予備知識は特に必要ありません。

このチュートリアルを終了すると、以下の操作を実行できるようになります。

• 初期設定済みテーマをアダプティブフォームに適用する
• テーマエディターを使用して、アダプティブフォームのテーマを作成する
• 個別コンポーネントのスタイルを設定する
• オプション：カスタムテーマに Web フォントを使用する

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

事前準備

以下に示すヘッダースタイルとロゴの画像をローカルマシンにダウンロードします。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. headerコンポーネントのロゴ画像をタップし、 properties​をタップします。 imageプロパティで、「X」をタップして既存のロゴ画像を削除します。

   3. アップロード​をタップし、logo.pngを選択して、をタップし、変更を保存します。 画像は開始前にセクションにダウンロードされました。

   4. ヘッダーテキストWe.Retailをタップし、 edit​をタップします。 ヘッダーテキストを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 アダプティブフォームのヘッダーとフッターのスタイルを設定するには、次の手順を実行します。

1. セレクターパネルで​ヘッダー／テキスト​オプションに移動します。セレクターパネルはテーマエディターの左側にあります。パネルが表示されていない場合は、サイドパネルを切り替えをタップします。

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

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

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

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

   画像とグラデーション/追加+​の上にマウスポインターを置き、画像​をタップします。 次のプロパティを設定し、をタップします。

   プロパティ	値
   画像	header-style.png をアップロードします。画像は開始前にセクションにダウンロードされました。
   位置	右下
   タイル	繰り返しなし

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

   の余白	値
   の余白	上：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
   テキスト	フォントカラー	FFFFF
   テキスト	フォントサイズ	18 px

2. アダプティブフォームにカスタムテーマを適用するか、グローバルテーマを適用します。スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを消去してから、やり直してください。

   

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

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

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

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

   

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

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

4. 「政府が承認した住所の配達確認」オプションをタップし、アイコンをタップします。 次のプロパティを設定します。

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

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

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

   

手順 5：オプション：カスタムテーマでの Web フォントの使用

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

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

1. Adobe Fontsアカウントの作成、キットの作成、キットへのフォントMyriadProの追加、キットの公開、キットIDの取得を行います。 アダプティブフォームでAdobe Fonts（Webフォント）を使用する必要があります。

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

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

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

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