テーマの作成および使用

アダプティブフォームのスタイル設定にテーマを作成して適用できます。テーマには、コンポーネントとパネルのスタイルを設定するための詳細情報が含まれています。スタイルには、背景カラー、ステートカラー、透明度、配置、サイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。テーマは、アダプティブフォームを参照せずに、独立して管理されます。

ソフトウェア配布ポータルから AEM Forms リファレンスコンテンツパッケージをダウンロードしてインストールし、参照テーマとテンプレートを環境に読み込むことができます。

テーマの作成、ダウンロード、アップロード

テーマは、アダプティブフォームのようなメタプロパティを含む個別のエンティティとして作成、保存されます。複数のアダプティブフォームのテーマを再利用できます。テーマを別のインスタンスに移動して再利用することもできます。

テーマの作成

テーマを作成するには、次の手順を実行します。

1. Adobe Experience Manager／Forms／テーマ​の順にクリックします。

2. テーマページで、作成／テーマ​をクリックします。テーマを作成するためのウィザードが起動します。

3. テーマの​名前​を指定します。

4. テーマをプレビューするフォームを指定し、「このテーマのデフォルトのプレビュー」フィールドにテーマを指定します。テーマのプレビューにデフォルトのフォームを使用する場合は、「デフォルトを使用」をクリックします。

5. 設定コンテナ​を指定します。アカウントの Adobe Fonts の詳細設定を含む​設定コンテナ​を選択できます。このオプションを空白のままにして、テーマのプロパティから詳細を指定することもできます。

6. 作成／編集​の順にクリックして、テーマエディターでテーマを開きます。テーマページに戻る場合は、「完了」をクリックします。

Experience Manager 6.5 Forms のテーマと以前のバージョンのテーマの違い

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 インスタンスでそのテーマを使用することができます。テーマをダウンロードするには、以下の手順を実行します。

1. Adobe Experience Manager／Forms／テーマ​の順にクリックします。

2. テーマページで、 選択 テーマを選択し、 ダウンロード. テーマの詳細を示すダイアログボックスが表示されます。

3. 「ダウンロード」をクリックします。テーマが zip ファイルとしてダウンロードされます。

テーマのアップロード

管理者権限を持つユーザーは、Experience Manager Forms 6.5 以前のバージョンで作成されたテーマをアップロードできます。

テーマをアップロードするには、以下の手順を実行します。

1. Adobe Experience Manager／Forms／テーマ​の順にクリックします。

2. テーマページで、作成／ファイルのアップロード​をクリックします。

3. ファイルのアップロードプロンプトで、コンピューター上のテーマパッケージを参照して選択し、「アップロード」をクリックします。アップロードされたテーマは、テーマページで使用することができます。

テーマのメタデータ

以下の表に、テーマのメタプロパティを示します。これらのプロパティは、テーマのプロパティページに表示されます。

テーマエディターについて

テーマエディターは、ビジネスユーザーや Web デザイナー／開発者に使いやすいインターフェイスで、様々なアダプティブフォームの要素のスタイル設定に必要な機能を簡単に使用できます。テーマを作成すると、フォームのような独立したエンティティとして保存されます。

テーマエディターでは、テーマでスタイル設定されたコンポーネントのスタイルをカスタマイズできます。デバイス上でのフォームの外観をカスタマイズできます。

テーマエディターは次の 2 つのパネルに分けられます。

• キャンバス - 右側に表示されます。ここには、すべてのスタイル設定の変更が即時に反映されるアダプティブフォームのサンプルが表示されます。また、キャンバスから直接オブジェクトを選択して、関連するスタイルを検索したり、これらのスタイルを編集したりすることもできます。 上部のデバイス解像度ルーラーがキャンバスを制御します。 解像度のブレークポイントをルーラーから選択すると、その解像度でサンプルフォームのプレビューが表示されます。キャンバスについて詳しく説明します。 下.

