テーマの作成および使用 creating-and-using-themes

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

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

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

テーマの作成、ダウンロード、アップロード creating-downloading-or-uploading-a-theme

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

テーマの作成 creating-a-theme

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

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

Cloud Service インスタンスで作成されたテーマ：

テーマのダウンロード downloading-a-theme

テーマを zip ファイルとして書き出し、別のプロジェクトや Experience Manager インスタンスでそのテーマを使用することができます。テーマをダウンロードするには、以下の手順を実行します。

テーマのアップロード uploading-a-theme

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

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

テーマのメタデータ metadata-of-a-theme

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

テーマエディターについて about-the-theme-editor

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

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

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

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

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

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

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

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

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

パネルレイアウトのスタイル設定 styling-panel-layouts-br

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

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

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

画面サイズごとに異なるスタイル different-styles-for-different-screen-sizes-br

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

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

選択したオブジェクトのサイドバーにおける、スタイル設定プロパティのコンテキストの変更 styling-properties-context-changes-in-sidebar-on-selecting-objects

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

テーマエディターで最近使用したスタイル recently-used-styles-in-theme-editor

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

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

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

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

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

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

ライブプレビュー、保存、変更の破棄 live-preview-save-and-discard-changes

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

テーマと別のアダプティブフォーム theme-with-another-adaptive-form

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

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

やり直し／取り消し redo-undo

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

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

テーマエディターの使用 using-the-theme-editor

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

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

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

キャンバスの使用 using-canvas

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

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

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

サイドバーの使用 using-rail

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

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

状態 state

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

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

プロパティシート property-sheet

成功／エラーをシミュレート simulate-error-success

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

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

コンポーネントのスタイル設定 styling-a-component

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

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

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

特定の状態のフィールドのスタイル設定 styling-fields-given-state

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

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

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

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

小型画面向けレイアウトのスタイル設定 styling-layouts-for-smaller-displays

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

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

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

テーマで web フォントを使用 using-web-fonts-in-a-theme

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

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

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

テーマエディターでのフォントの選択 selecting-fonts-in-theme-editor

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

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

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

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

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

テーマエディター内で適用されているスタイルをマスク mask-styles-applied-in-theme-editor

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

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

テーマのフォームへの適用 applying-a-theme-to-a-form-or-interactive-communication-br

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

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

実行時にフォームのテーマを変更 change-theme-of-a-form-at-runtime

テーマにより、フォーム内の異なるコンポーネントのスタイルが設定されます。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」オプションを使用して、テーマにパスを提供できます。これにより、フォームのテーマを変更し、更新されたスタイルを使用してフォームをリフレッシュします。

テーマを使用した外観の設定 specific-af-appearance

AEM Forms には、すぐに使用できるデフォルトのキャンバステーマ以外に、様々なテーマが用意されています。他のテーマを使用してフォームをデザインする場合は、変更を追加するとともに、テーマライブラリフォルダーからテーマをコピーします。コピーしたテーマをテーマライブラリフォルダーの外部に貼り付け、コピーしたテーマを必要な変更に応じて編集します。

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

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

他のアダプティブフォームの使用例への影響 impact-on-other-adaptive-form-use-cases

CSS 生成シーケンス css-generation-sequence

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

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

スタイルのデバッグ debugging-styles

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

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

トラブルシューティング、レコメンデーション、ベストプラクティス troubleshooting-recommendations-and-best-practices

関連トピック see-also