チュートリアル：テンプレートの作成

これは、「最初のインタラクティブ通信の作成」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

インタラクティブ通信を作成するには、AEM サーバーに用意されている印刷チャネルと Web チャネル用のテンプレートを入手する必要があります。

印刷チャネルのテンプレートは Adobe Forms Designer で作成されて、AEM サーバーにアップロードされます。これらのテンプレートはインタラクティブ通信を作成する際に使用できるようになります。

Web チャネル用のテンプレートは AEM で作成されます。テンプレートの作成者と管理者は、Web テンプレートの作成、編集、有効化を行うことができます。作成して有効化されたテンプレートは、インタラクティブ通信を作成する際に使用できるようになります。

本チュートリアルは、印刷チャネル用および Web チャネル用のテンプレートの作成方法を順を追って説明します。これにより、作成されたテンプレートは、インタラクティブ通信を作成する際に使用できるようになります。このチュートリアルを完了すると、次の操作を実行できるようになります。

• Adobe Forms Designer を使用して印刷チャネル用の XDP テンプレートを作成する
• XDP テンプレートを AEM Forms サーバーにアップロードする
• Web チャネル用のテンプレートを作成し有効化する

印刷チャネル用のテンプレートの作成

次のタスクを使用して、インタラクティブ通信の印刷チャネル用のテンプレートの作成と管理を行います。

• Forms Designer を使用して XDP テンプレートを作成する
• AEM Forms サーバーに XDP テンプレートをアップロードする
• レイアウトフラグメント用に XDP テンプレートを作成する

Forms Designer を使用して XDP テンプレートを作成する

ユースケースおよび分析に基づき、XDP テンプレート内に、次のサブフォームを作成します。

• 請求明細：ドキュメントフラグメントが含まれます
• 顧客情報：ドキュメントフラグメントが含まれます
• 請求内容：ドキュメントフラグメントが含まれます
• 概要：ドキュメントフラグメント（料金のサブフォーム）およびグラフ（グラフのサブフォーム）が含まれます
• 通話明細：テーブル（レイアウトフラグメント）が含まれます
• Pay Now：画像が含まれます
• 付加価値サービス：画像が含まれます

XDP ファイルを Forms サーバーにアップロード後、これらのサブフォームは印刷テンプレートのターゲット領域として表示されます。インタラクティブ通信を作成する際に、ドキュメントフラグメント、グラフ、レイアウトフラグメント、画像などのすべてのエンティティがターゲット領域に追加されます。

印刷チャネル用に XDP テンプレートを作成するには、次の手順を実行します。

1. テンプレート作成用のフォームを表示するには、Forms Designer を開き、ファイル／新規／空白のフォームを使用を選択し、「次へ」、「完了」の順にタップします。

   「オブジェクトライブラリ」および「オブジェクト」オプションが Window メニューから選択されていることを確認します。

2. サブフォーム​コンポーネントを​オブジェクトライブラリ​からフォームにドラッグアンドドロップします。

3. 右側のペインの「オブジェクト」ウィンドウのサブフォームを表示するには、「サブフォーム」を選択します。

4. 「サブフォーム」タブを選択し、「コンテンツ」ドロップダウンリストから「フローレイアウト」を選択します。長さを調整するには、サブフォームの左のエンドポイントをドラッグします。

5. 「連結」タブで、次の手順を実行します。

   1. 「名前」フィールドに、BillDetails と入力します。

   2. 「データ連結」ドロップダウンリストから「データ連結なし」を選択します。

   

6. 同様に、ルートサブフォームを選択し、「サブフォーム」タブを選択し、「コンテンツ」ドロップダウンリストから「フローレイアウト」を選択します。「連結」タブで、次の手順を実行します。

   1. 「名前」フィールドに TelecaBill と入力します。

   2. 「データ連結」ドロップダウンリストから「データ連結なし」を選択します。

   

7. 手順 2～5 を繰り返し、次のサブフォームを作成します。

   • BillDetails

   • CustomerDetails

   • BillSummary

   • 概要 - このサブフォームの「サブフォーム」タブを選択し、「コンテンツ」ドロップダウンリストから「配置済み」を選択します。次のサブフォームを​概要​サブフォームに挿入します。

     • 料金
     • グラフ

   • ItemisedCalls

   • PayNow

   • ValueAddedServices

   時間を節約するには、既存のサブフォームをコピー＆ペーストして新しいサブフォームを作成することもできます。

   グラフ​サブフォームを料金サブフォームの右側にシフトするには、左側のペインから​グラフ​サブフォームを選択し、「レイアウト」タブを選択し、「AnchorX」フィールドの値を指定します。指定する値は、料金​サブフォームの「幅」フィールドの値よりも大きい値である必要があります。料金​サブフォームを選択し、「レイアウト」タブを選択し、「幅」フィールドの値を表示します。