• サイドバー — 左側に表示されます。 次の項目が含まれます。

  • セレクター：スタイル設定用に選択されたコンポーネントと、スタイルを設定するプロパティが表示されます。セレクターは、あるタイプのすべてのコンポーネントを表示します。1 つのテーマでテキストボックスを選択してスタイル設定する場合、フォーム内のすべてのテキストボックスがスタイルを継承します。セレクターを使用すると、汎用コンポーネントまたは特定のコンポーネントを選択してスタイルを設定できます。 例えば、フィールドコンポーネントは汎用コンポーネント、テキストボックスは特定コンポーネントになります。

    汎用コンポーネントのスタイル設定：
    フィールドは、年齢などの数値ボックスフィールド、または住所などのテキストボックスフィールドにできます。1 つのフィールドのスタイルを設定すると、年齢、名前、住所などすべてのフィールドのスタイルが設定されます。

    特定コンポーネントのスタイル設定：
    特定コンポーネントは、特定のカテゴリのオブジェクトに影響します。テーマ内で数値ボックスコンポーネントのスタイルを設定すると、フォームまたはインタラクティブ通信内の数値ボックスオブジェクトでのみ、そのスタイルが継承されます。

    例えば、住所などのテキストボックスは長く、年齢などの数値ボックスは短くなります。数値ボックスフィールドを選択して、長さを短くし、フォームに適用します。フォームにあるすべての数値ボックスフィールドの幅が短くなります。

    特定の背景色が設定されているすべてのフィールドコンポーネントをカスタマイズすると、年齢フィールド、名前フィールド、住所フィールドなど、すべてのフィールドでその背景色が継承されます。年齢などの数値ボックスを選択し、幅を短くすると、年齢や家族の人数など、すべての数値ボックスの幅が短くなります。テキストボックスの幅は変更されません。

  • 状態：​特定の状態にあるオブジェクトのスタイル設定をカスタマイズします。例えば、状態がデフォルト、フォーカス、無効、ホバー、エラーとなっている際のオブジェクトの外観を指定できます。

  • プロパティカテゴリ：​スタイル設定プロパティには、様々なカテゴリがあります。例えば、サイズと位置、テキスト、背景、境界線、効果などです。各カテゴリで、スタイル設定情報を指定します。例えば、背景では、背景色や画像とグラデーションを指定します。

  • 詳細：​カスタムの CSS を任意のオブジェクトに追加することができます。この CSS により、スタイル設定が重複している場合は、視覚的な制御を行うプロパティが上書きされます。

  • CSS を表示：​選択したコンポーネントの CSS が表示されます。

  また、サイドバーの下部に矢印が表示されます。矢印をクリックすると、「成功をシミュレート」と「エラーをシミュレート」という 2 つのオプションがさらに表示されます。​これらのオプションは、上記のオプションと合わせて、詳細が下記で説明されています。

A. サイドバー B. キャンバス

コンポーネントのスタイル設定

1 つのテーマを複数のアダプティブフォームに使用でき、テーマで指定したコンポーネントのフォーマット設定をインポートできます。タイトル、説明、パネル、フィールド、アイコン、テキストボックスなど、様々なコンポーネントのスタイルを設定できます。テーマ内でウィジェットを使用して、コンポーネントのプロパティを設定できます。CSS または LESS に関する事前の知識は必要ありませんが、必要です。ただし、CSS のオーバーライドセクションでは CSS コードの記述やカスタムセレクターの提供が可能です。 CSS オーバーライドセクションは、サイドバーでコンポーネントを選択すると表示されます。

サイドバーの各種オプションを使用して、様々なコンポーネントを選択してスタイルを設定できます。

サイドバーにあるコンポーネントの「編集」ボタンをクリックすることでキャンバスのコンポーネントが選択され、サイドバーのオプションを使用してコンポーネントのスタイルを設定できます。

テキストボックス、数値ボックス、ラジオボタン、チェックボックスのような特定のコンポーネントは、フィールドのような高レベルのコンポーネントで分類されます。例えば、ラジオボタンのスタイル設定をカスタマイズすることができます。スタイル設定のラジオボタンを設定するには、フィールド／ウィジェット／ラジオボタン を選択します。

パネルレイアウトのスタイル設定

