テーマを作成して適用することにより、アダプティブフォームやインタラクティブ通信のスタイルを設定して視覚的に表現することができます。テーマには、コンポーネントとパネルのスタイルを設定するための詳細情報が含まれています。スタイルには、背景色、状態色、透明度、配置、およびサイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。テーマは、独立して管理されます。アダプティブフォームやインタラクティブ通信が参照されることはありません。
以下の操作を実行できます。
AEM Forms では、テーマを作成、ダウンロード、アップロードすることができます。テーマは、フォーム、ドキュメント、レターなど他のアセットと同様に作成することができます。テーマは、フォームのように独立したエンティティとして、メタプロパティとあわせて完結して保存することができます。テーマは独立したエンティティであるため、複数のアダプティブフォームとインタラクティブ通信で再利用することができます。テーマを別の AEM Forms インスタンスに移動して再利用することもできます。
次の手順を実行して、テーマを作成します。
「Adobe Experience Manager」、「フォーム」、「テーマ」の順にクリックします。
テーマページで、作成/テーマをクリックします。
テーマを作成するウィザードが起動します。
テーマ作成ウィザードの「基本」タブで、テーマの「タイトル」フィールドと「名前」フィールドに値を指定します。これらは必須フィールドです。
「詳細設定」タブには、次の2つのフィールドがあります。
Clientlibの場所:テーマのclientlibを格納するリポジトリ内の場所。
Clientlibカテゴリ:テーマのclientlibカテゴリ名を入力するためのテキストフィールドを指定します。
「作成」をクリックし、「編集」をクリックしてテーマエディターでテーマを開くか、「完了」をクリックしてテーマページに戻ります。
テーマを zip ファイルとして書き出し、別のプロジェクトや AEM インスタンスでそのテーマを使用することができます。テーマをダウンロードするには、次の手順を実行します。
「Adobe Experience Manager」、「フォーム」、「テーマ」の順にクリックします。
テーマページでテーマを選択し、「ダウンロード」をクリックします。テーマの詳細を示すダイアログボックスが表示されます。
「ダウンロード」をクリックします。テーマが zip ファイルとしてダウンロードされます。
カスタムテンプレートを使用して作成されたアダプティブフォームが関連付けられているテーマをダウンロードする場合は、そのカスタムテンプレートモダウンロードしてください。ダウンロードしたテーマとアダプティブフォームを AEM Forms サーバーにアップロードする場合は、関連するカスタムテンプレートもアップロードしてください。
プロジェクトにスタイル設定がプリセットされた作成済みのテーマを使用することができます。他の人が作成したテーマのパッケージをプロジェクトにアップロードしてインポートすることができます。
テーマをアップロードするには、次の手順を行います。
「Adobe Experience Manager」、「フォーム」、「テーマ」の順にクリックします。
テーマページで、作成/ファイルのアップロードをクリックします。
ファイルのアップロードプロンプトで、コンピュータ上のテーマパッケージを参照して選択し、「アップロード」をクリックします。アップロードしたテーマは、テーマページで使用できます。
以下の表に、テーマのメタプロパティを示します。これらのプロパティは、テーマのプロパティページに表示されます。
ID
|
名前 | 編集の可否 | プロパティの説明 |
---|---|---|---|
1. | タイトル | 可 | テーマの名前を表示します。 |
2. | 説明 | 可 | テーマについての説明です。 |
3. | 型 | 不可 |
|
4. | 作成日 | 不可 | テーマの作成日 |
5. | 作成者名 | 可 | テーマの作成者。テーマの作成時に計算されます。 |
6. | 最終変更日 | 不可 | テーマが最後に変更された日付。 |
7. | ステータス | 不可 | テーマの状態(変更済み/発行済み)。 |
8. | Publish On Time | 可 | テーマを自動で発行する時間。 |
9. | Publish Off Time | 可 | テーマを自動で非公開にする時間。 |
10. | タグ | 可 | 検索の向上のため、識別用にテーマに付加されるラベル。 |
11. | 参照 | リンク |
|
12. | Clientlib の場所 | 可 |
|
13. | Clientlib カテゴリ名 | 可 |
|
AEM Forms にはテーマエディターが付属します。これは、ビジネスユーザーやWebデザイナー/開発者に使いやすいインターフェイスで、様々なアダプティブフォームやインタラクティブなコミュニケーション要素のスタイル設定に必要な機能を簡単に提供します。 テーマを作成すると、フォーム、インタラクティブ通信、レター、ドキュメントフラグメント、データディクショナリなど、個別のエンティティとして保存されます。
テーマエディターでは、テーマでスタイル設定されたコンポーネントのスタイルをカスタマイズすることができます。デバイス上でのフォームやインタラクティブ通信の外観をカスタマイズすることができます。
テーマエディターは、2つのパネルに分かれています。
キャンバス — 右側に表示されます。キャンバスには、サンプルのアダプティブフォームまたはインタラクティブ通信が表示されます。スタイルを変更すると、その変更内容がキャンバス上で即時に反映されます。また、キャンバスから直接オブジェクトを選択して、関連するスタイルを検索し、そのスタイルを編集することができます。上部にあるデバイスの解像度のルーラーにより、キャンバスが制御されます。解像度のブレークポイントをルーラーで選択すると、各解像度について、サンプルのフォームまたはインタラクティブ通信のプレビューが表示されます。キャンバスについては、下記で説明されています。
サイドバー - 左側に表示されます。以下のアイテムがあります。
セレクター:スタイル設定用に選択されたコンポーネントと、スタイルを設定するプロパティが表示されます。セレクターは、あるタイプのすべてのコンポーネントを表示します。テーマ内でテキストボックスコンポーネントを編集用に選択すると、フォームまたはインタラクティブ通信内のすべてのテキストボックスで、同じスタイルが継承されます。セレクターにより、汎用コンポーネントまたは特定コンポーネントのスタイル設定が可能になります。例えば、フィールドコンポーネントは汎用コンポーネント、テキストボックスは特定コンポーネントになります。
スタイル設定の汎用コンポーネント:
フィールドは、年齢などの数値ボックスフィールドか、住所などのテキストボックスフィールドにすることができます。 1 つのフィールドのスタイルを設定すると、年齢、名前、住所などすべてのフィールドのスタイルが設定されます。
特定のコンポーネントのスタイル設定:特定のコンポーネントは、特定のカテゴリのオブジェクトに影響を与えます。テーマで数値ボックスコンポーネントのスタイルを設定する場合、の数値ボックスオブジェクトのみがスタイルを継承します。
例えば、住所などのテキストボックスは長く、年齢などの数値ボックスは短くなります。数値ボックスフィールドを選択して、長さを短くし、フォームに適用します。フォームにあるすべての数値ボックスフィールドの幅が短くなります。
すべてのフィールドコンポーネントを特定の背景色でカスタマイズする場合、年齢、名前、住所などのすべてのフィールドは背景色を継承します。 年齢などの数値ボックスを選択し、幅を短くすると、年齢や家族の人数など、すべての数値ボックスの幅が短くなります。テキストボックスの幅は変更されません。
状態:特定の状態のオブジェクトのスタイルをカスタマイズ できます。例えば、デフォルト、フォーカス、無効、ホバー、エラーの状態におけるオブジェクトの見え方を指定することができます。
プロパティカテゴリ:スタイル設定プロパティには、様々なカテゴリがあります。例えば、「Dimensionと位置」、「テキスト」、「背景」、「境界線」、「効果」などです。 各カテゴリで、スタイル設定情報を指定します。 例えば、「背景」で、背景色と画像とグラデーションを指定できます。
詳細:カスタムCSSをオブジェクトに追加 できます。オブジェクトは、重なりがある場合に視覚コントロールの定義に対するプロパティを上書きします。
CSS を表示:選択したコンポーネントの CSS が表示されます。
また、サイドバーの下部に矢印が表示されます。矢印をクリックすると、「成功をシミュレート」と「エラーをシミュレート」という 2 つのオプションがさらに表示されます。これらのオプションは、上記のオプションとあわせて、詳細が下記で説明されています。
複数のアダプティブフォームとインタラクティブ通信で、同じテーマを使用することができます。その場合、そのテーマ内で指定したコンポーネントの書式設定がアダプティブフォームとインタラクティブ通信にインポートされます。タイトル、説明、パネル、フィールド、アイコン、テキストボックスなど、様々なコンポーネントのスタイルを設定できます。 テーマ内でウィジェットを使用して、コンポーネントのプロパティを設定することができます。CSS オーバーライドセクションでは、CSS コードを記述することができ、各種のカスタムセレクターも用意されているため、CSS や LESS に関する知識は必須ではありませんが、こうした知識があった方が望ましいです。CSS オーバーライドセクションは、サイドバーでコンポーネントを選択すると表示されます。
サイドバーの各種オプションを使用して、様々なコンポーネントを選択してスタイルを設定することができます。
サイドバーにあるコンポーネントの「編集」ボタンをクリックすることでキャンバスのコンポーネントが選択され、サイドバーのオプションを使用してコンポーネントのスタイルを設定することができます。
テキストボックス、数値ボックス、ラジオボタン、チェックボックスのような特定のコンポーネントは、フィールドのような高レベルのコンポーネントで分類されます。例えば、ラジオボタンのスタイル設定をカスタマイズすることができます。スタイル設定のラジオボタンを設定するには、フィールド/ウィジェット/ラジオボタンを選択します。
サイドバーの「すべてを展開」をクリックして、前面に表示されていない分類化されたコンポーネントを表示、選択、ならびにスタイル設定をします。
AEM Forms のテーマでは、フォームと非インタラクティブ通信のパネルレイアウトで、各種要素のスタイルを設定することができます。そのまま使用できるレイアウトやカスタムのレイアウトの要素のスタイル設定がサポートされています。
そのまま使用できるパネルには以下が含まれています。
左側のタブ
上部のタブ
アコーディオン
レスポンシブ
ウィザード
モバイルレイアウト
セレクターは、レイアウトごとに異なります。テーマエディターからのカスタムのレイアウトのスタイル設定には、以下が含まれます。
デスクトップおよびモバイルのレイアウトは、わずかにまたは全面的に異なるスタイルになります。モバイルデバイスでは、タブレットと電話はコンポーネントのサイズを除き同様のレイアウトを共有します。
テーマエディターのブレークポイントを使用して、異なる画面サイズ別のスタイル設定を定義しましょう。テーマの構築を開始するベースデバイスまたは解像度を選択して、テーマの構築を開始し、その他の解像度のスタイリングが自動で生成されます。すべての解像度のスタイル設定を明示的に変更することができます。
最初に、フォームまたはインタラクティブ通信を使用してテーマが作成され、次に、各種のフォームやインタラクティブ通信にそのテーマが適用されます。テーマの作成に使用されるブレークポイントは、そのテーマが適用されるフォームやインタラクティブ通信とは異なる場合があります。CSSメディアクエリは、テーマを適用したフォームやインタラクティブな通信ではなく、テーマの作成に使用したフォームまたはインタラクティブな通信に基づきます。
コンポーネントをキャンバスで選択すると、そのスタイル設定プロパティはサイドバーにリスト表示されます。オブジェクトタイプと状態を選択して、スタイルを設定します。
テーマエディターは、コンポーネントに適用した最大 10 個のスタイルをキャッシュします。キャッシュされたスタイルは、テーマの他のコンポーネントと共に使用できます。 最近使用したスタイルは、リストボックスとしてサイドバーで選択したコンポーネントのすぐ下にあります。最初は、最近使用したスタイル一覧は空になっています。
コンポーネントのスタイルを設定すると、そのスタイルはキャッシュされ、リストボックスに一覧表示されます。この例では、フォントサイズと色を変更するためにテキストボックスのラベルのスタイルを設定します。この手順は、コンポーネントのスタイルを設定する際に画像を選択したり色を変更したりする手順と同様です。フィールドラベルのスタイル設定が変更されると、スタイルがキャッシュされてリストボックスに一覧表示されます。
この例ではフィールドラベルのスタイルが変更されています。「レスポンシブパネル説明」でスタイルが選択されると、そのエントリがアセットライブラリ内に追加されます。アセットライブラリのエントリを使用すると、「レスポンシブパネル説明」のスタイルを変更できます。
アセットライブラリに追加されたスタイルは、別のテーマで使用することができます。また、スタイルモードになっているフォームエディターまたはインタラクティブ通信の UI で使用することもできます。同様に、フォームエディターまたはインタラクティブ通信エディターUIのスタイルモードを使用してコンポーネントのスタイルを設定する場合、そのスタイルはキャッシュされ、テーマで使用できます。
アセットライブラリでプラスボタン(+)を使用すれば、スタイルに名前を付けて永続的に保存できます。プラスボタン(+)を使用すれば、サイドバーにある「保存」ボタンをクリックしなくても、スタイルを保存してコンポーネントにスタイルを適用できます。スタイルモードでは、今後使用するためにプラスボタン(+)でスタイルを保存することはできません。
スタイルにカスタム名を付けると、スタイルはテーマに関連付けられて、他のテーマには使用できなくなります。保存したスタイルを削除するには、次の手順を実行します。
[キャンバス]ツールバーで、[テーマのオプション]![テーマのオプション] [スタイルの管理]をクリックします。
[スタイルを管理]ダイアログで、保存されているスタイルを選択し、[削除]をクリックします。
スタイル設定で行った変更内容は、キャンバス上にロードされたフォームまたはインタラクティブ通信で即時に反映されます。ライブプレビューにより、スタイル設定をインタラクティブに指定し、その影響を確認できます。コンポーネントのスタイル設定を変更すると、サイドバーの「完了」ボタンが有効になります。変更を保持するには、「完了」ボタンを使用します。
フィールドに無効な文字が入力されると、フィールドの境界線の色が赤に変わり、画面の左上隅にエラーメッセージが表示されます。例えば、数字が有効なテキストボックスにアルファベットを入力すると、入力ボックスの境界線の色が赤に変わります。このようなテーマは、上部に表示されるエラーを解決しないと保存できません。
テーマを作成する場合、テーマエディターに付属するフォームが同時に作成されます。このフォームのコンポーネントにスタイルを設定します。テーマエディターに付属のフォームの代わりに、フォームまたはインタラクティブな通信を選択して、スタイルを設定し、結果をプレビューすることができます。
テーマエディターのキャンバス上で現在のフォームまたはインタラクティブ通信を置き換えるには、以下の手順を実行します。
THEME EDITORパネルで、Theme Options/Configureをクリックします。
「一般」タブで、アダプティブフォーム/ドキュメントフィールドのフォームまたはインタラクティブな通信を参照して選択します。
意図しない変更を誤って行った場合は、その変更を元に戻すか、やり直すことができます。 キャンバスの「取り消し/やり直し」ボタンを使用します。
キャンバスの「取り消し/やり直し」ボタン
「取り消し/やり直し」ボタンは、テーマエディターでコンポーネントのスタイルを設定すると表示されます。
テーマエディターでは、作成またはアップロードしたテーマを編集することができます。Formsとドキュメント/テーマに移動し、テーマを選択して開きます。 テーマエディターでテーマが開きます。
上記で説明されているように、テーマエディターにはサイドバーとキャンバスの 2 つのパネルがあります。
テーマエディターのテキストボックスウィジェットの成功状態をカスタマイズします。キャンバスでコンポーネントを選択し、サイドバーで状態を選択します。サイドバーのスタイル設定を使用して、コンポーネントの外観をカスタマイズします。
すぐに使用できる付属のフォームを使用してテーマを作成することも、任意のフォームやインタラクティブ通信を使用してテーマを作成することもできます。キャンバスには、テーマのカスタマイズ内容とともに、テーマの作成時に使用したフォームまたはインタラクティブ通信のプレビューが表示されます。フォームの上部にあるルーラーは、デバイスのディスプレイのサイズに合わせてレイアウトを決定するために使用されます。
キャンバスツールバーには、以下が表示されます。
Toggle Side :サイドバーの表示/非表示を切り替えることができます。
Theme :3つのオプションを提供
エ :テーマの外観を様々な画面サイズでエミュレートします。表示サイズはエミュレーターでブレークポイントとして処理されます。ブレークポイントを選択してスタイル設定することができます。例えば、デスクトップとタブレットは 2 つのブレークポイントです。ブレークポイントごとに異なるスタイルを指定できます。
コンポーネントをキャンバスで選択すると、その上部にコンポーネントツールバーが表示されます。コンポーネントツールバーにより、コンポーネントの選択や汎用コンポーネントへの切り替えを行うことができます。例えば、パネルの数値テキストボックスを選択するとします。コンポーネントツールバーに以下のオプションが表示されます。
数値ボックスウィジェット:サイドバーで外観をカスタマイズするコンポーネントを選択できます。
フィールドウィジェット:スタイル設定の一般的なコンポーネントを選択できます。この例では、スタイル設定のために、すべてのテキスト入力コンポーネント(テキストボックス/数値ボックス/数値ステッパー/日付入力)が選択されています。
:スタイル設定の汎用コンポーネントに切り替えることができます。数値ボックスを選択してこのアイコンをタップすると、フィールドコンポーネントが選択されます。フィールドコンポーネントを選択してこのアイコンをタップすると、パネルが選択されます。このアイコンをタップし続けて選択すると、最終的にスタイル設定用のレイアウトが選択されます。
コンポーネントのツールバーで使用できるオプションは、選択したコンポーネントにより異なります。
キャンバスの数値ボックスのコンポーネントツールバー
テーマエディターのサイドバーには、セレクターを使用してコンポーネントのスタイルをカスタマイズするオプションがあります。セレクターにより、コンポーネントのグループまたは個別のコンポーネントを選択し、サイドバーのセレクターを検索することができます。カスタムコンポーネントではセレクターを書き込むことができます。
キャンバスまたはサイドバーのセレクターでコンポーネントを選択する場合、サイドバーにはスタイルをカスタマイズするためのすべてのオプションが表示されます。コンポーネントを選択すると、サイドバーに表示されるオプションを以下に示します。
状態は、コンポーネントに対するユーザーインタラクションの指標です。例えば、ユーザーがテキストボックスに誤ったデータを入力した場合、テキストボックスの状態はエラー状態に変わります。テーマエディターにより、特定の状態に対するスタイル設定を指定できます。
状態のスタイルのカスタマイズのオプションは、コンポーネントごとに異なります。
Property | 使用方法 |
寸法と位置 |
テーマのコンポーネントの整列、サイズ、位置、および場所のスタイルを設定します。 オプションは、ディスプレイ設定、余白、マージン、幅、高さおよび Z インデックスです。 レイアウトモードを使用すると、ドラッグ&ドロップが容易なインターフェイスを使用してコンポーネントの幅を定義することもできます。 詳しくは、レイアウトモードを使用してコンポーネントのサイズを変更するを参照してください。 |
テキスト |
テーマのコンポーネントでテキストのスタイルをカスタマイズします。 たとえば、テキストボックスに入力したテキストの見え方を変更するとします。 オプションには、フォントファミリー、太さ、色、サイズ、行の高さ、テキストの整列、文字間隔、テキストのインデント、下線、イタリック、テキストの変形、垂直方向の整列、ベースライン、方向があります。 |
背景 |
コンポーネントの背景を画像または色で塗りつぶします。 |
ボーダー |
コンポーネントの境界線の外観を選択します。例えば、テキストボックスに深い赤色で太い境界線を点線で入れるとします。 オプションは、幅、スタイル、半径、および境界線の色になります。 |
効果 |
コンポーネントに、不透明度、ブレンドモード、シャドウなど特殊効果を追加できます。 |
アドバンス |
以下を追加できます。
カスタムの CSS コードを追加すると、サイドバーのオプションを使用して追加したカスタマイズがオーバーライドされます。 |
「成功をシミュレート」/「エラーをシミュレート」オプションはサイドバーの下部にあります。サイドバーの下部にある表示/非表示の矢印を使用すると表示されます。テーマエディターを使用して、さまざまな状態のコンポーネントのスタイルを設定できます。
例えば、フォームに数値フィールドを追加して、テーマエディターでそのスタイル設定を指定できます。ユーザーがフィールドで英数字を入力するときに、テキストボックスの背景色を変更するとします。テーマで数値フィールドを選択して、サイドバーにある状態オプションを使用します。サイドバーでエラー状態を選択し、背景色を赤に変更します。サイドバーにある「エラーをシミュレート」オプションを使用して、動作をプレビューできます。「エラーをシミュレート」/「成功をシミュレート」オプションについて、以下で詳しく説明します。
成功をシミュレート: 成功状態のスタイル設定を指定した場合のコンポーネントの見え方を確認できます。たとえば、フォームで顧客がパスワードを設定します。ユーザーは、指定されたガイドラインに従いパスワードを設定します。指定されたすべてのガイドラインに従ってユーザーがパスワードを入力した場合、テキストボックスは緑色に変わります。テキストボックスが緑色に変わると、成功状態になります。成功状態のコンポーネントのスタイルを設定し、その外観を「成功をシミュレート」オプションでシミュレートすることができます。
エラーをシミュレート: エラー状態のスタイル設定を指定した場合のコンポーネントの見え方を確認できます。たとえば、フォームで顧客がパスワードを設定します。ユーザーは、指定されたガイドラインに従いパスワードを設定します。指定されたガイドラインに従わずにユーザーがパスワードを入力した場合、テキストボックスは赤色に変わります。テキストボックスが赤色に変わると、エラー状態になります。エラー状態のコンポーネントのスタイルを設定し、その外観を「エラーをシミュレート」オプションでシミュレートすることができます。
たとえば、フォームに 2 つのタイプのテキストボックスがあるとします。一方は数値のみ、もう一方は英数字の値を入力できます。数値のみを入力できるテキストボックスのスタイル設定をカスタマイズできます(数値ボックス)。
以下の手順を実行して特定コンポーネントのスタイル設定をカスタマイズできます(この例の数値ボックス)。
テーマエディターで、キャンバスの数値ボックスを選択します。
数値ボックスを選択すると、次の3つのオプションを持つコンポーネントツールバーが表示されます。
数値ボックスウィジェットを選択します。
サイドバーのタイトルが「数値ボックスウィジェット」に変わり、外観をカスタマイズするオプションが表示されます。サイドバーのDimensionと位置オプションを使用して、コンポーネントのサイズをカスタマイズします。 状態がデフォルトであることを確認します。
「数値ボックスウィジェット」を選択する代わりに、コンポーネントツールバーで「フィールドウィジェット」を選択し、上記の手順を実行します。 「フィールドウィジェット」オプションのサイズを選択すると、数値ボックスを除くすべてのテキストボックスは同じサイズになります。
コンポーネントツールバーでは、異なる状態のコンポーネントのスタイルを設定することもできます。たとえば、コンポーネントが無効になっている場合、無効状態になります。テーマエディタでスタイルを設定できるコンポーネントの状態としてよく使用されるのは、デフォルト、フォーカス、無効、エラー、成功およびホバーです。キャンバスでコンポーネントを選択して、サイドバーの状態オプションを使用し、外観をカスタマイズすることができます。
次の手順を実行して特定の状態のコンポーネントのスタイル設定をカスタマイズします。
状態を指定した後にコンポーネントのスタイル設定をカスタマイズする場合、カスタマイズは特定のコンポーネントにのみ現れます。たとえば、ホバー状態が選択されているときにコンポーネントのスタイル設定をカスタマイズするとします。この場合、テーマの適用先となるレンダリング後のフォームやインタラクティブ通信にポインターを置くと、コンポーネントのカスタマイズ内容が表示されます。
エラーと成功以外の状態の動作をシミュレートするには、プレビューモードを使用します。プレビューモードを使用するには、ページツールバーのプレビューをクリックします。
キャンバスのルーラーを使用して、画面が小さいデバイスのブレークポイントを選択します。キャンバスのエミュレーターをクリックして、表示ルーラーとブレークポイントを指定します。 ブレークポイントを使用すると、フォームやインタラクティブな通信を、スマートフォンやタブレットなどの異なるデバイスに関する画面サイズにプレビューできます。 テーマエディターでは、複数の表示サイズがサポートされています。
異なるブレークポイントにスタイルを設定するには、次の手順を実行します。
複数のデバイスで、フォームまたはインタラクティブ通信のコンポーネントのスタイルを設定することができます。デスクトップデバイスとモバイルデバイスでは、フォームコンポーネントとインタラクティブ通信コンポーネントのスタイルがまったく異なる場合があります。
これまでに行った手順により、Web サービスで使用できるフォントを、アダプティブフォームとインタラクティブ通信でも使用できるようになりました。AdobeのWebフォントサービス、Adobe Fontsは、設定としてすぐに使用できます。 Adobe Fontsを使用するには、キットを作成し、その中にフォントを追加し、Adobe FontsからキットIDを取得します。
AEMでAdobe Fontsを設定するには、次の手順を実行します。
オーサーインスタンスで、Adobe Experience Manager/ツール
/展開/Cloud Servicesをクリックします。
Cloud Servicesページで、Adobe Fontsオプションに移動して開きます。 configurationフォルダーを開き、「作成」をクリックします。
設定を作成ダイアログで、新しい設定のタイトルと名前を指定し、「作成」をクリックします。
設定ページにリダイレクトされます、
コンポーネントを編集ダイアログが表示されるので、キット ID を入力して「OK」をクリックします。
次の手順を実行して、Adobe Fontsの設定を使用するテーマを設定します。
オーサーインスタンスで、テーマエディターにあるテーマを開きます。
テーマエディターで、テーマのオプション > 設定に移動します。
「Adobe Fonts設定」フィールドでキットを選択し、「保存」をクリックします。
これで、テーマのフォントファミリーのプロパティにフォントが追加されたことが分かります。
テーマ設定サービスを使用して、テーマエディターにフォントを追加できます。次の手順を実行して、フォントを追加します。
管理者権限を使用して AEM Web コンソールにログインします。AEM WebコンソールのURLはhttps://'[server]:[port]'/system/console/configMgr
です。
アダプティブフォームテーマ設定サービスを開きます。
「+」をクリックし、フォントの名前を指定して「保存」をクリックします。フォントが追加され、テーマエディターで使用可能になります。
「+」ボタンを使用して、フォントを追加できます。フォントを追加すると、サイドバーに一覧表示されます。
テーマ設定オプション以外に、テーマエディター自体からもフォントを追加できます。サイドバーの下にある「フォントファミリー」フィールドに使用するフォントを入力し、キーボードの 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 には、すぐに使用できるデフォルトのキャンバステーマのほかに、様々なテーマが用意されています。別のテーマを使用してフォームやインタラクティブ通信を設計し、その設計内容を変更する場合は、テーマライブラリフォルダーからテーマをコピーします。コピーしたテーマを Theme Library フォルダーの外部に貼り付け、コピーしたテーマを必要な変更に応じて編集します。
テーマをコピーするには、以下の手順を実行します。
テーマのカスタマイズが完了したら、そのカスタマイズ内容をフォームまたはインタラクティブ通信に適用します。
Theme Library フォルダーにあるテーマに変更を加えないでください。このフォルダーにはシステムテーマが含まれています。これらのテーマに加えた変更は、AEM Forms の新しいバージョンまたはホットフィックスのインストール時にすべて上書きされます。
「CSS を表示」を選択すると、テーマエディターがすべてのスタイル設定情報を収集して CSS を構築します。情報は次の順序で収集されます。
例えば、基本クライアントライブラリのテキストボックスの背景色は青になります。サイドバーのプロパティを使用すると、ピンクに変更することができます。CSS を生成する際、テキストボックスの背景色はピンクになります。プロパティを使用して背景色を変更した後、別のユーザーは「CSS 上書き」オプションを使用してテキストボックスの背景色を白に変更できます。CSS を生成すると、生成された CSS の背景色が白になります。
テーマエディターでコンポーネントのスタイルを指定する場合、CSS が生成されます。汎用コンポーネントをスタイル設定する場合、これに含まれる複数のコンポーネントもスタイル設定されます。例えば、1 つのフィールドにスタイルを設定すると、そこに含まれるテキストボックスとラベルのスタイルも設定されます。フィールド内のテキストボックスのスタイルを設定すると、それの CSS が設定されます。フィールドとコンポーネント用に生成された CSS をデバッグする場合は、テーマエディターに CSS を表示するオプションがあります。
生成された CSS は次のオプションを使用して表示できます。
::before
および::after
擬似要素のCSSを含む、生成されたCSSを表示します。別のテーマのアセットの回避
テーマを編集する場合、他のテーマからアセット(画像など)を参照して追加できます。 例えば、ページの背景を編集しているとします。例えば、ページ背景追加画像を選択すると、他のテーマの画像を参照して追加するためのダイアログが表示されます。
アセットを別のテーマから追加し、そのテーマが移動または削除されると、現在のテーマに問題が生じる場合があります。他のテーマからアセットを参照して追加しないようにすることをお勧めします。
基本クライアントライブラリ、テーマエディター、インラインスタイル設定の使用
基本clientlib:
基本のクライアントライブラリにはスタイル情報が含まれています。 テーマ内のクライアント側ライブラリでスタイル設定情報を使用するには、次の手順を実行します。
クライアントライブラリで指定したスタイル設定が、それを使用するテーマにインポートされます。例えば、クライアントライブラリでテキストボックス、数値ボックス、切り替えのスタイル設定を指定するとします。クライアントライブラリをテーマにインポートすると、テキストボックス、数値ボックス、切り替えのスタイル設定がインポートされます。その後で、テーマエディターを使用して他のコンポーネントのスタイルを設定できます。また、テーマを作成し、そのコピーを作成した後、コピーしたテーマに表示されるスタイル設定を変更して、類似の用途に使用することもできます。
詳しくは、「テーマを使用して外観を設定する」を参照してください。
テーマエディター:
テーマエディターを使用すると、フォームのスタイルを設定したり、対話型の通信を行うテーマを作成できます。 1 つのテーマ内で各コンポーネントのスタイルを設定すると、作成する複数のフォームやインタラクティブ通信で、外観と操作性を統一することができます。テーマでスタイル情報を指定し、テーマをフォームに適用することをお勧めします。
インラインスタイル:
フォームを使用する場合は、フォームまたはインタラクティブ通信マルチチャネルエディターのスタイルモードを使用して、コンポーネントのスタイルを設定できます。 スタイルモードを使用してフォームコンポーネントのスタイル設定を変更すると、テーマで指定したスタイル設定は上書きされます。特定のフォームの特定のコンポーネントのスタイル設定を変更する方法については、「コンポーネントのインラインスタイル設定」を参照してください。
クライアント側ライブラリの使用
スタイル情報を読み込むためのクライアントライブラリを作成する場合は、クライアント側ライブラリの使用を参照してください。 クライアントライブラリを作成した後、上記の手順を使用して、テーマに読み込むことができます。
コンテナパネルのレイアウト幅の変更
コンテナパネルのレイアウト幅の変更はお勧めしません。 コンテナパネルの幅を指定すると、幅が静的になり、さまざまなディスプレイに合わせて調整されません。
ヘッダーとフッターを操作する際にフォームエディターまたはテーマエディターを使用する場合
テーマエディターは、フォントスタイル、背景、透明度などのスタイル設定オプションを使用してヘッダーとフッターのスタイルを設定する場合に使用します。
ロゴ画像、ヘッダーの会社名、フッターの著作権情報などの情報を提供する場合は、フォームエディターのオプションを使用します。