現在表示中:

カスタムテーマの作成、個別コンポーネントのスタイル設定、テーマでの Web フォントの使用について説明します。
08-style_your_adaptiveformmain
これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

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

テーマを使用すると、アダプティブフォームに独自の外観やスタイルを設定できます。アダプティブフォームエディターの初期設定済みテーマを適用することも、独自のカスタムテーマを作成することもできます。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. ヘッダーコンポーネントでロゴの画像をタップし、「プロパティ」 をタップします。画像のプロパティで X をタップし、既存のロゴの画像を削除します。
    3. 「アップロード」をタップし、logo.png を選択します。次に、 をタップして変更内容を保存します。この画像は「事前準備」セクションでダウンロードした画像です。
    4. ヘッダーテキスト We.Retail をタップし、「編集」 をタップします。ヘッダーテキストを we retail に変更します。we retailwe のみに太字書式設定を適用します。
    we-retail-logo-text
  2. タイトルを削除してプレースホルダーテキストを追加します。

    1. 「顧客 ID」フィールドをタップし、「プロパティ」 をタップします。
    2. タイトル」フィールドの内容を「プレースホルダーテキスト」フィールドにコピーします。
    3. タイトル」フィールドの内容を削除し、 をタップします。
    4. フォーム内のすべてのテキストボックス、数値ボックス、電子メールフィールドで、上記の 3 つの手順を繰り返します。
    updated-adaptive-form

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

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

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

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

テーマを作成する

  1. AEM オーサーインスタンスにログインし、Adobe Experience Managerフォームテーマに移動します。デフォルトの 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 アダプティブフォームを使用したテーマエディター

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

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

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

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

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

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

    画像とグラデーション+ 追加にカーソルを置き、  「画像」をタップします。次のプロパティを設定し、 をタップします。

    プロパティ
    image 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 に設定します。 をタップします。

    Responsive-panel-container

ボタンのスタイル設定

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

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

    アコーディオン プロパティ
    背景 背景色 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. 添付」ボタンをタップし、  アイコンをタップします。「寸法と位置」アコーディオンで次のプロパティを設定します。

    プロパティ
    浮動小数 Left
    10%
  4. Government approved address proof」オプションをタップし、  アイコンをタップします。次のプロパティを設定します。

    アコーディオン プロパティ
    寸法と位置 浮動小数 Left
    寸法と位置 73%
    寸法と位置 パディング
    • 左:10 px
    寸法と位置 高さ 40 px
    寸法と位置
    余白
    • 右:2rem
    • 左:10rem 
    背景 背景色 FFFFFF
    境界線 境界線の幅 1 px
    境界線 境界線のスタイル 実線
    境界線 境界線の色 A7A9AC
    境界線 境界線の半径 7 px
    テキスト フォントファミリー Arial
    テキスト フォントカラー BCBEC0
    テキスト フォントサイズ 18 px
    テキスト 行の高さ 2
  5. 送信」ボタンをタップし、   アイコンをタップします。次のプロパティを設定します。

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

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

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

Adobe Typekit は Web フォントサービスです。アダプティブフォームでこのサービスを設定、使用できます。Adobe Typekit をアダプティブフォームで使用するには、次の手順を実行します。

注意:

  Typekit は、Adobe Fonts に名前が変わりました。これは、Creative Cloud などのサブスクリプションに含まれています。さらに詳しく

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

  2. AEM Forms サーバーで、Adobe Experience Managerツール デプロイメントクラウドサービスに移動します。クラウドサービスページで、サードパーティーのサービスTypekit に移動し、「今すぐ設定」をクリックします。既に設定を行っている場合は「+」ボタンをクリックし、新しいインスタンスを作成します。

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

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

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

     

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー