カスタムテーマの作成、個別コンポーネントのスタイル設定、テーマでの Web フォントの使用について説明します。
これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。
テーマを使用すると、アダプティブフォームに独自の外観やスタイルを設定できます。アダプティブフォームエディターの初期設定済みテーマを適用することも、独自のカスタムテーマを作成することもできます。AEM Formsは、カスタムテーマを作成するためのテーマエディターを提供しています。 単一のテーマを使用すると、モバイル、タブレット、デスクトップで開いた同一のアダプティブフォームに異なる外観を設定できます。テーマエディターを使用する場合、CSS や LESS の予備知識は特に必要ありません。
このチュートリアルを終了すると、以下の操作を実行できるようになります。
チュートリアルを完了すると、フォームの外観は以下のようになります。
以下に示すヘッダースタイルとロゴの画像をローカルマシンにダウンロードします。shipping-address-add-update-form
アダプティブフォームのヘッダーは、ヘッダースタイルとロゴの画像を使用します。ヘッダースタイルの画像はヘッダーの右側に表示されます。
アダプティブフォームエディターは多数の初期設定済みテーマを提供します。アダプティブフォームにカスタムスタイルを使用する場合は、初期設定済みテーマを使用してアダプティブフォームを発行することもできます。テーマはアダプティブフォームから独立しています。同一のテーマを複数のアダプティブフォームに適用できます。テーマをアダプティブフォームに適用するには、次の手順を実行します。
アダプティブフォームを編集用に開きます。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
アダプティブフォームコンテナのプロパティを開きます。プロパティブラウザーで、基本/アダプティブフォームのテーマに移動します。すべての初期設定済みテーマとカスタムテーマが、「アダプティブフォームのテーマ」フィールドに表示されます。デフォルトではキャンバステーマが適用されます。
「アダプティブフォームのテーマ」フィールドでテーマを選択します(調査テーマなど)。をタップし、選択したテーマを適用します。
図:デフォルトのテーマを持つ アダプティブフォーム
図:調査テーマを使用した アダプティブフォーム
上記のデザインでは、既存のアダプティブフォームのプレースホルダーテキストとロゴを変更する必要があります。必要な変更を行うには、次の手順を実行します。
ヘッダーの既存のロゴとテキストを変更します。ロゴを削除するには、次の手順を実行します。
フォームエディターでフォームを開きます。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
headerコンポーネントのロゴ画像をタップし、 propertiesをタップします。 imageプロパティで、「X」をタップして既存のロゴ画像を削除します。
アップロードをタップし、logo.pngを選択して、をタップし、変更を保存します。 画像は開始前にセクションにダウンロードされました。
ヘッダーテキストWe.Retail
をタップし、 editをタップします。 ヘッダーテキストを
we retail
に変更します。 we retail
のwe
にのみ太字書式を適用します。
タイトルを削除してプレースホルダーテキストを追加します。
顧客IDフィールドをタップし、プロパティをタップします。
「タイトル」フィールドの内容を「プレースホルダーテキスト」フィールドにコピーします。
タイトルフィールドの内容を削除し、をタップします。
フォーム内のすべてのテキストボックス、数値ボックス、電子メールフィールドで、上記の 3 つの手順を繰り返します。
テーマエディターを使用すると、カスタムテーマを作成できます。テーマエディターは非常に強力な WYSIWYG エディターです。視覚的に確認しながら、アダプティブフォームの各種コンポーネントに CSS を適用できます。アダプティブフォームのコンポーネントやパネルのスタイルを詳細にコントロールできます。
アダプティブフォームと同様、テーマは独立したエンティティです。アダプティブフォームのコンポーネントとパネルのスタイル(CSS)が含まれています。スタイルには背景色、状態色、透明度、配置、サイズなど、CSS プロパティが含まれています。テーマを適用すると、指定したスタイルがアダプティブフォームの対応するコンポーネントに適用されます。
このチュートリアルでは、ヘッダー、フッター、テキストコンポーネント、数値コンポーネント、添付ファイルコンポーネント、ボタンのスタイルを設定します。まずテーマを作成することから始めましょう。
AEM作成者インスタンスにログインし、Adobe Experience Manager > Forms > テーマに移動します。 デフォルトのURLはhttp://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themesです。
「作成」をタップし、「テーマ」を選択します。テーマの作成に必要なフィールドを含むテーマを作成ページが表示されます。 「タイトル」フィールドと「名前」フィールドは入力必須です。
「作成」をタップします。テーマが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」をタップして、新しく作成したテーマを新しいタブで開きます。 テーマがテーマエディターで開きます。スタイル設定の場合、テーマエディターはAEM Formsに付属の標準搭載のアダプティブフォームを使用します。
テーマエディターのUIの使用について詳しくは、テーマエディターについてを参照してください。
テーマのオプション > 設定をタップします。 プレビューフォームフィールドで、配送先住所 — 追加 — 更新フォームアダプティブフォームを選択し、
をタップし、保存をタップします。 テーマエディターで、デフォルトのアダプティブフォームではなく独自のアダプティブフォームを使用できるようになります。テーマエディターに戻るには、「キャンセル」をタップします。
図:配送先住所 — 追加 — 更新 — フォームアダプティブフォームを含む テーマエディタ
図:デフォルトフォームを使用した アダプティブフォーム
ヘッダーとフッターをアダプティブフォームで使用すると、独特な外観を作成できます。通常、ヘッダーには組織のロゴと名前が含まれ、フッターには著作権情報が含まれます。これらは組織の複数のフォーム間で統一されます。shipping-address-add-update-form アダプティブフォームのヘッダーとフッターのスタイルを設定するには、次の手順を実行します。
セレクターパネルでヘッダー/テキストオプションに移動します。セレクターパネルはテーマエディターの左側にあります。パネルが表示されていない場合は、サイドパネルを切り替えをタップします。
テキストアコーディオンで次のプロパティを設定し、をタップします。
プロパティ | 値 |
---|---|
フォントファミリー | Arial |
フォントカラー | FFFFFF |
フォントサイズ | 54 px |
ヘッダーウィジェットをタップし、ヘッダーをタップします。 ヘッダーウィジェットのスタイルを設定するオプションが左側に表示されます。Dimensionと位置アコーディオンを展開し、高さを120px
に設定して、をタップします。
ヘッダーウィジェットの背景アコーディオンを展開し、背景色をF6921E.
に設定します
画像とグラデーション/追加+の上にマウスポインターを置き、画像をタップします。 次のプロパティを設定し、をタップします。
プロパティ | 値 |
---|---|
画像 | header-style.png をアップロードします。画像は開始前にセクションにダウンロードされました。 |
位置 | 右下 |
タイル | 繰り返しなし |
テーマエディターで、ヘッダーのロゴをタップし、「ヘッダーロゴ」をタップします。「Dimensionと位置」アコーディオンを展開し、次のプロパティを設定して、をタップします。
の余白 | 値 |
の余白 |
ヒント: フィールドごとに異なる値を設定するには、 |
高さ | 4.75rem |
フッターウィジェットをタップし、「フッター」をタップします。背景アコーディオンを展開し、背景色をF6921E
に設定して、をタップします。
アダプティブフォームでは複数のコンポーネントを使用してデータを取得できます。例えば、テキストボックスと数値ボックスを使用できます。すべてのデータ取得コンポーネントと同じスタイルを指定することも、各コンポーネントに対して別々のスタイルを指定することもできます。 このチュートリアルでは、数値ボックス(顧客 ID、郵便番号)とテキストボックス(顧客 ID、名前、発送先住所、状態、電子メール)に同じスタイルを適用します。データ取得コンポーネントのスタイルを設定するには:
「顧客ID」フィールドをタップし、「フィールドウィジェット」オプションをタップします。 次のプロパティを設定し、をタップします。
アコーディオン | プロパティ | 値 |
ボーダー | 境界線の色 | A7A9AC |
ボーダー | 境界線の半径 |
|
テキスト | フォントファミリー | Arial |
テキスト | フォントカラー | 939598 |
テキスト | フォントサイズ | 18 px |
寸法と位置 | 幅 | 60% |
寸法と位置 | の余白 |
|
顧客IDフィールドの上にある空の領域をタップし、レスポンシブパネルコンテナをタップします。 背景/背景色を F1F2F2 に設定します。をタップします。
カスタムテーマを使用してアダプティブフォームのすべてのボタンに同じスタイルを適用し、インラインスタイルを使用して特定のボタンにスタイルを適用することができます。 ボタンのスタイルを設定するには、次の手順を実行します。
「送信」ボタンをタップし、「ボタン」オプションをタップします。次のプロパティを設定し、をタップします。
アコーディオン | プロパティ | 値 |
背景 | 背景色 | F6921E |
ボーダー |
境界線の色 | F6921E |
ボーダー | 境界線の半径 |
|
テキスト |
フォントファミリー | Arial |
テキスト | フォントカラー | FFFFF |
テキスト | フォントサイズ | 18 px |
アダプティブフォームにカスタムテーマを適用するか、グローバルテーマを適用します。スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを消去してから、やり直してください。
一部のスタイルは特定のコンポーネントのみに適用されます。このようなコンポーネントのスタイルは、アダプティブフォームエディターで設定します。
アダプティブフォームを編集用に開きます。http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
上部バーで「スタイル」オプションを選択します。
「添付」ボタンをタップし、アイコンをタップします。 Dimensionと位置アコーディオンで次のプロパティを設定します。
プロパティ | 値 |
---|---|
浮動小数 | Left |
幅 | 10% |
「政府が承認した住所の配達確認」オプションをタップし、アイコンをタップします。 次のプロパティを設定します。
アコーディオン | プロパティ | 値 |
寸法と位置 | 浮動小数 | 左 |
寸法と位置 | 幅 | 73% |
寸法と位置 | パディング |
|
寸法と位置 | 高さ | 40 px |
寸法と位置 |
の余白 |
|
背景 | 背景色 | FFFFF |
ボーダー | 境界線の幅 | 1 px |
ボーダー | 境界線のスタイル | 実線 |
ボーダー | 境界線の色 | A7A9AC |
ボーダー | 境界線の半径 | 7 px |
テキスト | フォントファミリー | Arial |
テキスト | フォントカラー | BCBEC0 |
テキスト | フォントサイズ | 18 px |
テキスト | 行の高さ | 2 |
「送信」ボタンをタップし、アイコンをタップします。 次のプロパティを設定します。
アコーディオン | プロパティ | 値 |
寸法と位置 | 浮動小数 | Right |
寸法と位置 | の余白 |
|
背景 | 背景色 | F6921E |
ボーダー | 境界線の色 | F6921E |
アダプティブフォームは各種フォントを使用してデザインできます。アダプティブフォームのデザインに使用するフォントが、アダプティブフォームを表示するデバイスに存在しない場合があります。Webフォントサービスを使用して、必要なフォントをターゲットデバイスに配信できます。
Adobe Fonts はwebフォントサービスです。アダプティブフォームでこのサービスを設定、使用できます。アダプティブフォームでAdobe Fontsを使用するには:
Typekit fontsは、現在はAdobe Fontsと呼ばれ、Creative Cloudや他の購読に含まれています。詳細情報を参照してください。
Adobe Fontsアカウントの作成、キットの作成、キットへのフォントMyriadProの追加、キットの公開、キットIDの取得を行います。 アダプティブフォームでAdobe Fonts(Webフォント)を使用する必要があります。
AEM Formsサーバーで、 Adobe Experience Manager > ツール
> Adobe Fontsに移動します。 次に、設定フォルダーを開きます。 設定が既に使用可能な場合は、「作成」ボタンをクリックして新しいインスタンスを作成します。
設定を作成ダイアログで、設定のタイトルを指定し、「作成」をクリックします。 設定ページにリダイレクトされます、表示されるコンポーネントを編集ダイアログで、キットIDを入力し、OKをクリックします。
テーマを設定してAdobe Fonts設定を使用します。 作成者インスタンスで、テーマエディターでグローバルテーマを開きます。 テーマエディターで、テーマのオプション > 設定に移動します。 「Adobe Fonts設定」フィールドで、キットを選択し、「保存」をクリックします。
Adobe Fontsに追加されたフォントは、すべてのコンポーネントのテキストアコーディオンで選択できます。