AEM Forms のテーマについて

Adobe Experience Manager Forms では、テーマを作成してフォームに適用することができます。テーマにはコンポーネントやパネルのスタイル設定の詳細が含まれ、さまざまなフォームにテーマを再利用できます。コンポーネントに対してスタイルを指定したり、アプリケーション全体で使用されているさまざまなコンポーネントの CSS プロパティを変更したりできます。スタイルには、背景色、状態色、透明度、およびサイズなどのプロパティが含まれます。テーマのカスタマイズを保存し、プリセットとしてフォームのコンポーネントにそれらを移植することができます。テーマをフォームに追加すると、指定されたスタイルがフォームの対応コンポーネントに反映されます。

テーマの管理は、アダプティブフォームの他のアセットの管理とインラインで管理されます。テーマは、単独(アダプティブフォームの参照なし)で管理することのできるアセットです。テーマには、アダプティブフォームの他のアセットと同様、完全なライフサイクルがあります。

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

  • テーマの作成
  • 既存のテーマの編集/コピー(メタデータの編集/テーマの定義)
  • 既存のテーマのインポート/エクスポート
  • テーマの依存関係の管理

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. アップロードプロンプトで、コンピュータ上のテーマパッケージを参照して選択し、「アップロード」をクリックします。
    アップロードされたテーマは、テーマページで使用することができます。

テーマのメタデータ

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

 

ID

 

名前 編集の可否 プロパティの説明
1. タイトル はい テーマの名前を表示します。
2. 説明 はい テーマについての説明です。
3. タイプ いいえ
  • アセットのタイプ。
  • この値はテーマである必要があります。
4. 作成日 いいえ テーマの作成日
5. 作成者名 はい テーマの作成者。テーマの作成時に計算されます。
6. 最終変更日 いいえ テーマが最後に変更された日付。
7. 状態 いいえ テーマの状態(変更済み/発行済み)。
8. Publish On Time はい テーマを自動で発行する時間。
9. Publish Off Time はい テーマを自動で非公開にする時間。
10. タグ はい 検索の向上のため、識別用にテーマに付加されるラベル。
11. 参照 リンク
  • 「参照元」セクションを含みます。そのテーマを使用するフォームをリスト表示します。
  • テーマが他のアセットを参照していない場合、「参照」セクションはありません。
12. Clientlib の場所 はい
  • このテーマに対応する clientlib が保存される、「/etc」内のユーザー定義のリポジトリのパスです。
  • デフォルト値 - 「/etc/clientlibs/fd/themes」 + テーマのアセットの相対パス。
  • 場所が存在しない場合、フォルダー階層は自動生成されます。
  • この値が変更されると、clientlib ノード構造は、入力された新しい場所に移動します。
    注意:clientlib の場所を変更する場合、CRXDE リポジトリで crx:replicate、rep:write、jcr:read を forms-users に割り当て、crx:replicatejcr:read を新しい場所にある fd-service に割り当てます。
13. Clientlib カテゴリ名 はい
  • このテーマのユーザー定義の clientlib カテゴリ名です。
  • 名前が既に存在するテーマで使用されていると、エラーが表示されます。
  • デフォルト値 - テーマの位置を使用して計算されます。
  • この値が変更されると、clientlib ノードに対応してカテゴリ名が更新されます。clientlib カテゴリ名は参照で使用されるため、jsp ファイルの clientlib カテゴリ名の更新は不要です。

