Adobeでは、最新の拡張可能なデータキャプチャを使用することをお勧めします コアコンポーネント 対象: 新しいアダプティブFormsの作成 または AEM SitesページへのアダプティブFormsの追加. これらのコンポーネントは、アダプティブFormsの作成における大幅な進歩を表し、印象的なユーザーエクスペリエンスを実現します。 この記事では、基盤コンポーネントを使用してアダプティブFormsを作成する古い方法について説明します。
バージョン | 記事リンク |
---|---|
AEM 6.5 | ここをクリックしてください |
AEM as a Cloud Service | この記事 |
アダプティブフォームのスタイル設定にテーマを作成して適用できます。テーマには、コンポーネントとパネルのスタイルを設定するための詳細情報が含まれています。スタイルには、背景カラー、ステートカラー、透明度、配置、サイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。テーマは、アダプティブフォームを参照せずに、独立して管理されます。
ソフトウェア配布ポータルから AEM Forms リファレンスコンテンツパッケージをダウンロードしてインストールし、参照テーマとテンプレートを環境に読み込むことができます。
テーマは、アダプティブフォームのようなメタプロパティを含む個別のエンティティとして作成、保存されます。複数のアダプティブフォームのテーマを再利用できます。テーマを別のインスタンスに移動して再利用することもできます。
テーマを作成するには、次の手順を実行します。
Adobe Experience Manager/Forms/テーマの順にクリックします。
テーマページで、作成/テーマをクリックします。テーマを作成するためのウィザードが起動します。
テーマの名前を指定します。
テーマをプレビューするフォームを指定し、「このテーマのデフォルトのプレビュー」フィールドにテーマを指定します。テーマのプレビューにデフォルトのフォームを使用する場合は、「デフォルトを使用」をクリックします。
設定コンテナを指定します。アカウントの Adobe Fonts の詳細設定を含む設定コンテナを選択できます。このオプションを空白のままにして、テーマのプロパティから詳細を指定することもできます。
作成/編集の順にクリックして、テーマエディターでテーマを開きます。テーマページに戻る場合は、「完了」をクリックします。
Cloud Service インスタンスで作成されたテーマ:
バージョン番号 2 があります。
/content/dam/formsanddocuments-themes/<theme-name>/
に保存されます。
クライアントライブラリオプションは提供しません。クライアントライブラリのカテゴリとパスは指定できません。
/apps の場所に対する書き込み権限および更新権限はありません(Forms ユーザーグループは、/apps の場所に対する書き込み権限および更新権限はありません)。
Experience Manager Forms 6.5 以前のバージョンで作成された Cloud Service をテーマインスタンスにアップロードする前に、クライアントライブラリの場所が etc/clientlibs/fd/themes
に設定されていることを確認してください。クライアントライブラリが etc
フォルダーに存在しない場合は、etc/clientlibs/fd/themes
に手動で場所を更新します。Experience Manager Forms 6.5 以前のバージョンのインスタンスに変更を加えることができます。クライアントライブラリの場所を設定した後、管理者はテーマを Cloud Service インスタンスにアップロードするか、コンテンツ転送ツールを使用してテーマを 6.5 以前のバージョンのインスタンスから Cloud Service インスタンスに移行できます。
また、カテゴリの名前も変更します。名前が変更されない場合は、theme with same category name exists
エラーが発生する可能性があります。カテゴリ名を変更しても、テーマを使用するアダプティブフォームには影響しません。
テーマを zip ファイルとして書き出し、別のプロジェクトや Experience Manager インスタンスでそのテーマを使用することができます。テーマをダウンロードするには、以下の手順を実行します。
Adobe Experience Manager/Forms/テーマの順にクリックします。
テーマページでテーマを選択し、「ダウンロード」をクリックします。テーマの詳細を示すダイアログボックスが表示されます。
「ダウンロード」をクリックします。テーマが zip ファイルとしてダウンロードされます。
カスタムテンプレートを使用して作成されたアダプティブフォームが関連付けられているテーマをダウンロードする場合は、そのカスタムテンプレートもダウンロードします。ダウンロード済みテーマおよびアダプティブフォームをサーバーにアップロードする際には、関連するカスタムテンプレートもアップロードします。
管理者権限を持つユーザーは、Experience Manager Forms 6.5 以前のバージョンで作成されたテーマをアップロードできます。
テーマをアップロードするには、以下の手順を実行します。
Adobe Experience Manager/Forms/テーマの順にクリックします。
テーマページで、作成/ファイルのアップロードをクリックします。
ファイルのアップロードプロンプトで、コンピューター上のテーマパッケージを参照して選択し、「アップロード」をクリックします。アップロードされたテーマは、テーマページで使用することができます。
以下の表に、テーマのメタプロパティを示します。これらのプロパティは、テーマのプロパティページに表示されます。
ID
|
名前 | 編集の可否 | プロパティの説明 |
---|---|---|---|
1. | タイトル | はい | テーマの表示名です。 |
2. | 説明 | はい | テーマについての説明です。 |
3. | タイプ | いいえ |
|
4. | 作成日 | いいえ | テーマの作成日です。 |
5. | 作成者名 | はい | テーマの作成者です。テーマの作成時に計算されます。 |
6. | 最終変更日 | いいえ | テーマが最後に変更された日付です。 |
7. | ステータス | いいえ | テーマの状態(変更済み/公開済み)。 |
8. | オンタイムに公開 | はい | テーマを自動で公開する時間。 |
9. | オフタイムに公開 | はい | テーマを自動で非公開にする時間です。 |
10. | タグ | はい | 検索の向上のために使用される、識別用にテーマに付加されるラベルです。 |
テーマエディターは、ビジネスユーザーや Web デザイナー/開発者に使いやすいインターフェイスで、様々なアダプティブフォームの要素のスタイル設定に必要な機能を簡単に使用できます。テーマを作成すると、フォームのような独立したエンティティとして保存されます。
テーマエディターでは、テーマでスタイル設定されたコンポーネントのスタイルをカスタマイズできます。デバイス上でのフォームの外観をカスタマイズできます。
テーマエディターは次の 2 つのパネルに分けられます。
キャンバス - 右側に表示されます。ここには、すべてのスタイル設定の変更が即時に反映されるアダプティブフォームのサンプルが表示されます。また、キャンバスから直接オブジェクトを選択して、オブジェクトに関連するスタイルを検索したり、そのスタイルを編集したりすることもできます。上部にあるデバイスの解像度のルーラーにより、キャンバスが制御されます。解像度のブレークポイントをルーラーから選択すると、その解像度でサンプルフォームのプレビューが表示されます。キャンバスについては、下記で説明されています。
サイドバー - 左側に表示されます。以下の項目があります。
セレクター:スタイル設定用に選択されたコンポーネントと、スタイルを設定するプロパティが表示されます。セレクターは、あるタイプのすべてのコンポーネントを表示します。1 つのテーマでテキストボックスを選択してスタイル設定する場合、フォーム内のすべてのテキストボックスがスタイルを継承します。セレクターを使用すると、スタイル設定のための汎用コンポーネントまたは特定のコンポーネントを選択できます。例えば、フィールドコンポーネントは汎用コンポーネント、テキストボックスは特定コンポーネントになります。
汎用コンポーネントのスタイル設定:
フィールドは、年齢などの数値ボックスフィールド、または住所などのテキストボックスフィールドにできます。1 つのフィールドのスタイルを設定すると、年齢、名前、住所などすべてのフィールドのスタイルが設定されます。
特定コンポーネントのスタイル設定:
特定コンポーネントは、特定のカテゴリのオブジェクトに影響します。テーマ内で数値ボックスコンポーネントのスタイルを設定すると、フォームまたはインタラクティブ通信内の数値ボックスオブジェクトでのみ、そのスタイルが継承されます。
例えば、住所などのテキストボックスは長く、年齢などの数値ボックスは短くなります。数値ボックスフィールドを選択して、長さを短くし、フォームに適用します。フォームにあるすべての数値ボックスフィールドの幅が短くなります。
特定の背景色が設定されているすべてのフィールドコンポーネントをカスタマイズすると、年齢フィールド、名前フィールド、住所フィールドなど、すべてのフィールドでその背景色が継承されます。年齢などの数値ボックスを選択し、幅を短くすると、年齢や家族の人数など、すべての数値ボックスの幅が短くなります。テキストボックスの幅は変更されません。
状態:特定の状態にあるオブジェクトのスタイル設定をカスタマイズします。例えば、状態がデフォルト、フォーカス、無効、ホバー、エラーとなっている際のオブジェクトの外観を指定できます。
プロパティカテゴリ:スタイル設定プロパティには、様々なカテゴリがあります。例えば、ディメンションと位置、テキスト、背景、境界線および効果などです。各カテゴリで、スタイル設定情報を指定します。例えば、背景では、背景色や画像とグラデーションを指定します。
詳細:カスタムの CSS を任意のオブジェクトに追加することができます。この CSS により、スタイル設定が重複している場合は、視覚的な制御を行うプロパティが上書きされます。
CSS を表示:選択したコンポーネントの CSS が表示されます。
また、サイドバーの下部に矢印が表示されます。矢印をクリックすると、「成功をシミュレート」と「エラーをシミュレート」という 2 つのオプションがさらに表示されます。これらのオプションは、上記のオプションと合わせて、詳細が下記で説明されています。
1 つのテーマを複数のアダプティブフォームに使用でき、テーマで指定したコンポーネントのフォーマット設定をインポートできます。タイトル、説明、パネル、フィールド、アイコン、テキストボックスなど、様々なコンポーネントのスタイルを設定できます。テーマ内でウィジェットを使用して、コンポーネントのプロパティを設定できます。CSS オーバーライドセクションでは CSS コードを記述することができ、各種カスタムセレクターも用意されているため、CSS や LESS に関する知識は必須ではありませんが、こうした知識があった方が望ましいです。CSS オーバーライドセクションは、サイドバーでコンポーネントを選択すると表示されます。
サイドバーの各種オプションを使用して、様々なコンポーネントを選択してスタイルを設定できます。
サイドバーにあるコンポーネントの「編集」ボタンをクリックすることでキャンバスのコンポーネントが選択され、サイドバーのオプションを使用してコンポーネントのスタイルを設定できます。
テキストボックス、数値ボックス、ラジオボタン、チェックボックスのような特定のコンポーネントは、フィールドのような高レベルのコンポーネントで分類されます。例えば、ラジオボタンのスタイル設定をカスタマイズすることができます。スタイル設定のラジオボタンを設定するには、フィールド/ウィジェット/ラジオボタン を選択します。
AEM Forms のテーマは、フォームのパネルのレイアウトにある要素のスタイル設定をサポートしています。そのまま使用できるレイアウトやカスタムのレイアウト要素のスタイル設定がサポートされています。
すぐに使用できるパネルには以下が含まれています。
左側のタブ
上部のタブ
アコーディオン
レスポンシブ
ウィザード
モバイルレイアウト
セレクターは、レイアウトごとに異なります。テーマエディターからのカスタムレイアウトのスタイル設定には、以下が含まれます。
デスクトップのレイアウトとモバイルのレイアウトは、わずかにまたは全面的に異なるスタイルになります。モバイルデバイスの場合、タブレットとスマートフォンはコンポーネントのサイズを除き同様のレイアウトを共有します。
テーマエディターのブレークポイントを使用して、様々な画面サイズに応じた代替のスタイル設定を定義します。テーマの構築を開始するベースデバイスまたは解像度を選択すると、他の解像度のスタイルバリエーションが自動的に生成されます。すべての解像度のスタイル設定を明示的に変更することができます。
テーマは、まずフォームを使用して作成され、それから異なるフォームに適用されます。テーマの作成に使用されるブレークポイントは、そのテーマが適用されるフォームとは異なる場合があります。CSS メディアクエリーは、テーマを適用するフォームではなく、テーマの作成に使用されているフォームに基づきます。
キャンバスでコンポーネントを選択すると、そのスタイル設定プロパティがサイドバーに一覧表示されます。オブジェクトのタイプと状態を選択して、スタイルを設定します。
テーマエディターは、1 つのコンポーネントに適用される最大 10 個のスタイルをキャッシュします。キャッシュしたスタイルは、別のテーマのコンポーネントで使用できます。最近使用したスタイルは、リストボックスとしてサイドバーで選択したコンポーネントのすぐ下にあります。最初は、最近使用したスタイル一覧は空になっています。
コンポーネントのスタイルを設定すると、そのスタイルはキャッシュされ、リストボックスに一覧表示されます。この例では、テキストボックスのラベルのスタイルを設定して、フォントサイズとカラーを変更します。同様の手順に従って、画像の選択や色の変更を行い、コンポーネントのスタイルを設定することができます。フィールドラベルのスタイル設定が変更されると、スタイルがキャッシュされてリストボックスに一覧表示されます。
この例ではフィールドラベルのスタイルが変更されています。レスポンシブパネル説明がスタイルとして選択されている場合、リストエントリがアセットライブラリ内に追加されます。アセットライブラリのエントリを使用すると、レスポンシブパネル説明のスタイルを変更できます。
スタイルをアセットライブラリに追加すると、他のテーマに使用できて、フォームエディター UI のスタイルモードで利用できます。同様に、フォームエディターのスタイルモードを使用してコンポーネントのスタイル設定を行うと、スタイルはキャッシュされ、テーマ内で使用可能になります。
アセットライブラリでプラスボタンを使用すると、スタイルに名前を付けて永続的に保存できます。サイドバーにある「保存」ボタンをクリックしなくても、プラスボタンを使用すると、スタイルを保存してコンポーネントに適用できます。後で使用するためにスタイルを保存するプラスボタンは、スタイルモードでは使用できません。
スタイルにカスタム名を付けると、そのスタイルはテーマに関連付けられ、他のテーマでは使用できなくなります。保存したスタイルを削除するには、次の手順を実行します。
キャンバスツールバーで、テーマオプション /スタイルを管理をクリックします。
スタイルを管理ダイアログで、保存したスタイルを選択し、「削除」をクリックします。
スタイル設定で行われた修正は、キャンバスに読み込まれたフォームに即時反映されます。ライブプレビューを使用すると、スタイル設定をインタラクティブに定義して、その影響を確認できます。コンポーネントのスタイル設定を変更すると、サイドバーの「完了」ボタンが有効になります。変更を保持するには、「完了」ボタンを使用します。
フィールドに無効な文字が入力されると、フィールドの境界線の色が赤に変わり、画面の左上隅にエラーメッセージが表示されます。例えば、数字を入力できるテキストボックスにアルファベットを入力すると、入力ボックスの境界線の色が赤に変わります。画面の中央下部に表示されるエラーを解決しないと、このようなテーマを保存できません。
テーマを作成する際は、テーマエディターに付属するフォームを使用して作成します。このフォームのコンポーネントのスタイル設定を行います。テーマエディターに付属するフォームの代わりに、指定のフォームを選択して、スタイルを設定し結果を確認することができます。
テーマエディターのキャンバスで現在のフォームを置き換えるには、次の手順を実行します。
テーマエディターパネルで、テーマオプション /設定をクリックします。
「一般」タブの「アダプティブフォーム」フィールドで、目的のフォームを参照して選択します。
意図しない変更を取り消すまたはやり直すことができます。キャンバスの「やり直し/取り消し」ボタンをクリックします。
「やり直し/取り消し」ボタンは、テーマエディターでコンポーネントのスタイルを設定すると表示されます。
テーマエディターでは、作成またはアップロードしたテーマを編集できます。フォームとドキュメント/テーマに移動し、テーマを選択して開きます。テーマエディターでテーマが開きます。
上記で説明されているように、テーマエディターにはサイドバーとキャンバスの 2 つのパネルがあります。
テーマエディターのテキストボックスウィジェットコンポーネントの成功状態スタイル設定をカスタマイズします。キャンバスでコンポーネントを選択し、サイドバーでその状態を選択します。サイドバーで使用できるスタイル設定オプションで、コンポーネントの外観をカスタマイズします。
テーマは、そのまま使用できるフォームまたは選択したフォームのいずれかを使用して作成します。キャンバスは、テーマでカスタマイズの指定を行った、テーマの作成に使用されるフォームのプレビューを表示します。フォーム上部にあるルーラーは、デバイスの表示サイズに応じてレイアウトを決定するために使用します。
キャンバスツールバーには、以下が表示されます。
サイドパネルを切り替え :サイドバーの表示と非表示を切り替えます。
テーマオプション :3 つのオプションを提供します。
エミュレーター :異なる画面サイズで、テーマの外観をエミュレートできます。表示サイズは、エミュレーターでブレークポイントとして処理されます。ブレークポイントを選択し、そのスタイルを指定できます。例えば、デスクトップとタブレットは 2 つのブレークポイントです。ブレークポイントごとに異なるスタイルを指定できます。
キャンバスでコンポーネントを選択すると、その上部にコンポーネントツールバーが表示されます。コンポーネントツールバーを使用すると、コンポーネントを選択したり、汎用コンポーネントに切り替えたりできます。例えば、パネルの数値テキストボックスを選択するとします。コンポーネントツールバーには次のオプションが表示されます。
数値ボックスウィジェット:サイドバーで外観をカスタマイズするコンポーネントを選択できます。
フィールドウィジェット:スタイル設定の汎用コンポーネントを選択できます。この例では、スタイル設定にすべてのテキスト入力コンポーネント(テキストボックス/数値ボックス/数値ステッパー/日付入力)が選択されています。
:親コンポーネントを選択してスタイル設定できます。数値ボックスを選択してこのアイコンをタップすると、フィールドコンポーネントが選択されます。フィールドコンポーネントを選択してこのアイコンをタップすると、パネルが選択されます。このアイコンをタップし続けると、最終的にスタイル設定用のレイアウトが選択されます。
コンポーネントのツールバーで使用できるオプションは、選択したコンポーネントにより異なります。
テーマエディターのサイドバーには、テーマ内のコンポーネントのスタイルをカスタマイズし、セレクターを使用するためのオプションが用意されています。セレクターにより、コンポーネントのグループまたは個別のコンポーネントを選択し、サイドバーのセレクターを検索できます。カスタムコンポーネントのセレクターを作成できます。
キャンバスまたはサイドバーのセレクターでコンポーネントを選択する場合、サイドバーにはスタイルをカスタマイズするためのすべてのオプションが表示されます。コンポーネント選択時、サイドバーに表示されるオプションは次のとおりです。
状態は、コンポーネントに対するユーザーインタラクションの指標です。例えば、ユーザーがテキストボックスに誤ったデータを入力した場合、テキストボックスの状態はエラー状態に変わります。テーマエディターにより、特定の状態に対するスタイル設定を指定できます。
状態のスタイルのカスタマイズのオプションは、コンポーネントごとに異なります。
プロパティ | 使用方法 |
寸法と位置 |
テーマ内のコンポーネントの整列、サイズ、位置、配置のスタイルを設定できます。 オプションは、ディスプレイ設定、余白、マージン、幅、高さおよび Z インデックスです。 レイアウトモードを使用すると、ドラッグ&ドロップが容易なインターフェイスを使用してコンポーネントの幅を定義することもできます。詳しくは、レイアウトモードを使用したコンポーネントのサイズ変更を参照してください。 |
テキスト |
テーマのコンポーネントのテキストスタイルをカスタマイズできます。 例えば、テキストボックスに入力したテキストの見え方を変更するとします。 オプションには、フォントファミリー、太さ、カラー、サイズ、行の高さ、テキストの整列、文字間隔、テキストのインデント、下線、斜体、テキストの変換、垂直方向の整列、ベースライン、方向があります。 |
背景 |
コンポーネントの背景を画像または色で塗りつぶします。 |
境界線 |
コンポーネントの境界線の外観を選択できます。例えば、テキストボックスに濃い赤の太い境界線を点線で付けるとします。 オプションは、境界線の幅、スタイル、半径および色です。 |
効果 |
コンポーネントに、不透明度、描画モード、シャドウなどの特殊効果を追加できます。 |
詳細 |
以下を追加できます。
カスタムの CSS コードを追加すると、サイドバーのオプションを使用して追加したカスタマイズがオーバーライドされます。 |
サイドバーの下部には、「エラーをシミュレート」オプションと「成功をシミュレート」オプションがあります。サイドバーの下部に表示される表示/非表示の矢印を使用すると、これらのオプションを表示できます。テーマエディターを使用して、様々な状態のコンポーネントのスタイルを設定できます。
例えば、フォームに数値フィールドを追加して、テーマエディターでそのスタイル設定を指定します。ユーザーがフィールドに英数字を入力する際に、テキストボックスの背景色を変更するとします。テーマで数値フィールドを選択して、サイドバーにある状態オプションを使用します。サイドバーでエラー状態を選択し、背景色を赤に変更します。動作をプレビューするには、サイドバーにある「エラーをシミュレート」オプションを使用します。「エラーをシミュレート」および「成功をシミュレート」オプションについて、以下で詳しく説明します。
成功をシミュレート:
成功状態のスタイル設定を指定した場合のコンポーネントの見え方を確認できます。例えば、フォームで顧客がパスワードを設定します。ユーザーは、指定されたガイドラインに従ってパスワードを設定できます。指定されたすべてのガイドラインに従ってパスワードを入力すると、テキストボックスが緑色に変わります。テキストボックスが緑色に変わると、成功状態になります。成功状態のコンポーネントのスタイルを指定し、その外観を「成功をシミュレート」オプションを使用してシミュレートできます。
エラーをシミュレート:
エラー状態のスタイル設定を指定した場合のコンポーネントの見え方を確認できます。例えば、フォームで顧客がパスワードを設定します。ユーザーは、指定されたガイドラインに従ってパスワードを設定できます。指定されたガイドラインに従わずにパスワードを入力すると、テキストボックスが赤色に変わります。テキストボックスが赤色に変わると、エラー状態になります。エラー状態のコンポーネントのスタイルを指定し、その外観を「エラーをシミュレート」オプションを使用してシミュレートできます。
例えば、フォームに 2 つのタイプのテキストボックスがあるとします。一方は数値のみ、もう一方は英数字の値を入力できます。数値のみを入力できるテキストボックス(数値ボックス)のスタイル設定をカスタマイズできます。
特定のコンポーネント(この例では数値ボックス)のスタイル設定をカスタマイズするには、次の手順を実行します。
テーマエディターで、キャンバスの数値ボックスを選択します。
数値ボックスを選択すると、オプションが 3 つあるコンポーネントツールバーが表示されます。
数値ボックスウィジェット を選択します。
サイドバーのタイトルが「数値ボックスウィジェット」に変わり、外観をカスタマイズするオプションが表示されます。サイドバーの「寸法と位置」オプションを使用して、コンポーネントのサイズをカスタマイズします。状態がデフォルトであることを確認してください。
数値ボックスウィジェットを選択する代わりに、コンポーネントツールバーのフィールドウィジェットを選択し、上記の手順を実行します。「フィールドウィジェット」オプションでサイズを選択すると、数値ボックスを除くすべてのテキストボックスが同じサイズになります。
コンポーネントツールバーを使用して、異なる状態のコンポーネントのスタイルを設定することもできます。例えば、コンポーネントが無効になっている場合、無効状態になります。テーマエディターでスタイルを設定できるコンポーネントの状態としてよく使用されるのは、デフォルト、フォーカス、無効、エラー、成功およびホバーです。キャンバスでコンポーネントを選択して、サイドバーの状態オプションを使用し、外観をカスタマイズできます。
特定の状態のコンポーネントのスタイル設定をカスタマイズするには、次の手順を実行します。
状態を指定した後にコンポーネントのスタイル設定をカスタマイズすると、カスタマイズは指定された状態のコンポーネントにのみ表示されます。例えば、ホバー状態が選択されているときにコンポーネントのスタイル設定をカスタマイズするとします。このカスタマイズは、テーマを適用するレンダリングされたフォームのコンポーネント上にポインターを移動すると、コンポーネントに現れます。
エラーと成功以外の状態の動作をシミュレートするには、プレビューモードを使用します。プレビューモードを使用するには、ページツールバーにある「プレビュー」をクリックします。
キャンバスのルーラーを使用して、画面が小さいデバイスのブレークポイントを選択します。キャンバスのエミュレーター をクリックして、ルーラーとブレークポイントを表示します。ブレークポイントでは、電話やタブレットなど様々なデバイスに関する、画面のサイズのフォームをプレビューできます。テーマエディターでは、複数の画面サイズがサポートされています。
異なるブレークポイントにスタイルを設定するには、次の手順を実行します。
複数のデバイスでフォームのコンポーネントのスタイルを設定することができます。デスクトップおよびモバイルデバイスのフォームコンポーネントは、全面的に異なるスタイルになります。
Web サービスで利用可能なフォントをアダプティブフォームで使用できるようになりました。Adobe の Web フォントサービスである Adobe Fonts は、設定サービスとしてすぐに使用できます。Adobe Fonts を使用するには、キットを作成し、その中にフォントを追加し、Adobe Fonts からキット ID を取得します。
Experience Manager で Adobe Fonts を設定するには、次の手順を実行します。
オーサーインスタンスで、 をクリックし、Adobe Experience Manager /ツール
/デプロイメント/ Cloud Services をクリックします。
Cloud Services ページで、「Adobe Fonts」オプションに移動して開きます。設定フォルダーを開き、「作成」をクリックします。
設定を作成ダイアログで、新しい設定のタイトルと名前を指定し、「作成」をクリックします。
設定ページにリダイレクトされます。
コンポーネントを編集ダイアログが表示されるので、キット ID を入力して「OK」をクリックします。
テーマを Adobe Fonts 設定を使用するように設定するには、次の手順を実行します。
オーサーインスタンスで、テーマエディターにあるテーマを開きます。
テーマエディターで、テーマオプション /設定に移動します。
「Adobe Fonts 設定」フィールドで、キットを選択して「保存」をクリックします。
これで、テーマのフォントファミリーのプロパティにフォントが追加されたことが分かります。
「+」ボタンを使用して、フォントを追加できます。フォントを追加すると、サイドバーに表示されます。
テーマの設定オプションに加えて、テーマエディター自体からフォントを追加することもできます。サイドバーの下にある「フォントファミリー」フィールドに使用するフォントを入力し、キーボードの Return キーを押します。
フォントを選択すると、フォントファミリーリストに追加されます。テーマエディターの「マスク」オプションを使用して、リストに表示されているフォントを無効または有効にすることができます。
コンポーネントのフォントが変更されたことを確認できます。
「フォントファミリー」フィールドは、複数のフォントをサポートしています。フォントを入力すると、ブラウザーはフォントを検索し、選択したコンポーネントに適用します。フォントが見つからない場合は、ブラウザーは、ファミリー内でそのフォントの横にあるフォントを探します。検索する特定のフォントを入力して開始できます。使用するフォントが見つからない場合は、フォントファミリーに一般的なフォントを入力して使用できます。
テーマ内で適用されているスタイルをマスクできるようになりました。テーマエディターのサイドバーに表示されている アイコンを使用して、適用されているスタイルを無効にできます。例えば、フォーム内のコンポーネントのサイズを変更した場合、プロパティの左側に表示されているマスクボタンを使用して、そのプロパティを無効にすることができます。テーマを保存すると、選択した「マスク」オプションが保持されます。
以下の例では、テーマ内でマスクされたスタイルとマスクされていないスタイルを示しています。
テーマをアダプティブフォームに適用するには、次の手順を実行します。
フォームを編集モードで開きます。フォームを編集モードで開くには、フォームを選択し、「開く」をクリックします。
編集モードで、コンポーネントを選択し、/アダプティブフォームコンテナをクリックしてから、
をクリックします。
サイドバーのフォームのプロパティを編集できます。
サイドバーで、「スタイル設定」をクリックします。
「アダプティブフォームのテーマ」ドロップダウンリストからテーマを選択し、完了 をクリックします。
アダプティブフォームの作成時に、アダプティブフォームのテーマを定義することもできます。
テーマにより、フォーム内の異なるコンポーネントのスタイルが設定されます。themeOverride
プロパティを使用して、フォームのテーマを動的に変更できます。フォームの一般的な URL は次のとおりです。
https://<server>:<port>/content/forms/af/test.html
themeOverride パラメーターを使用して、実行時にテーマを適用できます。
https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme
「themeOverride
」オプションを使用して、テーマにパスを提供できます。これにより、フォームのテーマを変更し、更新されたスタイルを使用してフォームをリフレッシュします。
AEM Forms には、すぐに使用できるデフォルトのキャンバステーマ以外に、様々なテーマが用意されています。他のテーマを使用してフォームをデザインする場合は、変更を追加するとともに、テーマライブラリフォルダーからテーマをコピーします。コピーしたテーマをテーマライブラリフォルダーの外部に貼り付け、コピーしたテーマを必要な変更に応じて編集します。
テーマをコピーするには、次の手順を実行します。
テーマをカスタマイズした後、これをフォームに適用します。
テーマライブラリフォルダーにあるテーマに変更を加えないでください。このフォルダーにはシステムテーマが含まれています。これらのテーマに加えた変更は、AEM Forms の新しいバージョンまたはホットフィックスのインストール時にすべて上書きされます。
「CSS を表示」を選択すると、テーマエディターはすべてのスタイル設定情報を収集し、CSS を構築します。情報は次の順序で収集されます。
例えば、テキストボックスの背景色は、ブルーです。サイドバーのプロパティを使用して、ピンクに変更します。CSS を生成すると、テキストボックスの背景色がピンク色になります。プロパティを使用して背景色を変更した後、別の作成者が「CSS 上書き」オプションを使用してテキストボックスの背景色を白に変更できます。CSS を生成すると、生成された CSS の背景色が白になります。
テーマエディターでコンポーネントのスタイルを指定すると、CSS が生成されます。汎用コンポーネントをスタイル設定する場合、これに含まれる複数のコンポーネントもスタイル設定されます。例えば、1 つのフィールドにスタイルを設定すると、そこに含まれるテキストボックスとラベルのスタイルも設定されます。フィールド内のテキストボックスのスタイルを設定すると、その CSS が設定されます。フィールドとコンポーネント用に生成された CSS をデバッグする場合は、テーマエディターに CSS を表示するオプションがあります。
生成された CSS は、次のオプションを使用して確認できます。
::before
、::after
疑似要素を含め、生成された CSS を表示します。別のテーマに属するアセットの回避
テーマを編集する際、アセット(画像など)を他のテーマから参照して追加することができます。例えば、ページの背景を編集しているとします。例えば、ページ /背景/追加/画像を選択すると、他のテーマの画像を参照して追加することが可能なダイアログが表示されます。
アセットを別のテーマから追加し、そのテーマが移動または削除されると、現在のテーマに問題が生じる場合があります。他のテーマからアセットを参照して追加しないようにすることをお勧めします。
テーマを作成して、それをコピーし、コピーしたテーマのスタイル設定を変更して同じような用途に使用することもできます。
詳しくは、「テーマを使用した外観の設定」を参照してください (#specific-af-appearance)
テーマエディターを使用すると、フォームのスタイルを設定するテーマを作成できます<!-- またはインタラクティブ通信 -->。テーマ内のコンポーネントのスタイル設定を指定すると、開発する複数のフォーム間でルックアンドフィールの一貫性を保つことができます。 まずテーマのスタイル設定情報を指定し、その後でテーマをフォームに適用することをお勧めします。
フォームで作業を行う際に、スタイルモードになっているフォーム<!–またはインタラクティブ通信–>のマルチチャネルエディターを使用して、コンポーネントのスタイルを設定できます。スタイルモードを使用してフォームコンポーネントのスタイル設定を変更すると、テーマで指定したスタイル設定は上書きされます。特定のフォームの特定のコンポーネントのスタイル設定を変更する方法については、「コンポーネントのインラインスタイル設定 (/docs/experience-manager-cloud-service/content/forms/adaptive-forms-authoring/authoring-adaptive-forms-foundation-components/configure-layout-of-an-adaptive-form/inline-style-adaptive-forms.html?lang=ja)
」を参照してください。
コンテナパネルのレイアウト幅の変更
コンテナパネルのレイアウト幅の変更はお勧めしません。コンテナパネルの幅を指定すると、幅が静的になり、様々なディスプレイに合わせて調整されません。
ヘッダーとフッターを操作する際にフォームエディターまたはテーマエディターを使用する場合
テーマエディターは、フォントスタイル、背景、透明度などのスタイル設定オプションを使用してヘッダーとフッターのスタイルを設定する場合に使用します。
ヘッダーにロゴイメージや企業名などの情報を表示し、フッターに著作権情報を表示する場合は、フォームエディターのオプションを使用します。