8. テキスト​オブジェクトを、オブジェクトライブラリ​からフォームにドラッグアンドドロップし、ボックスに Dial XXXX to subscribe とテキストを入力します。

9. 左側のペインのテキストオブジェクトを右クリックし、「オブジェクト名の変更」を選択し、「登録」として、テキストオブジェクト名を入力します。

   

10. ローカルのファイルシステムにファイルを保存するには、ファイル／名前を付けて保存​を選択して、次の手順を実行します。

    1. ファイルを保存する場所に移動し、create_first_ic_print_template と名前を指定します。

    2. 「ファイルの種類」ドロップダウンリストから​.xdp を選択します。

    3. 「保存」をタップします。

AEM Forms サーバーに XDP テンプレートをアップロードする

Forms Designer を使用して XDP テンプレートの作成が終わったら、AEM Forms サーバーにアップロードする必要があります。これにより、作成されたテンプレートは、インタラクティブ通信を作成する際に使用できるようになります。

1. フォーム／フォームとドキュメント​を選択します。

2. 作成／ファイルのアップロード​をタップします。

   create_first_ic_print_template テンプレート（XDP）に移動して選択し、「開く」をタップして、XDP テンプレートを AEM Forms サーバーに読み込みます。

レイアウトフラグメント用に XDP テンプレートを作成する

インタラクティブ通信の印刷チャネル用のレイアウトフラグメントを作成するには、Forms Designer を使用して XDP を作成し、AEM Forms サーバーにアップロードします。

1. テンプレート作成用のフォームを表示するには、Forms Designer を開き、「ファイル／新規／空白のフォームを使用」を選択し、「次へ」、「完了」の順にタップします。

   「オブジェクトライブラリ」および「オブジェクト」オプションが Window メニューから選択されていることを確認します。

2. テーブル​コンポーネントを​オブジェクトライブラリ​からフォームにドラッグ＆ドロップします。

3. テーブルの挿入ダイアログで、次の手順を実行します。

   1. 列数を 5 と指定します。
   2. ボディ行数を 1 と指定します。
   3. 「テーブルにヘッダー行を含む」チェックボックスを選択します。
   4. 「OK」をタップします。

4. テーブル 1 の隣の左側のペインで「+」をタップし、Cell1 を右クリックし、「オブジェクト名の変更」を「日付」に選択します。

   同様に、Cell2、Cell3、Cell4​および​Cell5 の名前をそれぞれ​時刻、番号、時間​および​料金​に変更します。

5. 「Designer View」のヘッダーテキストフィールドをクリックして、それらの名前を​時刻、番号、時間​および​料金​に変更します。

   

6. 左側のペインから​Row 1 を選択し、「オブジェクト／連結／各データアイテムについて行を繰り返す」を選択します。

   

7. テキストフィールド​コンポーネントを​オブジェクトライブラリ​から Designer View にドラッグ＆ドロップします。

   

   同様に、テキストフィールド​コンポーネントを​時刻、番号、時間​および​料金​行にドラッグアンドドロップします。

8. ローカルのファイルシステムにファイルを保存するには、「ファイル／名前を付けて保存」を選択して、次の手順を実行します。

   1. ファイルを保存する場所に移動し、table_lf と名前を指定します。

   2. 「ファイルの種類」ドロップダウンリストから​.xdp を選択します。

   3. 「保存」をタップします。
      Forms Designer を使用してレイアウトフラグメント用 XDP テンプレートの作成が終わったら、AEM Forms サーバーにアップロードする必要があります。これにより、作成されたテンプレートは、レイアウトフラグメントを作成する際に使用できるようになります。

Web チャネル用テンプレートの作成

次のタスクを使用して、インタラクティブ通信の Web チャネル用のテンプレートの作成と管理を行います。

• テンプレート用フォルダーの作成
• テンプレートの作成
• テンプレートの有効化
• インタラクティブ通信でボタンの有効化

テンプレート用フォルダーの作成

Web チャネルテンプレートを作成するには、作成したテンプレートを保存できるフォルダーを定義します。フォルダー内にテンプレートを作成したら、そのテンプレートを有効にする必要があります。これにより、フォームユーザーがそのテンプレートを使用して、インタラクティブ通信の Web チャネルを作成できるようになります。

編集可能なテンプレート用のフォルダーを作成するには、次の手順を実行します。

1. 「ツール」 ／設定ブラウザー​をタップします。

   • 詳しくは、設定ブラウザーのドキュメントを参照してください。

2. 設定ブラウザーページで、「作成」をタップします。