テーマエディタについて

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

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

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

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

  • キャンバス - 右側に表示されます。ここには、すべてのスタイル設定の変更が即時に反映されるアダプティブフォームのサンプルが表示されます。また、キャンバスから直接オブジェクトを選択して、関連するスタイルを検索し、そのスタイルを編集することができます。上部にあるデバイスの解像度のルーラーにより、キャンバスが制御されます。解像度のブレイクポイントをルーラーから選択することで、その解像度でサンプルフォームのプレビューが表示されます。キャンバスについては、下記で説明されています。
  • サイドバー - 左側に表示されます。以下のアイテムがあります。
    • セレクター:スタイル設定で選択されたコンポーネントと、スタイル設定可能なプロパティを表示します。テーマとは、1 つのフォームのスタイル設定情報を 1 か所にまとめたものです。セレクターは、あるタイプのすべてのコンポーネントを表示します。1 つのテーマでテキストボックスを選択してスタイル設定する場合、フォーム内のすべてのテキストボックスがスタイルを継承します。
      セレクターにより、コンテナコンポーネントまたは特定コンポーネントのスタイル設定が可能になります。例えば、フォーム内に、ユーザーに住所の入力を求めるフィールドがあるとします。住所フィールド自体のスタイルを設定することができます。住所フィールドはオブジェクトであり、テキストボックスオブジェクトを使用します。この場合、フィールドはコンテナコンポーネント、テキストボックスは特定コンポーネントになります。サイドバーからそのコンポーネントを検索して選択、またはキャンバスで選択することができます。

      コンポーネントは、同じカテゴリに入るすべてのオブジェクトに影響を及ぼします。特定のオブジェクトタイプは、特定のカテゴリのオブジェクトに影響します。例えば、ユーザーに年齢の入力を求めるフィールドがフォームにあるとします。そのフィールドコンポーネントには、数値ボックスコンポーネントが含まれます。テーマでフィールドコンポーネントのスタイルを設定した場合、すべてのフィールドオブジェクトがそのテーマで指定したスタイル設定を継承します。テーマで数値ボックスコンポーネントをスタイル設定する場合、フォーム内の数値ボックスオブジェクトのみがスタイルを継承します。

      コンテナコンポーネントと特定コンポーネントのスタイルは、独立して設定されます。例えば、フィールドコンポーネントの背景色を青色に設定したとします。フォーム内のすべてのフィールドオブジェクトは青色の背景色を継承しますが、フィールド内の特定オブジェクト(数値ボックスまたはテキストボックス)は未変更のままになります。かわりに、数値ボックスとテキストボックスコンポーネントの背景色を緑色に設定するとします。フォーム内のすべての数値ボックスとテキストボックスオブジェクトはその背景色を継承しますが、それらを含むフィールドオブジェクトは未変更のままになります。また、フィールドの背景色を青色、テキストボックスの背景色を緑色、数値ボックスの背景色を赤色に設定するとします。すべてのフィールドオブジェクトは青色、すべてのテキストボックスは緑色、すべての数値ボックスは赤色の背景色を継承します。
    • 状態:特定の状態のオブジェクトのスタイル設定をカスタマイズします。例えば、デフォルト、フォーカス、無効、ホバー、エラーの状態におけるオブジェクトの見え方を指定することができます。
    • プロパティカテゴリ:スタイル設定プロパティはさまざまなカテゴリに分けられています。たとえば、サイズと位置、テキスト、背景、境界線、効果などです。各カテゴリで、スタイル設定情報を指定します。たとえば、背景では、背景色や画像とグラデーションを指定します。
    • 詳細:カスタムの CSS をオブジェクトに追加し、重複があった場合に視覚制御の定義のプロパティをオーバーライドします。
    • CSS を表示:選択したコンポーネントの CSS を表示します。

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

CSS 生成シーケンス

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

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

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

スタイルのデバッグ

テーマエディターでコンポーネントのスタイルを指定する場合、CSS は上述のとおりに生成されます。コンテナコンポーネントをスタイル設定する場合、これに含まれる複数のコンポーネントもスタイル設定されます。特定のコンポーネントを指定したときに、このコンポーネントがコンテナコンポーネントに含まれている場合は、スタイル設定は継承されます。例えば、フィールドウィジェットを選択してスタイル設定するとします。フィールドウィジェットは、テキストボックスとラベルを含むコンテナコンポーネントです。フィールドウィジェットをスタイル設定する場合、ラベルとテキストボックスもスタイル設定されます。次に、スタイル設定するテキストボックスを選択します。テキストボックスは、フィールドウィジェットのスタイル設定と、自身のプロパティからスタイル設定情報を取得します。テーマエディターは、CSS を表示して、サイドバーのプロパティを使用して指定したスタイルをデバッグするオプションを提供します。 

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

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

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

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

例えば、3 つのフォームで作業をしているとします。3 つすべてのフォームで、数値のみ入力可能なフィールドの背景を緑色にしようとします。テーマを作成し、それをすべてのフォームに追加することができます。テーマにより、数値のみ入力可能なすべてのテキストボックスに、フォーマット設定が適用されます。同様に、すべてのフィールドに背景色を設定するには、フィールドの背景色を指定して保存します。フォームやコンポーネントごとに CSS を個別に書き込まなくても、テーマを使用したすべてのフォームのフィールドが、指定した背景色になります。

サイドバーのスタイル可能なコンポーネント
フォームのさまざまなコンポーネントを選択してスタイルを設定する、サイドバーのオプション。

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

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

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

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

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

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

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

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

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

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

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

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

