アダプティブフォームのスタイル設定 do-not-publish-style-your-adaptive-form

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

hero-image

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

チュートリアルについて about-the-tutorial

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

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

  • 標準のテーマをアダプティブフォームに適用
  • テーマエディターを使用して、アダプティブフォームのテーマを作成
  • 個別コンポーネントのスタイル設定
  • ボーナスセクション:カスタムテーマに web フォントを使用

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

カスタムテーマが使用されているフォーム

事前準備 before-you-start

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

ファイルの取得

ファイルの取得

手順 1:アダプティブフォームへのテーマの適用 step-apply-a-theme-to-your-adaptive-form

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

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

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

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

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

  3. アダプティブフォームのテーマ」フィールドでテーマを選択します(調査のテーマ ​など)。 aem_6_3_forms_save を選択すると、選択したテーマを適用できます。

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

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

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

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

手順 2:アダプティブフォームの更新 step-update-your-adaptive-form

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

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

  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 retailwe にのみ適用します。

      we-retail-logo-text

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

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

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

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

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

      updated-adaptive-form

手順 3:アダプティブフォームのカスタムテーマの作成 step-create-a-custom-theme-for-your-adaptive-form

テーマエディターを使用すると、カスタムテーマを作成できます。テーマエディターは非常に強力な WYSIWYG エディターです。視覚的に確認しながら、アダプティブフォームの各種コンポーネントに CSS を適用できます。アダプティブフォームのコンポーネントやパネルのスタイルを詳細に制御できます。

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

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

テーマの作成 create-a-theme

  1. AEM オーサーインスタンスにログインして、Adobe Experience ManagerFormsテーマ ​に移動します。デフォルトの 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 」を選択します。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    プロパティ
    フォントファミリー Arial®
    フォントカラー FFFFFF
    フォントサイズ 54 px
  3. ヘッダーウィジェットを選択し、「ヘッダー」を選択します。ヘッダーウィジェットのスタイルを設定するオプションが左側に表示されます。「寸法と位置」アコーディオンを展開し、「高さ 」を 120px に設定して、「 aem_6_3_forms_save 」を選択します。

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

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

    table 0-row-2 1-row-2 2-row-2 3-row-2
    プロパティ
    画像 header-style.png をアップロードします。この画像は「事前準備」セクションでダウンロードした画像です。
    位置 右下
    タイリング 繰り返しなし
  5. テーマエディターで、ヘッダーのロゴを選択し、「ヘッダーロゴ」を選択します。「寸法と位置」アコーディオンを展開し、次のプロパティを設定して、「 aem_6_3_forms_save 」を選択します。

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    余白
    余白
    • 上:1.5 rem
    • 下:-35 px
    • 左:1rem

    ヒント:フィールドごとに異なる値を設定するには、 リンクアイコンを選択します。

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

データ取得コンポーネントのスタイル設定とアダプティブフォームの背景の適用 style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

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

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

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    アコーディオン プロパティ
    境界線 境界線の色 A7A9AC
    境界線 境界線の半径
    • 上:7 px
    • 右:7 px
    • 下:7 px
    • 左:7 px
    テキスト フォントファミリー Arial®
    テキスト フォントカラー 939598
    テキスト フォントサイズ 18 px
    寸法と位置 60%
    寸法と位置 余白
    • 左:10 rem
  2. 顧客 ID」フィールドの上部で空白領域を選択し、「レスポンシブパネルコンテナ」を選択します。背景背景色 ​を F1F2F2 に設定します。「 aem_6_3_forms_save 」を選択します。

    レスポンシブパネルコンテナ

ボタンのスタイル設定 style-the-buttons

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

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

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    アコーディオン プロパティ
    背景 背景色 F6921E
    境界線 境界線の色 F6921E
    境界線 境界線の半径
    • 上:7 px
    • 右:7 px
    • 下:7 px
    • 左:7 px
    テキスト フォントファミリー Arial®
    テキスト フォントカラー FFFFFF
    テキスト フォントサイズ 18 px
  2. アダプティブフォームにカスタムテーマを適用するか、グローバルテーマを適用します。スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを削除した後、もう一度実行してください。

    style-data-capture-components