AEM Forms のテーマは、フォームのパネルのレイアウトにある要素のスタイル設定をサポートしています。そのまま使用できるレイアウトやカスタムのレイアウト要素のスタイル設定がサポートされています。

既製のパネルには次のものが含まれています。

• 左側のタブ

• 上部のタブ

• アコーディオン

• レスポンシブ

• ウィザード

• モバイルレイアウト

  • ヘッダーのパネルタイトル
  • ヘッダーにパネルタイトルを表示しない

セレクターは、レイアウトごとに異なります。テーマエディターからのカスタムレイアウトのスタイル設定には、以下が含まれます。

• スタイル設定可能なレイアウトのコンポーネントの定義、およびこれらのコンポーネントを一意に認識する CSS セレクター。
• これらのコンポーネントに適用可能な CSS プロパティの定義。
• ユーザーインターフェイスからのインタラクティブなコンポーネントのスタイル設定の定義。

画面サイズごとに異なるスタイル

デスクトップとモバイルのレイアウトのスタイルは、若干異なる場合と、まったく異なる場合があります。 モバイルデバイスの場合、タブレットと電話は、コンポーネントのサイズを除く類似したレイアウトを共有します。

テーマエディターのブレークポイントを使用して、異なる画面サイズの代替スタイルを定義します。 テーマの構築を開始するベースデバイスまたは解像度を選択でき、その他の解像度のスタイル設定のバリエーションが自動的に生成されます。 すべての解像度のスタイル設定を明示的に変更できます。

選択したオブジェクトのサイドバーにおける、スタイル設定プロパティのコンテキストの変更

キャンバスでコンポーネントを選択すると、そのスタイル設定プロパティがサイドバーに表示されます。 オブジェクトのタイプと状態を選択し、スタイルを設定します。

テーマエディターで最近使用したスタイル

テーマエディターは、1 つのコンポーネントに適用される最大 10 個のスタイルをキャッシュします。キャッシュしたスタイルは、別のテーマのコンポーネントで使用できます。最近使用したスタイルは、リストボックスとしてサイドバーで選択したコンポーネントのすぐ下にあります。最初は、最近使用したスタイル一覧は空になっています。

コンポーネントのスタイルを設定すると、スタイルがキャッシュされ、リストボックスに表示されます。 この例では、テキストボックスのラベルのスタイルを設定して、フォントのサイズと色を変更します。 同様の手順に従って、画像を選択したり、色を変更してコンポーネントのスタイルを設定したりできます。 フィールドラベルのスタイル設定が変更された場合に、スタイルがキャッシュされ、リストボックスに表示される方法を確認します。

この例では、フィールドラベルのスタイルが変更され、スタイルとして「レスポンシブパネルの説明」を選択すると、アセットライブラリにリストエントリが追加されます。 アセットライブラリ内のエントリを使用して、レスポンシブパネルの説明のスタイルを変更できます。

スタイルをアセットライブラリに追加すると、他のテーマに使用できて、フォームエディター UI のスタイルモードで利用できます。同様に、フォームエディターのスタイルモードを使用してコンポーネントのスタイル設定を行うと、スタイルはキャッシュされ、テーマ内で使用可能になります。

アセットライブラリに対するプラスボタンを使用すると、指定した名前でスタイルを永久的に保存できます。 サイドバーの「保存」ボタンをクリックしてスタイルをコンポーネントに適用しない場合でも、プラスボタンはスタイルを保存します。 後で使用するためにスタイルを保存するプラスボタンは、スタイルモードでは使用できません。

スタイルにカスタム名を付けると、そのスタイルはテーマに結び付けられ、他のテーマでは使用できなくなります。 保存したスタイルを削除するには：

1. キャンバスツールバーで、テーマオプション ／スタイルを管理​をクリックします。

2. スタイルを管理ダイアログで、保存したスタイルを選択し、「削除」をクリックします。

   

ライブプレビュー、保存、変更の破棄

