テーマを作成して使用する

Adobe Experience Manager Forms では、テーマを作成してアダプティブフォームに適用できます。テーマにはコンポーネントやパネルのスタイル設定の詳細が含まれ、さまざまなフォームにテーマを再利用できます。スタイルには、背景色、状態色、透明度、配置、およびサイズなどのプロパティが含まれます。テーマをフォームに適用すると、指定されたスタイルがフォームの対応コンポーネントに反映されます。

テーマの管理は、アダプティブフォームの他のアセットの管理とインラインで管理されます。テーマは、単独（アダプティブフォームの参照なし）で管理することのできるアセットです。 

フォームマネージャーを使用して、以下を行います。

• テーマの作成
• 既存のテーマの編集／コピー（メタデータの編集／テーマの定義）
• 既存のテーマのダウンロード／アップロード
• テーマの依存関係の管理

AEM Forms には、テーマと関連するフォームテンプレートが付属します。顧客はこれらのテーマをそのまま使用することができます。顧客が使用できるのは、フォームテンプレートに対応する調査テーマ、シンプルな登録テーマ、高度な登録テーマ、およびキャンバステーマです。これらを使用してフォームのコンポーネントのスタイルを設定し、フォームの外観をカスタマイズすることができます。そのまま使用できるテーマを編集することはできません。他のテーマを入手する方法について詳しくは、リファレンステーマを参照してください。

AEM Forms では、テーマを作成、ダウンロード、アップロードすることができます。テーマは、フォーム、ドキュメント、レターなど他のアセットと同様に作成することができます。テーマは、フォームのように独立したエンティティとして、メタプロパティとあわせて完結して保存することができます。テーマを独立したエンティティとして保存することで、再利用が可能になります。テーマを作成、ダウンロードし、別のインスタンスにアップロードして再利用することができます。 

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

1. Experience Manager で「フォーム」をクリックしてから「テーマ」をクリックします。
2. テーマページで、作成／テーマをクリックします。
   テーマを作成するためのウィザードが起動します。
3. テーマを作成ウィザードのプロパティの追加セクションの「基本」タブで、テーマのタイトルと名前を指定します。テーマを作成するには、「タイトル」と「名前」のフィールドの入力が必要です。
4. 「詳細」タブには、2 つのフィールドがあります。
   • Clientlib の場所：新しいテーマに対応する clientlib を保存するリポジトリの位置を選択するための参照パスです。
   • Clientlib カテゴリ：テーマに任意の clientlib カテゴリ名を入力するためのテキストフィールドです。
5. 「作成」をクリックし、次に「開く」をクリックしてテーマエディタを開く、または「完了」をクリックしてテーマページに戻ります。

他のプロジェクトやインスタンスで使用する AEM Forms のテーマをエクスポートできます。AEM では、テーマを zip ファイルとしてダウンロードし、それをインスタンスにアップロードすることができます。 

テーマをダウンロードするには、次の手順を実行します。

1. Experience Manager で、フォーム／テーマに移動します。
2. テーマページで、「選択」オプションでテーマを選択します。
3. 「ダウンロード」をクリックします。
   テーマは、共有が可能な圧縮パッケージとしてダウンロードされます。

プロジェクトにスタイル設定がプリセットされた作成済みのテーマを使用することができます。他の人が作成したテーマのパッケージをプロジェクトにアップロードしてインポートすることができます。 

テーマをアップロードするには、次の手順を行います。

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

AEM Forms におけるアセットの読み込みと書き出しを参照してください。

テーマのメタプロパティのリスト（テーマのプロパティページにあります）。

AEM Forms にはテーマエディターが付属します。これにより、ビジネスユーザーやウェブデザイナー／開発者に使いやすいインターフェイスで、さまざまなアダプティブフォームの要素のスタイル設定に必要な機能を簡単に使用することができます。テーマを作成すると、フォーム、ドキュメント、レター、ドキュメントフラグメント、データディクショナリーのような独立したエンティティとして保存されます。

Experience Manager／フォームとドキュメント／テーマに移動すると、使用できるすべてのテーマがオーサリングモードで表示されます。テーマを選択して開くと、テーマエディターで開きます。

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

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

