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

カスタムテーマの作成、個別コンポーネントのスタイル設定、テーマでの 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. 「アダプティブフォームのテーマ」フィールドでテーマを選択します（調査テーマ​など）。aem_6_3_forms_save をタップして、選択したテーマを適用します。

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

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

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

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

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

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

  1. ヘッダーの既存のロゴとテキストを変更します。ロゴを削除するには、次の手順を実行します。

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

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

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

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

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

      we-retail-logo-text

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

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

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

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

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

      updated-adaptive-form

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

    カスタムテーマ

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

    テーマの作成

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

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

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

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

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

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

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

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

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

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

    余白 値
    余白
    • 上：1.5rem
    • 下：-35 px
    • 左：1rem

    ヒント： フィールドごとに異なる値を設定するには、 リンクアイコンをタップします。
    高さ 4.75rem

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

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

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

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

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

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

ボタンのスタイル設定

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

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

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

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

    style-data-capture-components

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

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

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

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

    style-option

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

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

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

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

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

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

    styled-adaptive-form-1

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

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

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

メモ

typekit-to-adobe-fonts Typekit の現在の名称は Adobe Fonts であり、Creative Cloud や他のサブスクリプションサービスに含まれています。詳細情報を参照してください。

  1. Adobe Fonts アカウントを作成し、キットを作成します。次に、Myriad Pro フォントをキットに追加してキットを発行し、キット ID を取得します。アダプティブフォームでは Adobe Fonts（web フォント）を使用する必要があります。

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

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

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

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

このページ