3. 設定を作成​ダイアログで、フォルダー用タイトルとして Create_First_IC_templates を指定し、「編集可能テンプレート」を指定し、「作成」をタップします。

   

   Create_First_IC_templates フォルダーが作成され、設定ブラウザー​ページに表示されます。

テンプレートの作成

ユースケースおよび分析に基づき、web テンプレート内に、次のパネルを作成します。

• 請求明細：ドキュメントフラグメントが含まれます
• 顧客情報：ドキュメントフラグメントが含まれます
• 請求内容：ドキュメントフラグメントが含まれます
• 請求概要：ドキュメントフラグメントとグラフ（2 列のレイアウト）が含まれます
• 通話明細：テーブルが含まれます
• Pay Now：「Pay Now」ボタンと画像が含まれます
• 付加価値サービス：画像と「登録」ボタンが含まれます。

ドキュメントフラグメント、グラフ、テーブル、画像、ボタンなどのすべてのエンティティが、インタラクティブ通信を作成する際に追加されます。

Create_First_IC_templates フォルダーでWeb チャネル用のテンプレートを作成するには、次の手順を実行します。

1. ツール／テンプレート／Create_First_IC_templates フォルダーを選択して、適切なテンプレートフォルダーに移動します。

2. 「作成」をタップします。

3. 「テンプレートタイプを選択」設定ウィザードで、「インタラクティブ通信 - web チャネル」を選択し、「次へ」をタップします。

4. 「テンプレート詳細」設定ウィザードで、テンプレートタイトルとして Create_First_IC_Web_Template を指定します。オプション内容を指定し、「作成」をタップします。

   Create_First_IC_Web_Template という確認メッセージが表示されます。

5. 「開く」をタップして、テンプレートエディターでテンプレートを開きます。

6. 「プレビュー」オプションの隣にあるドロップダウンリストから「初期コンテンツ」を選択します。

   

7. テンプレートに追加できるコンポーネントの一覧を表示するには、「ルートパネル」／+ をタップします。

8. コンポーネントの一覧から、ルートパネル​の上に追加する「パネル」を選択します。

9. 左側のペインで「コンテンツ」タブを選択します。手順 8 で追加された新しいパネルは、コンテンツツリーの​ルートパネル​の下に表示されます。

   

10. パネルを選択し、（設定）をタップします。

11. プロパティペインで、次の手順を実行します。

    1. 「名前」フィールドに​billdetails と入力します。

    2. 「タイトル」フィールドに、請求明細​と入力します。

    3. 「列数」ドロップダウンリストから、1 を選択します。

    4. をタップしてプロパティを保存します。

    コンテンツツリーの​請求明細​に更新パネル名が更新されます。

12. 手順 7～11 を繰り返し、次のプロパティを含むパネルをテンプレートに追加します。

    名前	タイトル	列数
    customerdetails	顧客情報	1
    billsummary	請求内容	1
    summarycharges	請求概要	2
    itemisedcalls	通話明細	1
    paynow	Pay Now	2
    vas	付加価値サービス	1

    次の画像は、すべてのパネルがテンプレートに追加された後のコンテンツツリーを示しています。

    

テンプレートの有効化

Web テンプレートの作成が終わったら、インタラクティブ通信を作成する際に、そのテンプレートを有効にする必要があります。

Web テンプレートを有効にするには、次の手順を実行します。

1. ツール ／テンプレート​をタップします。

2. Create_First_IC_Web_Template テンプレートに移動して選択し、「有効」をタップします。

3. 再度「有効」をタップして確認します。

   これでテンプレートが有効になり、テンプレートのステータスとして「有効」が表示されます。このテンプレートは、Web チャネル用のインタラクティブ通信を作成する際に使用できます。

インタラクティブ通信でボタンの有効化

ユースケースに基づき、「Pay Now」および「登録」ボタン（アダプティブフォームコンポーネント）をインタラクティブ通信に含める必要があります。インタラクティブ通信でこれらのボタンの仕様を有効にするには、次の手順を実行します。

1. 「プレビュー」オプションの隣にあるドロップダウンリストから、「構造」を選択します。

2. コンテンツツリーを使用して、ドキュメントコンテナ​ルートパネルを選択し、「ポリシー」をタップして、インタラクティブ通信で使用が許可されているコンポーネントを選択します。

   

3. 「プロパティ」セクションの「許可されているコンポーネント」タブで、アダプティブフォーム​コンポーネントから「ボタン」を選択します。

   

4. をタップしてプロパティを保存します。

Business.Adobe.com リソース

Content Insights Automated Onboarding Personalized Experiences Mobile Forms Headless Cms Digital Asset Management