手順 4:個別コンポーネントのスタイル設定 step-style-individual-components

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

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

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

    style-option

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

    table 0-row-2 1-row-2 2-row-2
    プロパティ
    浮動小数点数
    10%
  4. 政府が承認した住所の証明」オプションを選択し、 aem_6_3_edit アイコンを選択します。次のプロパティを設定します。

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    アコーディオン プロパティ
    寸法と位置 浮動小数点数
    寸法と位置 73%
    寸法と位置 パディング
    • 左:10 px
    寸法と位置 高さ 40 px
    寸法と位置 余白
    • 右:2 rem
    • 左:10 rem
    背景 背景色 FFFFFF
    境界線 境界線の幅 1 px
    境界線 境界線のスタイル 実線
    境界線 境界線の色 A7A9AC
    境界線 境界線の半径 7 px
    テキスト フォントファミリー Arial®
    テキスト フォントカラー BCBEC0
    テキスト フォントサイズ 18 px
    テキスト 行の高さ 2
  5. 送信」ボタンを選択し、 aem_6_3_edit アイコンを選択します。次のプロパティを設定します。

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    アコーディオン プロパティ
    寸法と位置 浮動小数点数
    寸法と位置 余白
    • 上:5 rem
    • 右:14 rem
    • 下:20 px
    • 左:20 px
    背景 背景色 F6921E
    境界線 境界線の色 F6921E

    styled-adaptive-form-1

手順 5:オプション:カスタムテーマでの web フォントの使用 step-bonus-section-using-web-fonts-in-a-custom-theme

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

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

  1. Adobe フォントのライブラリを参照し、フォームをスタイル設定するフォントを選択します。
NOTE
タグやフィルターを追加して、フォントのリストを絞り込むことができます。
  1. 「</>」ボタンをクリックして、目的のフォントが見つかった場合に備えて、web プロジェクトにファミリを追加します。

    select-font-from-font-libary

    Web プロジェクトにフォントを追加ダイアログ画面が表示されます。

    note note
    NOTE
    フォントを web プロジェクトに追加できるのは、「</>」ボタンが使用可能な場合のみです。
  2. Web プロジェクトに名前を付けます。

  3. チェックボックスをオンにして、含めるフォントの太さとスタイルを選択します。

    フォントライブラリの追加

  4. クリック」を選択して、プロジェクトを作成します。

  5. 画面から埋め込みコードと URL をコピーします。
    埋め込みコードと URL

  6. 完了」をクリックし、web プロジェクト ウィンドウを閉じます。

  7. AEM インスタンスにログインし、URL http://server:port/crx/de/index.jsp# に移動します。

  8. CRXDE でフォルダー構造(/apps/[fontslibrary]/[customlibrary(clientlibrary)] など)を作成します。

  9. 新しく作成した clientlibs フォルダーに移動し、allowProxy プロパティと categories プロパティを追加します。

  10. /apps/[fontslibrary]/[customlibrary(clientlibrary)] に移動して、css フォルダーを作成します。

  11. 作成した CSS フォルダーに移動し、ファイルを作成します。例えば、ファイルを fonts.css として作成し、埋め込みコードを URL と共に貼り付けます。
    フォルダー構造

  12. 変更を保存します。

NOTE
アダプティブフォームで追加したカスタムフォントを使用するには、クライアントライブラリカテゴリ ​内のクライアントライブラリ名が、clientlib フォルダーのカテゴリオプションで指定された名前と一致していることを確認します。

含まれるフォントは、次のカスタムフォントクライアントライブラリを通じてアダプティブフォームにアクセスできるようになりました。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2