スタイル設定で行われた修正は、キャンバスに読み込まれたフォームに即時反映されます。ライブプレビューを使用すると、スタイル設定の影響をインタラクティブに定義して確認できます。 コンポーネントのスタイル設定を変更すると、 完了 ボタンがサイドバーで有効になっている。 変更を保持するには、 完了 」ボタンをクリックします。

テーマと別のアダプティブフォーム

テーマを作成すると、テーマエディターに付属するフォームが作成されます。 このフォームのコンポーネントのスタイル設定を行います。 テーマエディターに付属するフォームの代わりに、指定のフォームを選択して、スタイルを設定し結果を確認することができます。

テーマエディターのキャンバスで現在のフォームを置き換えるには、次の手順を実行します。

1. テーマエディターパネルで、テーマオプション ／設定​をクリックします。

2. 「一般」タブの「アダプティブフォーム」フィールドで、目的のフォームを参照して選択します。

やり直し／取り消し

意図しない変更を取り消すまたはやり直すことができます。キャンバスの「やり直し／取り消し」ボタンをクリックします。

「やり直し／取り消し」ボタンは、テーマエディターでコンポーネントのスタイルを設定すると表示されます。

テーマエディターの使用

テーマエディターでは、作成またはアップロードしたテーマを編集できます。フォームとドキュメント／テーマ​に移動し、テーマを選択して開きます。テーマエディターでテーマが開きます。

上記で説明されているように、テーマエディターにはサイドバーとキャンバスの 2 つのパネルがあります。

テーマエディターでのテキストボックスウィジェットコンポーネントの成功状態のスタイル設定のカスタマイズ。 キャンバスでコンポーネントが選択され、サイドバーでその状態が選択されます。 サイドバーで使用できるスタイル設定オプションを使用して、コンポーネントの外観をカスタマイズします。

キャンバスの使用

テーマは、そのまま使用できるフォームまたは選択したフォームのいずれかを使用して作成します。キャンバスは、テーマでカスタマイズの指定を行った、テーマの作成に使用されるフォームのプレビューを表示します。フォームの上のルーラーは、デバイスの表示サイズに応じてレイアウトを決定するために使用します。

キャンバスツールバーには、次の情報が表示されます。

• サイドパネルを切り替え ：サイドバーの表示と非表示を切り替えます。

• テーマオプション ：3 つのオプションを提供します。

  • 設定：フォームおよび Adobe Fonts 設定からプレビューを選択するオプションを提供します。
  • テーマ CSS を表示：選択したテーマの CSS が生成されます。
  • スタイルを管理：テキストと画像のスタイルを管理するためのオプションが用意されています。
  • ヘルプ：テーマエディターの画像によるガイドツアーを実行します。

• エミュレーター ：異なる画面サイズで、テーマの外観をエミュレートできます。表示サイズは、エミュレーターでブレークポイントとして扱われます。 ブレークポイントを選択し、そのスタイルを指定できます。 例えば、デスクトップとタブレットは 2 つのブレークポイントです。 ブレークポイントごとに異なるスタイルを指定できます。

キャンバスでコンポーネントを選択すると、その上にコンポーネントツールバーが表示されます。 コンポーネントツールバーを使用すると、コンポーネントを選択したり、汎用コンポーネントに切り替えたりできます。 例えば、パネル内の数値テキストボックスを選択したとします。 コンポーネントツールバーには次のオプションが表示されます。

• 数値ボックスウィジェット:サイドバーで外観をカスタマイズするコンポーネントを選択できます。

• フィールドウィジェット:スタイル設定の汎用コンポーネントを選択できます。 この例では、スタイル設定にすべてのテキスト入力コンポーネント（テキストボックス／数値ボックス／数値ステッパー／日付入力）が選択されています。

• ：親コンポーネントを選択してスタイル設定できます。数値ボックスを選択してこのアイコンをタップすると、フィールドコンポーネントが選択されます。 フィールドコンポーネントを選択してこのアイコンをタップすると、パネルが選択されます。 このアイコンをタップし続けると、最終的にスタイル設定用のレイアウトが選択されます。

サイドバーの使用