アプローチには、次が含まれます。

  1. デスクトップ優先(デフォルト):このアプローチでは、低いブレークポイントにオーバーライドされない限り、すべてのスタイル設定を高い解像度から低い解像度のブレークポイントへと行います。
  2. モバイル優先:このアプローチでは、高い解像度のブレークポイントがオーバーライドされない限り、すべてのスタイル設定を低い解像度から高い解像度へと行います。
  3. タブレットをベース解像度に設定:このアプローチは、最初の 2 つのアプローチの組み合わせです。これは、選択されたブレークポイント以下ではトップダウンで動作し、選択したブレークポイント以上ではボトムアップで動作します。

注意:

テーマは、まずフォームを使用して作成され、それから異なるフォームに適用されます。テーマの作成に使用されているフォームのブレークポイントは、テーマを適用するフォームとは異なる場合があります。CSS メディアクエリーは、テーマを適用するフォームではなく、テーマの作成に使用されているフォームに基づきます。

プロパティのコンテキストのスタイル設定は、選択したオブジェクトのサイドバーで変更します。

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

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

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

テーマと別のフォーム

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

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

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

取り消し/やり直し

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

テーマエディタの「取り消し/やり直し」ボタン
キャンバスの「取り消し/やり直し」ボタン

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

テーマエディターの使用

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

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

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

キャンバスの使用

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

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

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

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

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

注意:

コンポーネントのツールバーで使用できるオプションは、選択したコンポーネントにより異なります。 

コンポーネントツールバー
キャンバスの数値ボックスのコンポーネントツールバー

サイドバーの使用

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

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

サイドバーオプション 用途

名前

キャンバスで選択されている、またはサイドバーで検索または選択されているコンポーネントの名前を表示します。

状態

選択されたコンポーネントの状態を選択し、選択された状態のスタイル設定をカスタマイズします。 

たとえば、コンポーネントの状態がデフォルト、フォーカス、無効、ホバー、エラーになっている際の見え方を指定するとします。 

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

寸法と位置

テーマのコンポーネントの整列、サイズ、位置、および場所のスタイルを設定します。 

オプションは、ディスプレイ設定、余白、マージン、幅、高さおよび Z インデックスです。 

テキスト

テーマのコンポーネントでテキストのスタイルをカスタマイズします。

たとえば、テキストボックスに入力したテキストの見え方を変更するとします。

オプションには、フォントファミリー、太さ、色、サイズ、行の高さ、テキストの整列、文字間隔、テキストのインデント、下線、イタリック、テキストの変形、垂直方向の整列、ベースライン、方向があります。 

背景 

コンポーネントの背景を画像または色で塗りつぶします。 

境界線

コンポーネントの境界線の外観を選択します。例えば、テキストボックスに深い赤色で太い境界線を点線で入れるとします。 

オプションは、幅、スタイル、半径、および境界線の色になります。

効果

コンポーネントに、不透明度、ブレンドモード、シャドウなど特殊効果を追加できます。 

詳細

カスタムのインライン CSS コードをコンポーネントに追加し、カスタムのセレクターを書き込むことができます。 

カスタムの CSS コードを追加すると、サイドバーのオプションを使用して追加したカスタマイズがオーバーライドされます。 

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

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

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

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

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

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

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

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

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

  1. キャンバスでコンポーネントを選択し、コンポーネントツールバーから適切なオプションを選択します。
    サイドバーに、コンポーネントのスタイル設定をカスタマイズするためのオプションが表示されます。
  2. サイドバーで、状態を選択します。たとえば、必須やエラーなどです。 
  3. サイドバーの「境界線」、「背景」などのオプションを使用して、コンポーネントの外観をカスタマイズします。

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

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

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

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

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

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

テーマをフォームに適用する

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

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

テーマを使用した特定のアダプティブフォーム外観の取得

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 つのガイドコンテナに個別に保存されます。

トラブルシューティングと推奨事項

  • テーマを含むフォルダーのダウンロード:
    テーマを作成する対象のフォルダーをダウンロードする場合は、空のフォルダーがダウンロードされます。このようなテーマをダウンロードするには、テーマを選択してダウンロードします。
  • 別のテーマに属するアセットの回避
    テーマを編集する際、アセット(画像など)を他のテーマから参照して追加することができます。例えば、ページの背景を編集しているとします。例えば、ページ/背景/追加/画像を選択すると、他のテーマの画像を参照して追加することが可能なダイアログが表示されます。
    アセットを別のテーマから追加し、そのテーマが移動または削除されると、現在のテーマに問題が生じる場合があります。他のテーマからアセットを参照して追加しないようにすることをお勧めします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー