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

概要 introduction

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

以下の操作を実行できます。

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

AEM Forms では、テーマを作成、ダウンロード、アップロードできます。テーマは、フォーム、ドキュメント、レターなどの他のアセットと同様に作成できます。テーマは、フォームのようなメタプロパティを含む個別のエンティティとして保存されます。 テーマを個別のエンティティにすることで、複数のアダプティブフォームやインタラクティブ通信で再利用できます。 テーマをAEM Formsの別のインスタンスに移動して再利用することもできます。

テーマの作成 creating-a-theme

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

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

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

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

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

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

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

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

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

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

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

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

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

複数のアダプティブフォームとインタラクティブ通信で、同じテーマを使用できます。その場合、そのテーマ内で指定したコンポーネントの書式設定がアダプティブフォームとインタラクティブ通信にインポートされます。タイトル、説明、パネル、フィールド、アイコン、テキストボックスなど、様々なコンポーネントのスタイルを設定できます。テーマ内でウィジェットを使用して、コンポーネントのプロパティを設定できます。CSS または LESS に関する事前の知識は必要ありませんが、必要です。ただし、CSS のオーバーライドセクションでは CSS コードの記述やカスタムセレクターの提供が可能です。 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 で使用することもできます。同様に、フォームエディターまたはインタラクティブ通信エディターの UI のスタイルモードを使用してコンポーネントのスタイルを設定すると、そのスタイルがキャッシュに格納され、テーマ内で使用できるようになります。

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

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

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

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

任意のアダプティブフォームまたはインタラクティブ通信を使用してテーマを作成する theme-with-another-adaptive-form-or-interactive-communication

テーマを作成すると、テーマエディターに付属するフォームが作成されます。 このフォームのコンポーネントのスタイル設定を行います。 テーマエディターに付属しているフォームではなく、任意のフォームやインタラクティブ通信を選択してスタイルを設定し、その結果をプレビューできます。

テーマエディターのキャンバス上で現在のフォームまたはインタラクティブ通信を置き換えるには：

やり直し／取り消し 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 サービスで使用できるフォントを、アダプティブフォームとインタラクティブ通信でも使用できるようになりました。標準で Typekit:Adobeの Web フォントサービスを、設定として使用できます。 Typekit を使用するには、キットを作成し、その中にフォントを作成して、キット ID を次の場所から取得します。 Typekit Web サイト.

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

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

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

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

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

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

トラブルシューティング、推奨事項、ベストプラクティス troubleshooting-recommendations-and-best-practices