テーマエディターのサイドバーには、テーマ内のコンポーネントのスタイルをカスタマイズするオプションが用意されており、セレクターを使用します。 セレクターにより、コンポーネントのグループまたは個別のコンポーネントを選択し、サイドバーのセレクターを検索できます。カスタムコンポーネント用のセレクターを書き込むことができます。

キャンバスまたはサイドバーのセレクターでコンポーネントを選択する場合、サイドバーにはスタイルをカスタマイズするためのすべてのオプションが表示されます。コンポーネント選択時、サイドバーに表示されるオプションは次のとおりです。

• 状態
• プロパティシート
• 成功／エラーをシミュレート

状態

状態は、コンポーネントに対するユーザーインタラクションの指標です。例えば、ユーザーがテキストボックスに誤ったデータを入力した場合、テキストボックスの状態はエラー状態に変わります。テーマエディターにより、特定の状態に対するスタイル設定を指定できます。

状態のスタイルのカスタマイズのオプションは、コンポーネントごとに異なります。

プロパティシート

成功／エラーをシミュレート

サイドバーの下部には、「エラーをシミュレート」と「成功」のオプションがあります。 サイドバーの下部に表示される表示/非表示の矢印を使用して、表示できます。 テーマエディターを使用して、様々な状態のコンポーネントのスタイルを設定できます。

例えば、フォームに数値フィールドを追加し、テーマエディターでそのスタイルを指定したとします。 ユーザーがフィールドに英数字の値を入力するとき、テキストボックスの背景色を変更します。 テーマ内の数値フィールドを選択し、サイドバーの状態オプションを使用します。 サイドバーでエラー状態を選択し、背景色を赤に変更します。 動作をプレビューするには、サイドバーにある「エラーをシミュレート」オプションを使用します。 「エラーをシミュレート」および「成功をシミュレート」オプションについて、以下で詳しく説明します。

• 成功をシミュレート：
  成功状態のスタイル設定を指定した場合のコンポーネントの見え方を確認できます。例えば、フォームで顧客がパスワードを設定します。ユーザーは、指定したガイドラインに従ってパスワードを設定できます。 指定したすべてのガイドラインに従ってユーザーがパスワードを入力すると、テキストボックスが緑色に変わります。 テキストボックスが緑色に変わると、成功状態になります。 成功状態のコンポーネントのスタイルを指定し、「成功をシミュレート」オプションを使用してその外観をシミュレートできます。

• エラーをシミュレート：
  エラー状態のスタイル設定を指定した場合のコンポーネントの見え方を確認できます。例えば、フォームで顧客がパスワードを設定します。ユーザーは、指定したガイドラインに従ってパスワードを設定できます。 ユーザーが入力したすべてのガイドラインに従っていないパスワードを入力すると、テキストボックスが赤に変わります。 テキストボックスが赤に変わると、エラー状態になります。 エラー状態のコンポーネントのスタイルを指定し、「エラーをシミュレート」オプションを使用してその外観をシミュレートできます。

コンポーネントのスタイル設定

例えば、フォームに 2 つのタイプのテキストボックスがあるとします。一方は数値のみ、もう一方は英数字の値を入力できます。数値のみを受け入れるテキストボックス（数値ボックス）のスタイル設定をカスタマイズできます。

特定のコンポーネント（この例では数値ボックス）のスタイル設定をカスタマイズするには、次の手順を実行します。

1. テーマエディターで、キャンバスの数値ボックスを選択します。

2. 数値ボックスを選択すると、オプションが 3 つあるコンポーネントツールバーが表示されます。

   • 数値ボックスウィジェット
   • フィールドウィジェット

3. 数値ボックスウィジェット を選択します。

4. サイドバーのタイトルが「数値ボックスウィジェット」に変わり、外観をカスタマイズするオプションが表示されます。サイドバーの「寸法と位置」オプションを使用して、コンポーネントのサイズをカスタマイズします。状態が​デフォルト​であることを確認してください。

数値ボックスウィジェット​を選択する代わりに、コンポーネントツールバーの​フィールドウィジェット​を選択し、上記の手順を実行します。「フィールドウィジェット」オプションでサイズを選択すると、数値ボックスを除くすべてのテキストボックスが同じサイズになります。

