前提条件

アダプティブフォームテンプレート

テンプレートは、実際にはコンテンツを持たないノードの階層です。アダプティブフォームを作成するため、コピーして使用されます。テンプレートにはレイアウト、スタイル、コンポーネント階層、基本的な初期コンテンツ構造が事前に設定されています。 

アダプティブフォームまたはアダプティブドキュメントを作成すると、元のテンプレートのコンテンツ構造を変更しても、アダプティブフォームとアダプティブドキュメントの構造には反映されません。

デフォルトのアダプティブフォームテンプレート

AEM QuickStart では、次のアダプティブフォームテンプレートを提供します。

アダプティブフォームテンプレート

  • サーベイのテンプレート:複数の列が設定されたレスポンシブレイアウトを使用して単一ページのアダプティブフォームを作成します。フォームを表示させる画面サイズに基づいてレイアウトは自動で調整されます。
  • 登録テンプレート:ウィザードのレイアウトを使用して複数の手順を備えたアダプティブフォームを作成します。このレイアウトでは、各手順の完了に必要な式を指定できます。指定した式は、次の手順にウィザードを進める前に検証されます。
  • タブ付き登録テンプレート:タブが左側にあるレイアウトを使用し、複数のタブを備えたアダプティブフォームを作成します。このレイアウトでは、任意の順序でタブにアクセスできます。

アダプティブドキュメントテンプレート

  • 基本テンプレート:アコーディオンレイアウトを使用して複数の手順を備えたアダプティブドキュメントを作成します。

また、AEM は次にある AEM Forms アドオンを使用して高度な登録テンプレートも提供します。location /libs/fd/afaddon/templates/advancedEnrollmentTemplate

アダプティブフォームのみ)このテンプレートには、値 fd/af/templates を持つ追加の guideComponentType プロパティが含まれ、これによりアダプティブフォームで使用されていることが明示的に示されます。

アダプティブドキュメントのみ)このテンプレートには、値 fd/ad/templates を持つ追加の guideComponentType プロパティが含まれ、これによりアダプティブドキュメントで使用されていることが明示的に示されます。

これらのテンプレートでは、sling:resourceType プロパティが、対応するページのコンポーネントに設定されています。ページコンポーネントは、アダプティブフォームのコンテナを含む CQ ページをレンダリングすることでアダプティブフォームをレンダリングします。

次の表では、テンプレートとページコンポーネントの関係を列挙します。

テンプレート

ページコンポーネント

/libs/fd/af/templates/surveyTemplate

/libs/fd/af/components/page/survey

/libs/fd/af/templates/simpleEnrollmentTemplate

/libs/fd/af/components/page/base

/libs/fd/af/templates/tabbedEnrollmentTemplate

/libs/fd/af/components/page/tabbedenrollment

/libs/fd/afaddon/templates/advancedEnrollmentTemplate

/libs/fd/afaddon/components/page/advancedenrollment

注意:

アダプティブフォームの各カスタムテンプレートは、HTML5 仕様に準拠していて、ページに <!DOCTYPE Html> タグが追加されている必要があります。

アダプティブフォームテンプレートの作成

あらかじめ用意されたテンプレートを使う代わりに、自分でテンプレートを作成してアダプティブフォームの作成に使用することもできます。カスタムテンプレートは、アダプティブフォームのコンテナのほか、ヘッダー、フッターなど、ページ要素を参照するさまざまなページコンポーネントに基づいています。

これらのコンポーネントは Web サイト向けの基本ページコンポーネントを使用して作成することができます。または、あらかじめ用意されたテンプレートで使用されるアダプティブフォームのページコンポーネントを拡張することもできます。

simpleEnrollmentTemplate などのカスタムテンプレートを作成するには、次の手順を実行します。

  1. オーサーインスタンス上の CRXDE Lite に移動します。

  2. /apps ディレクトリの下に、自分のアプリケーションのフォルダー構造を作成します。例えば、アプリケーションの名前が mycompany の場合、その名前のフォルダーを作成します。通常、アプリケーションフォルダーには components、configuration、templates、src、installation のディレクトリが含まれます。この例では、components、configuration、templates の各フォルダーを作成します。

  3. すべて保存」をクリックし、作成したフォルダー構造を保存します。

  4. /libs/fd/af/templates フォルダーに移動します。

  5. simpleEnrollmentTemplate ノードをコピーします。

  6. /apps/mycompany/templates フォルダーに移動します。右クリックして「貼り付け」を選択します。

  7. 必要に応じて、コピーしたテンプレートノードの名前を変更します。例えば、enrollment-template などに変更します。

  8. /apps/mycompany/templates/enrollment-template に移動します。

  9. jcr:content ノードの jcr:title プロパティと jcr:description プロパティを変更し、コピー元のテンプレートと区別できるようにします。

  10. 変更したテンプレートの jcr:content ノードには、guideContainerguideformtitle コンポーネントが含まれます。guideContainer はアダプティブフォームを格納するコンテナです。guideformtitle コンポーネントは、アプリケーション名や説明などを表示します。

    guideformtitle の代わりに、カスタムコンポーネントまたは parsys コンポーネントを含めることができます。例えば、guideformtitle を削除して、カスタムコンポーネントまたは parsys コンポーネントのノードを含めることができます。コンポーネントの sling:resourceType プロパティの参照先が、そのコンポーネントになっていることを確認してください。ページ component.jsp ファイルでも同様に定義されます。

  11. /apps/mycompany/templates/enrollment-template/jcr:content
    に移動します。

  12. プロパティ」タブを開き、cq:designPath プロパティの値を /etc/designs/mycompany に変更します。

  13. 次に、cq:Page タイプに /etc/designs/mycompany のノードを作成します。

  14. すべて保存」をクリックして変更内容を保存します。