• キャンバス - 右側に表示されます。ここには、すべてのスタイル設定の変更が即時に反映されるアダプティブフォームのサンプルが表示されます。また、キャンバスから直接オブジェクトを選択して、関連するスタイルを検索し、そのスタイルを編集することができます。上部にあるデバイスの解像度のルーラーにより、キャンバスが制御されます。解像度のブレイクポイントをルーラーから選択することで、その解像度でサンプルフォームのプレビューが表示されます。キャンバスについては、下記で説明されています。
• サイドバー - 左側に表示されます。以下のアイテムがあります。
  • セレクター：スタイル設定で選択されたコンポーネントと、スタイル設定可能なプロパティを表示します。セレクターは、あるタイプのすべてのコンポーネントを表示します。1 つのテーマでテキストボックスを選択してスタイル設定する場合、フォーム内のすべてのテキストボックスがスタイルを継承します。
    セレクターにより、汎用コンポーネントまたは特定コンポーネントのスタイル設定が可能になります。例えば、フィールドコンポーネントは汎用コンポーネント、テキストボックスは特定コンポーネントになります。 
    
    汎用コンポーネントのスタイル設定：
    フィールドは、年齢などの数値ボックスフィールド、または住所などのテキストボックスフィールドにすることができます。
    1 つのフィールドのスタイルを設定すると、年齢、名前、住所などすべてのフィールドのスタイルが設定されます。 
    
    特定コンポーネントのスタイル設定：
    特定コンポーネントは、特定のカテゴリのオブジェクトに影響します。テーマで数値ボックスコンポーネントをスタイル設定する場合、フォーム内の数値ボックスオブジェクトのみがスタイルを継承します。
    
    例えば、住所などのテキストボックスは長く、年齢などの数値ボックスは短くなります。数値ボックスフィールドを選択して、長さを短くし、フォームに適用します。フォームにあるすべての数値ボックスフィールドの幅が短くなります。 
    
    フォームで、すべてのフィールドコンポーネントを特定の背景色でカスタマイズする場合、年齢、名前、住所などのすべてのフィールドが背景色を継承します。年齢などの数値ボックスを選択し、幅を短くすると、年齢や家族の人数など、すべての数値ボックスの幅が短くなります。テキストボックスの幅は変更されません。 
    
    
  • 状態：特定の状態のオブジェクトのスタイル設定をカスタマイズします。例えば、デフォルト、フォーカス、無効、ホバー、エラーの状態におけるオブジェクトの見え方を指定することができます。
  • プロパティカテゴリ：スタイル設定プロパティはさまざまなカテゴリに分けられています。たとえば、サイズと位置、テキスト、背景、境界線、効果などです。各カテゴリで、スタイル設定情報を指定します。たとえば、背景では、背景色や画像とグラデーションを指定します。
  • 詳細：カスタムの CSS をオブジェクトに追加し、重複があった場合に視覚制御の定義のプロパティをオーバーライドします。
  • CSS を表示：選択したコンポーネントの CSS を表示します。

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

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

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

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

サイドバーの「すべてを展開」をクリックして、前面に表示されていない分類化されたコンポーネントを表示、選択、ならびにスタイル設定をします。

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

そのまま使用できるパネルには以下が含まれています。

• 左側のタブ
• 上部のタブ
• アコーディオン
• レスポンシブ
• ウィザード
• モバイルレイアウト
  • ヘッダーのパネルタイトル
  • ヘッダーのパネルタイトルなし

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

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

デスクトップおよびモバイルのレイアウトは、わずかにまたは全面的に異なるスタイルになります。モバイルデバイスでは、タブレットと電話はコンポーネントのサイズを除き同様のレイアウトを共有します。

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

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

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

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

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

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

アセットライブラリでプラスボタン（+）を使用すれば、スタイルに名前を付けて永続的に保存できます。プラスボタン（+）を使用すれば、サイドバーにある「保存」ボタンをクリックしなくても、スタイルを保存してコンポーネントにスタイルを適用できます。スタイルモードでは、今後使用するためにプラスボタン（+）でスタイルを保存することはできません。 

スタイルにカスタム名を付けると、スタイルはテーマに関連付けられて、他のテーマには使用できなくなります。保存したスタイルを削除するには、次の手順を実行します。

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

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

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