特定の状態のフィールドのスタイル設定

コンポーネントツールバーを使用して、異なる状態のコンポーネントのスタイルを指定することもできます。 例えば、コンポーネントが無効になっている場合、無効状態になります。テーマエディターでスタイルを設定できるコンポーネントの状態としてよく使用されるのは、デフォルト、フォーカス、無効、エラー、成功およびホバーです。キャンバスでコンポーネントを選択して、サイドバーの状態オプションを使用し、外観をカスタマイズできます。

特定の状態のコンポーネントのスタイル設定をカスタマイズするには、次の手順を実行します。

1. キャンバスでコンポーネントを選択し、コンポーネントツールバーから適切なオプションを選択します。サイドバーに、コンポーネントのスタイル設定をカスタマイズするためのオプションが表示されます。
2. サイドバーで状態を選択します。 例えば、エラー状態です。
3. サイドバーの​「境界線」、「背景」​などのオプションを使用して、コンポーネントの外観をカスタマイズします。
4. サイドバーの下部にある「エラーをシミュレート」オプションを使用して、編集時にスタイル設定がどのように見えるかを確認します。

状態を指定した後にコンポーネントのスタイル設定をカスタマイズすると、カスタマイズは指定した状態に対してのみコンポーネントに表示されます。 例えば、ホバー状態が選択されているときにコンポーネントのスタイル設定をカスタマイズするとします。このカスタマイズは、テーマを適用するレンダリングされたフォームのコンポーネント上にポインターを移動すると、コンポーネントに現れます。

エラーと成功以外の状態の動作をシミュレートするには、プレビューモードを使用します。プレビューモードを使用するには、ページツールバーにある「プレビュー」をクリックします。

小型画面向けレイアウトのスタイル設定

キャンバスのルーラーを使用して、画面が小さいデバイスのブレークポイントを選択します。キャンバスのエミュレーター をクリックして、ルーラーとブレークポイントを表示します。ブレークポイントでは、電話やタブレットなど様々なデバイスに関する、画面のサイズのフォームをプレビューできます。テーマエディターでは、複数の画面サイズがサポートされています。

異なるブレークポイントにスタイルを設定するには、次の手順を実行します。

1. キャンバスで、ルーラーの上にあるブレークポイントを選択します。ブレークポイントとは、モバイルデバイスおよびその画面サイズのことです。
2. サイドバーを使用して、選択した画面サイズのテーマのフォームコンポーネントのスタイル設定をカスタマイズします。
3. カスタマイズ内容を保存します。

複数のデバイスでフォームのコンポーネントのスタイルを設定することができます。デスクトップおよびモバイルデバイスのフォームコンポーネントは、全面的に異なるスタイルになります。

テーマで web フォントを使用

Web サービスで利用可能なフォントをアダプティブフォームで使用できるようになりました。Adobe の Web フォントサービスである Adobe Fonts は、設定サービスとしてすぐに使用できます。Adobe Fonts を使用するには、キットを作成し、その中にフォントを追加し、Adobe Fonts からキット ID を取得します。

Experience Manager で Adobe Fonts を設定するには、次の手順を実行します。

1. オーサーインスタンスで、​ をクリックし、Adobe Experience Manager ​／​ツール​ ／​デプロイメント​／​ Cloud Services ​ をクリックします。

2. Cloud Services ページで、「Adobe Fonts」オプションに移動して開きます。設定フォルダーを開き、「作成」をクリックします。

3. 設定を作成​ダイアログで、新しい設定のタイトルと名前を指定し、「作成」をクリックします。

   設定ページにリダイレクトされます。

4. コンポーネントを編集ダイアログが表示されるので、キット ID を入力して「OK」をクリックします。

テーマを Adobe Fonts 設定を使用するように設定するには、次の手順を実行します。

1. オーサーインスタンスで、テーマエディターにあるテーマを開きます。

2. テーマエディターで、テーマオプション ／設定​に移動します。