アダプティブフォームのページコンポーネントの作成

テンプレートの参照先は /libs/fd/af/components/page/base のページコンポーネントに設定されているため、カスタムテンプレートはデフォルトのテンプレートと同じスタイルを持ちます。コンポーネントの参照は、/apps/mycompany/templates/enrollment-template/jcr:content ノードで定義された sling:resourceType プロパティで検索できます。base はコア製品のコンポーネントのため、変更を加えないでください。

  1. /apps/mycompany/templates/enrollment-template/jcr:content のノードに移動し、sling:resourceType プロパティの値を /apps/mycompany/components/page/enrollmentpage に変更します。

  2. /libs/fd/af/components/page/base のノードを /apps/mycompany/components/page フォルダーにコピーします。

  3. コピーしたコンポーネントの名前を enrollmentpage に変更します。

  4. (コンテンツページを既に持っている場合のみ)自分の Web サイトに contentpage コンポーネントが既に存在する場合は、次の手順(a ~ d)を実行します。自分の Web サイトに contentpage コンポーネントが存在しない場合は、resourceSuperType プロパティを OOTB の基本ページにポイントしたままにすることができます。

    1. enrollmentpage ノードの場合、sling:resourceSuperType プロパティの値を mycompany/components/page/contentpage に設定します。contentpage コンポーネントは、自分のサイトの基本ページコンポーネントです。他のページコンポーネントで拡張することができます。enrollmentpage の下で、head.jspcontent.jsp library.jsp を除くスクリプトファイルを削除します。このケースでは contentpage である sling:resourceSuperType コンポーネントに、このようなスクリプトすべてが含まれます。ナビゲーションバーやフッターなどを含むヘッダー類は、contentpage コンポーネントから継承されます。

    2. head.jsp ファイルを開きます。

      この JSP ファイルには <cq.include script="library.jsp"/> 行が含まれます。

      library.jsp ファイルには、guide.theme.simpleEnrollment のクライアントライブラリが含まれ、その中にアダプティブフォームのスタイル設定が含まれています。


      enrollmentpage のページコンポーネントは専用の head.jsp ファイルがあり、contentpage コンポーネントの head.jsp ファイルをオーバーライドします。

    3. enrollmentpage コンポーネント用の head.jsp ファイルに、contentpage コンポーネント用の head.jsp ファイルのすべてのスクリプトを含めます。

    4. content.jsp スクリプトの中に、追加のページコンテンツまたはページがレンダリングされる際に含まれる他のコンポーネントへの参照を追加することができます。例えば、applicationformheader カスタムコンポーネントを追加する場合、JSP ファイルのコンポーネントに次の参照を追加します。

      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>

      同様に、テンプレートのノード構造に parsys コンポーネントを追加する場合、カスタムコンポーネントも含めます。

アダプティブフォームおよびアダプティブドキュメントのクライアントライブラリの作成

新しいテンプレート用の enrollmentpage コンポーネントの head.jsp ファイルには、guide.theme.simpleEnrollment クライアントライブラリが含まれます。デフォルトのテンプレートは、このクライアントライブラリも使用します。これらの方法のいずれかを使用して、新しいテンプレートのスタイルを変更します。

  • カスタムテーマを定義し、デフォルトのテーマ guide.theme.simpleEnrollment をカスタムテーマで置き換えます。
  • /etc/designs/mycompany の下に新しいクライアントライブラリを定義します。JSP ページで、デフォルトのテーマのエントリの後にクライアントライブラリを含めます。このクライアントライブラリに、オーバーライドされたすべてのスタイルと、追加の Java Script ファイルを含めます。

注意:

アダプティブフォームのレンダリングに使用されるページコンポーネントに含まれる CQ クライアントライブラリが、テーマによって参照されます。クライアントライブラリは、主にアダプティブフォームの外観を管理します。

アダプティブドキュメントのみ)アダプティブドキュメントのクライアントライブラリでは、style.less ファイル内の /etc/clientlibs/fd/adaddon/adtheme/common/less/adField.less ファイルと、アダプティブフォーム用に読み込んだものすべてを読み込む必要があります。

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

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