某些 Creative Cloud 应用程序、服务和功能在中国不可用。
現在表示中:
- 6.3
- 旧バージョン
| これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。 |
テーマを使用すると、アダプティブフォームに独自の外観やスタイルを設定できます。アダプティブフォームエディターの初期設定済みテーマを適用することも、独自のカスタムテーマを作成することもできます。AEM Forms はカスタムテーマを作成するためのテーマエディターを提供します。単一のテーマを使用すると、モバイル、タブレット、デスクトップで開いた同一のアダプティブフォームに異なる外観を設定できます。テーマエディターを使用する場合、CSS や LESS の予備知識は特に必要ありません。
このチュートリアルを終了すると、以下の操作を実行できるようになります。
- 初期設定済みテーマをアダプティブフォームに適用する
- テーマエディターを使用して、アダプティブフォームのテーマを作成する
- 個別コンポーネントのスタイルを設定する
- オプション：カスタムテーマに Web フォントを使用する
チュートリアルを完了すると、フォームの外観は以下のようになります。
以下に示すヘッダースタイルとロゴの画像をローカルマシンにダウンロードします。shipping-address-add-update-form アダプティブフォームのヘッダーは、ヘッダースタイルとロゴの画像を使用します。ヘッダースタイルの画像はヘッダーの右側に表示されます。
ダウンロード
アダプティブフォームエディターは多数の初期設定済みテーマを提供します。アダプティブフォームにカスタムスタイルを使用する場合は、初期設定済みテーマを使用してアダプティブフォームを発行することもできます。テーマはアダプティブフォームから独立しています。同一のテーマを複数のアダプティブフォームに適用できます。テーマをアダプティブフォームに適用するには、次の手順を実行します。
-
ヘッダーの既存のロゴとテキストを変更します。ロゴを削除するには、次の手順を実行します。
- フォームエディターでフォームを開きます。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html - ヘッダーコンポーネントでロゴの画像をタップし、「プロパティ」
をタップします。画像のプロパティで X をタップし、既存のロゴの画像を削除します。 - 「アップロード」をタップし、logo.png を選択します。次に、
をタップして変更内容を保存します。この画像は「事前準備」セクションでダウンロードした画像です。 - ヘッダーテキスト We.Retail をタップし、「編集」
をタップします。ヘッダーテキストを we retail に変更します。we retail の we のみに太字書式設定を適用します。
- フォームエディターでフォームを開きます。
テーマエディターを使用すると、カスタムテーマを作成できます。テーマエディターは非常に強力な WYSIWYG エディターです。視覚的に確認しながら、アダプティブフォームの各種コンポーネントに CSS を適用できます。アダプティブフォームのコンポーネントやパネルのスタイルを詳細にコントロールできます。
アダプティブフォームと同様、テーマは独立したエンティティです。アダプティブフォームのコンポーネントとパネルのスタイル（CSS）が含まれています。スタイルには背景色、状態色、透明度、配置、サイズなど、CSS プロパティが含まれています。テーマを適用すると、指定したスタイルがアダプティブフォームの対応するコンポーネントに適用されます。
このチュートリアルでは、ヘッダー、フッター、テキストコンポーネント、数値コンポーネント、添付ファイルコンポーネント、ボタンのスタイルを設定します。まずテーマを作成することから始めましょう。
-
AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／テーマに移動します。デフォルトの URL は http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes です。
-
「作成」をタップし、「テーマ」を選択します。テーマの作成が必要なフィールドが含まれた「テーマを作成」ページが表示されます。「タイトル」と「ドキュメント名」の各フィールドは入力が必須です。
- タイトル：テーマのタイトルを指定します。（グローバルテーマなど）。タイトルはテーマのリストから目的のテーマを見つけるのに役立ちます。
- 名前：テーマの名前を指定します。（グローバルテーマなど）。指定された名前のノードがリポジトリに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用することができます。無効な入力はすべてハイフンに置き換えられます。
-
「作成」をタップします。テーマが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」をタップし、新しく作成されたテーマを新しいタブで開きます。テーマがテーマエディターで開きます。スタイルを設定する際、テーマエディターは AEM Forms に付属している初期設定済みアダプティブフォームを使用します。
テーマエディター UI の使用について詳しくは、「テーマエディターについて」を参照してください。
／設定をタップします。「フォームをプレビュー」フィールドで shipping-address-add-update-form アダプティブフォームを選択し、
ヘッダーとフッターをアダプティブフォームで使用すると、独特な外観を作成できます。通常、ヘッダーには組織のロゴと名前が含まれ、フッターには著作権情報が含まれます。これらは組織の複数のフォーム間で統一されます。shipping-address-add-update-form アダプティブフォームのヘッダーとフッターのスタイルを設定するには、次の手順を実行します。
-
ヘッダーウィジェットの「背景」アコーディオンを展開し、「背景色」を F6921E に設定します。
画像とグラデーション／+ 追加にカーソルを置き、 「画像」をタップします。次のプロパティを設定し、
をタップします。プロパティ 値 image header-style.png をアップロードします。この画像は「事前準備」セクションでダウンロードした画像です。 位置 右下 タイル 繰り返しなし
サイドパネルを切り替え
リンクアイコンをタップします。アダプティブフォームでは複数のコンポーネントを使用してデータを取得できます。例えば、テキストボックスと数値ボックスを使用できます。すべてのデータ取得コンポーネントに同じスタイルを設定することも、コンポーネントごとに異なるスタイルを設定することもできます。このチュートリアルでは、数値ボックス（顧客 ID、郵便番号）とテキストボックス（顧客 ID、名前、発送先住所、状態、電子メール）に同じスタイルを適用します。 データ取得コンポーネントのスタイルを設定するには、次の手順を実行します。
カスタムテーマを使用すると、アダプティブフォームのすべてのボタンに同じスタイルを適用することも、特定のボタンにインラインスタイル設定を適用することもできます。ボタンのスタイルを設定するには、次の手順を実行します。
-
アダプティブフォームにカスタムテーマを適用するか、グローバルテーマを適用します。スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを削除した後、もう一度実行してください。
アダプティブフォームは各種フォントを使用してデザインできます。アダプティブフォームのデザインに使用するフォントが、アダプティブフォームを表示するデバイスに存在しない場合があります。Web フォントサービスを使用すると、必要なフォントを目的のデバイスで使用できます。
Adobe Typekit は Web フォントサービスです。アダプティブフォームでこのサービスを設定、使用できます。Adobe Typekit をアダプティブフォームで使用するには、次の手順を実行します。
-
Adobe Typekit アカウントを作成し、キットを作成します。次に、Myriad Pro フォントをキットに追加してキットを発行し、キット ID を取得します。アダプティブフォームでは Adobe Typekit フォント（Web フォント）を使用する必要があります。
Adobe Experience Manager／ツール 
／デプロイメント／クラウドサービスに移動します。クラウドサービスページで、サードパーティーのサービス／Typekit に移動し、「今すぐ設定」をクリックします。既に設定を行っている場合は「+」ボタンをクリックし、新しいインスタンスを作成します。
／設定に移動します。 「Typekit 設定」フィールドでキットを選択し、「保存」をクリックします。