3. 「Adobe Fonts 設定」フィールドで、キットを選択して「保存」をクリックします。

   これで、テーマのフォントファミリーのプロパティにフォントが追加されたことが分かります。

テーマエディターでのフォントの選択

「+」ボタンを使用して、フォントを追加できます。 フォントを追加すると、サイドバーに表示されます。

テーマの設定オプションに加えて、テーマエディター自体からフォントを追加することもできます。 サイドバーの下にある「フォントファミリー」フィールドに使用するフォントを入力し、キーボードの Return キーを押します。

フォントを選択すると、そのフォントがフォントファミリリストに追加されます。 テーマエディターの「マスク」オプションを使用して、リストに表示されているフォントを無効または有効にすることができます。

コンポーネントのフォントが変更されたことを確認できます。

「フォントファミリー」フィールドは、複数のフォントをサポートしています。 フォントを入力すると、ブラウザーはフォントを探し、選択したコンポーネントに適用します。 ブラウザがフォントを見つけられない場合は、ファミリ内でフォントの隣にあるフォントを探します。 検索する特定のフォントを入力することから始めることができます。 使用するフォントが見つからない場合は、フォントファミリーに一般的なフォントを入力して使用できます。

テーマエディター内で適用されているスタイルをマスク

テーマ内で適用されているスタイルをマスクできるようになりました。テーマエディターのサイドバーに表示されている アイコンを使用して、適用されているスタイルを無効にできます。例えば、フォーム内のコンポーネントのサイズを変更した場合、プロパティの左側に表示されているマスクボタンを使用して、そのプロパティを無効にすることができます。テーマを保存すると、選択した「マスク」オプションが保持されます。

以下の例では、テーマ内でマスクされたスタイルとマスクされていないスタイルを示しています。

テーマのフォームへの適用

テーマをアダプティブフォームに適用するには、次の手順を実行します。

1. フォームを編集モードで開きます。フォームを編集モードで開くには、フォームを選択し、 開く.

2. 編集モードで、コンポーネントを選択し、／アダプティブフォームコンテナ​をクリックしてから、 をクリックします。

   サイドバーのフォームのプロパティを編集できます。

3. サイドバーで、「スタイル設定」をクリックします。

4. 「アダプティブフォームのテーマ」ドロップダウンリストからテーマを選択し、完了 をクリックします。

アダプティブフォームの作成時に、アダプティブフォームのテーマを定義することもできます。

実行時にフォームのテーマを変更

テーマにより、フォーム内の異なるコンポーネントのスタイルが設定されます。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 には、すぐに使用できるデフォルトのキャンバステーマ以外に、様々なテーマが用意されています。他のテーマを使用してフォームをデザインする場合は、変更を追加するとともに、テーマライブラリフォルダーからテーマをコピーします。コピーしたテーマをテーマライブラリフォルダーの外部に貼り付け、コピーしたテーマを必要な変更に応じて編集します。

テーマをコピーするには、次の手順に従います。

1. オーサーインスタンスで、Adobe Experience Manager／Forms／テーマ​に移動します。
2. テーマライブラリフォルダーを開きます。
3. テーマライブラリフォルダーで、対応するすぐに使用可能なテーマにポインターを置いて、「コピー」をタップします。
4. コピーしたテーマをテーマライブラリフォルダーの外部に貼り付けます。
5. コピーしたテーマをカスタマイズします。

テーマをカスタマイズした後、これをフォームに適用します。

他のアダプティブフォームの使用例への影響

• フォームの公開／非公開：​フォームの公開時に、適用するテーマも公開します（まだ公開していない場合）
• フォームのインポート／エクスポート：​フォームのインポートまたはエクスポートでは、関連するテーマも自動でインポートまたはエクスポートされます。
• フォームの参照：​フォームの参照の「参照」セクションには、テーマの追加入力が含まれます。
• フォームの最終変更時間：​関連するテーマが変更されると更新されます。

CSS 生成シーケンス

「CSS を表示」を選択すると、テーマエディターはすべてのスタイル設定情報を収集し、CSS を構築します。 情報は次の順序で収集されます。