1. テーマエディターパネルで、テーマオプション／設定をクリックします。
2. 設定を編集ダイアログで、「参照」をクリックします。
3. パスを選択画面で、フォームを選択して「確認」をクリックします 。

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

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

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

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

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

キャンバスツールバーには、以下が表示されます。

• サイドパネルを切り替え ：サイドバーの表示と非表示を切り替えます。
• テーマオプション ：3 つのオプションを提供します。
  • 設定：プレビューフォームとベース clientlib を選択できるようにします。
  • テーマ CSS を表示：選択したテーマ対して、テーマエディターで生成した CSS を表示できるようにします。
  • ヘルプ：テーマエディターの画像によるガイドツアーを実行します。 
• エミュレーター ：テーマをさまざまな表示サイズでエミュレートおよび指定できるようにします。表示サイズはエミュレーターでブレークポイントとして処理されます。ブレークポイントを選択してスタイル設定することができます。例えば、デスクトップとタブレットは 2 つのブレークポイントです。ブレークポイントごとに異なるスタイルを指定できます。

コンポーネントをキャンバスで選択すると、その上部にコンポーネントツールバーが表示されます。コンポーネントツールバーにより、コンポーネントの選択や汎用コンポーネントへの切り替えを行うことができます。例えば、パネルの数値テキストボックスを選択するとします。コンポーネントツールバーに以下のオプションが表示されます。

• 数値ボックスウィジェット：サイドバーで外観をカスタマイズするコンポーネントを選択できます。
• フィールドウィジェット：スタイル設定の一般的なコンポーネントを選択できます。この例では、スタイル設定にすべてのテキスト入力コンポーネント（テキストボックス／数値ボックス／数値ステッパー／日付入力）が選択されています。
  
• ：スタイル設定のため、汎用コンポーネントへ切り替えます。数値ボックスを選択してこのアイコンをタップすると、フィールドコンポーネントが選択されます。フィールドコンポーネントを選択してこのアイコンをタップすると、パネルが選択されます。このアイコンをタップし続けて選択すると、フォームのレイアウトが選択されてスタイルの設定ができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次の手順を実行して、AEM で Typekit を設定します。

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

テーマ設定サービスを使用して、テーマエディターにフォントを追加できます。次の手順を実行して、フォントを追加します。

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

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

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

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

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

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

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

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

1. 編集モードでフォームを開きます。
   フォームを編集モードで開くには、フォームを選択して「開く」をクリックします。
2. 編集モードで、コンポーネントを選択し、 ／ アダプティブフォームコンテナをクリックしてから をクリックします。
   サイドバーのフォームのプロパティを編集することができます。
3. サイドバーで、「スタイル設定」をクリックします。
4. テーマをアダプティブフォームのテーマドロップダウンリストから選択し、「完了」をクリックします 。

テーマにより、フォーム内の異なるコンポーネントのスタイルが設定されます。themeOverride プロパティを使用して、フォームのテーマを動的に変更することができます。フォームの一般的な URL は次のとおりです。

http://<server>:<port>/content/forms/af/test.html

themeOverride パラメーターを使用して、実行時にテーマを適用できます。

http://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

「themeOverride」オプションを使用して、テーマにパスを提供できます。これにより、フォームのテーマを変更し、更新されたスタイルを使用してフォームをリフレッシュします。

AEM Forms では、すぐに使用できるデフォルトのキャンバステーマに加えて、シンプルな登録テーマ、高度な登録テーマ、調査テーマなどのテーマを使用できます。他のテーマを使用してフォームをデザインする場合は、変更を追加するとともに、テーマライブラリフォルダーからテーマをコピーします。コピーしたテーマを Theme Library フォルダーの外部に貼り付け、コピーしたテーマを必要な変更に応じて編集します。

テーマをコピーするには、以下の手順を実行します。

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

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

• フォームの発行／非公開：フォームの発行時に、適用するテーマも発行します（まだ発行していない場合）
• フォームのインポート／エクスポート：フォームのインポートまたはエクスポートでは、関連するテーマも自動でインポートまたはエクスポートされます。
• フォームの参照：フォームの参照の「参照」セクションには、テーマの追加入力が含まれます。
• フォームの最終変更時間：関連するテーマが変更されると更新されます。
• A/B テスト：A/B テストのフォームの 2 つのバージョンに異なるテーマを適用できます。2 つのテーマの情報は、2 つのガイドコンテナに個別に保存されます。

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