1. サイドバーのプロパティを使用して指定したユーザー定義のスタイル設定。
2. 「CSS 上書き」オプションを使用して指定された CSS スタイル。

例えば、テキストボックスの背景色は、ブルーです。サイドバーのプロパティを使用して、ピンクに変更します。 CSS を生成すると、テキストボックスの背景色がピンク色で表示されます。 プロパティを使用して背景色を変更した後、別の作成者が CSS 上書きオプションを使用して背景色テキストボックスを白に変更します。 CSS を生成すると、生成された CSS の背景色が白になります。

スタイルのデバッグ

テーマエディターでコンポーネントのスタイルを指定すると、CSS が生成されます。 汎用コンポーネントのスタイルを設定する場合、そのコンポーネントに含まれる複数のコンポーネントもスタイル設定されます。 例えば、1 つのフィールドにスタイルを設定すると、そこに含まれるテキストボックスとラベルのスタイルも設定されます。フィールド内のテキストボックスのスタイルを設定すると、その CSS が設定されます。フィールドとコンポーネント用に生成された CSS をデバッグする場合は、テーマエディターに CSS を表示するオプションがあります。

生成された CSS は、次のオプションを使用して確認できます。

• CSS を表示 サイドバーのオプション：テーマでコンポーネントを選択すると、サイドバーに「 CSS を表示」オプションが表示されます。 ::before、::after 疑似要素を含め、生成された CSS を表示します。
• キャンバスツールバーの「テーマ CSS を表示」オプション：キャンバスツールバーで、／テーマ CSS を表示​をクリックします。テーマエディターで定義したプロパティから生成されたテーマ CSS 全体を表示できます。

トラブルシューティング、推奨事項、ベストプラクティス

• 別のテーマに属するアセットの回避

  テーマを編集する際、アセット（画像など）を他のテーマから参照して追加することができます。例えば、ページの背景を編集しているとします。例えば、ページ ／背景／追加／画像​を選択すると、他のテーマの画像を参照して追加することが可能なダイアログが表示されます。

• アセットを別のテーマから追加し、そのテーマが移動または削除されると、現在のテーマに問題が生じる場合があります。他のテーマからアセットを参照して追加しないようにすることをお勧めします。

  テーマを作成して、それをコピーし、コピーしたテーマのスタイル設定を変更して同じような用途に使用することもできます。
  詳しくは、「テーマを使用した外観の設定」を参照してください (#specific-af-appearance)

  • テーマエディター：

  テーマエディターを使用すると、フォームのスタイルを設定するテーマを作成できます<!-- またはインタラクティブ通信 -->。1 つのテーマ内で各コンポーネントのスタイルを設定すると、作成する複数のフォーム<!-- やインタラクティブ通信 -->で、外観と操作性を統一することができます。まずテーマのスタイル設定情報を指定し、その後でテーマをフォームに適用することをお勧めします。

  • インラインスタイル設定：

  フォームで作業を行う際に、スタイルモードになっているフォーム<！–またはインタラクティブ通信–>のマルチチャネルエディターを使用して、コンポーネントのスタイルを設定できます。スタイルモードを使用してフォームコンポーネントのスタイル設定を変更すると、テーマで指定したスタイル設定は上書きされます。特定のフォームの特定のコンポーネントのスタイル設定を変更する方法については、「コンポーネントのインラインスタイル設定 (/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)
  」を参照してください。

• コンテナパネルのレイアウト幅の変更

  コンテナパネルのレイアウト幅の変更はお勧めしません。コンテナパネルの幅を指定すると、幅が静的になり、様々なディスプレイに合わせて調整されません。

• ヘッダーとフッターを操作する際にフォームエディターまたはテーマエディターを使用する場合

  テーマエディターは、フォントスタイル、背景、透明度などのスタイル設定オプションを使用してヘッダーとフッターのスタイルを設定する場合に使用します。
  ヘッダーにロゴイメージや企業名などの情報を表示し、フッターに著作権情報を表示する場合は、フォームエディターのオプションを使用します。

Business.Adobe.com リソース