1. テーマの基本クライアントライブラリで定義したスタイル設定。
2. サイドバーのプロパティを使用して指定したユーザー定義のスタイル設定。
3. 「CSS 上書き」オプションを使用して指定された CSS スタイル。 

例えば、基本クライアントライブラリのテキストボックスの背景色は青になります。サイドバーのプロパティを使用すると、ピンクに変更することができます。CSS を生成する際、テキストボックスの背景色はピンクになります。プロパティを使用して背景色を変更した後、別のユーザーは「CSS 上書き」オプションを使用してテキストボックスの背景色を白に変更できます。CSS を生成すると、生成された CSS の背景色が白になります。  

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

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

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

• 別のテーマに属するアセットの回避
  テーマを編集する際、アセット（画像など）を他のテーマから参照して追加することができます。例えば、ページの背景を編集しているとします。例えば、ページ／背景／追加／画像を選択すると、他のテーマの画像を参照して追加することが可能なダイアログが表示されます。 
• アセットを別のテーマから追加し、そのテーマが移動または削除されると、現在のテーマに問題が生じる場合があります。他のテーマからアセットを参照して追加しないようにすることをお勧めします。
  
• 基本クライアントライブラリ、テーマエディター、インラインスタイル設定の使用
  • 基本クライアントライブラリ：
    基本クライアントライブラリにはスタイル設定情報が含まれています。テーマ内のクライアント側ライブラリでスタイル設定情報を使用するには、次の手順を実行します。
    1. Experience Manager／フォーム／テーマに移動します。
    2. テーマページで、テーマを選択し、「プロパティの表示」をクリックします。
    3. プロパティページが開くので、「詳細」をクリックします。
    4. 「詳細」タブの「Clientlib の場所」フィールドで、使用するクライアントライブラリを参照して選択します。 
    5. 「保存」をクリックします。
    クライアントライブラリで指定したスタイル設定が、それを使用するテーマにインポートされます。例えば、クライアントライブラリでテキストボックス、数値ボックス、切り替えのスタイル設定を指定するとします。クライアントライブラリをテーマにインポートすると、テキストボックス、数値ボックス、切り替えのスタイル設定がインポートされます。その後で、テーマエディターを使用して他のコンポーネントのスタイルを設定できます。 
    テーマを作成して、それをコピーし、コピーしたテーマのスタイル設定を変更して同じような用途に使用することもできます。
    詳しくは、テーマを使用した特定のアダプティブフォーム外観の取得を参照してください。
  • テーマエディター：
    テーマエディターでは、フォームのスタイルを設定するテーマを作成できます。テーマでコンポーネントのスタイル設定を指定して、開発中の複数のフォームの外観と操作性を統一できます。まずテーマのスタイル設定情報を指定し、その後でテーマをフォームに適用することをお勧めします。
    
  • インラインスタイル設定：
    フォームを操作する際には、フォームエディターのスタイルモードを使用してコンポーネントのスタイルを設定できます。スタイルモードを使用してフォームコンポーネントのスタイル設定を変更すると、テーマで指定したスタイル設定は上書きされます。特定のフォームの特定のコンポーネントのスタイル設定を変更する場合は、アダプティブフォームコンポーネントのインラインスタイル設定を参照してください。
• クライアント側ライブラリの使用
  スタイル設定情報をインポートするためにクライアントライブラリを作成する場合は、クライアント側ライブラリの使用を参照してください。クライアントライブラリを作成したら、前述の手順でテーマにインポートできます。
• コンテナパネルレイアウト幅の変更
  コンテナパネルレイアウト幅の変更はお勧めしません。コンテナパネルの幅を指定すると、幅が静的になり、さまざまなディスプレイに合わせて調整されません。
• ヘッダーおよびフッターを使用するためにフォームエディターまたはテーマエディターを使用するタイミング
  フォントスタイル、背景、透明度などのスタイル設定オプションを使用してヘッダーとフッターのスタイルを指定したい場合は、テーマエディターを使用してください。 
  ヘッダーにロゴイメージや企業名などの情報を表示し、フッターに著作権情報を表示する場合は、フォームエディターのオプションを使用します。