チュートリアル：インタラクティブ通信の作成

すべての構築ブロックを使ってインタラクティブ通信を作成する

これは、「最初のインタラクティブ通信の作成」シリーズを構成するチュートリアルです。チュートリアルの使用例を理解、実行、デモするために、時系列に従うことをお勧めします。

Web 版のフォームデータモデル、ドキュメントフラグメント、テンプレート、テーマなど、すべての構築ブロックを作成したら、インタラクティブ通信の作成を開始できます。

インタラクティブ通信は、次の 2 つのチャネルを通じて配信できます。印刷と Web。 印刷チャネルをマスターとして使用してインタラクティブ通信を作成することもできます。 Web チャネルのマスターとして印刷オプションを使用すると、Web チャネルのコンテンツ、継承、データ連結が印刷チャネルから派生するようになります。 また、印刷チャネルで行った変更が Web チャネルで確実に同期されます。 ただし、インタラクティブ通信の作成者は、Web チャネル内の特定のコンポーネントの継承を解除できます。

このチュートリアルでは、印刷チャネルと Web チャネル用のインタラクティブ通信を作成する手順を説明します。 このチュートリアルを完了すると、次の操作を実行できるようになります。

• 印刷チャネル用のインタラクティブ通信の作成
• Web チャネル用のインタラクティブ通信の作成
• 印刷と Web のインタラクティブ通信を作成し、印刷をマスター

同期を行わない印刷および Web 用のインタラクティブ通信の作成

印刷チャネル用のインタラクティブ通信の作成

次のリストは、このチュートリアルで既に作成済みで、印刷チャネル用のインタラクティブ通信を作成する際に必要なリソースを示しています。

印刷テンプレート： create_first_ic_print_template

フォームデータモデル：FDM_Create_First_IC

ドキュメントフラグメント： bill_details_first_ic、customer_details_first_ic、bill_summary_first_ic、summary_charges_first_ic

レイアウトフラグメント： table_lf

画像： PayNow と ValueAddedServices

1. AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／フォームとドキュメント​に移動します。

2. 「作成」をタップし、「インタラクティブ通信」を選択します。インタラクティブ通信の作成​ウィザードが表示されます。

3. 「タイトル」と「名前」フィールドに create_first_ic と入力します。FDM_Create_First_IC をフォームデータモデルとして選択し、「次へ」をタップします。

4. チャンネル​ウィザードで以下を実行します。

   1. create_first_ic_print_template を印刷テンプレートとして指定し、「選択」をタップします。「Web チャンネルのマスターとして印刷を使用」のチェックボックスが選択されていないことを確認してください。
   2. Create_First_IC_templates フォルダー／Create_First_IC_Web_Template を Web テンプレートとして指定し、「選択」をタップします。
   3. 「作成」をタップします。

   インタラクティブ通信が正常に作成されたことを示す確認メッセージが表示されます。

5. タップ 編集 をクリックして、右側のウィンドウでインタラクティブ通信を開きます。

6. 「アセット」タブに移動してフィルターを適用し、左側のペインのドキュメントフラグメントだけを表示します。

7. 次のドキュメントフラグメントを、インタラクティブ通信のターゲット領域にドラッグ&ドロップします。

   ドキュメントフラグメント	ターゲット領域
   bill_details_first_ic	BillDetails
   customer_details_first_ic	CustomerDetails
   bill_summary_first_ic	BillSummary
   summary_charges_first_interactive_communication	料金

   

8. グラフ​のターゲット領域をタップし、+ をタップして​グラフ​のコンポーネントを追加します。

9. グラフのコンポーネントをタップし、（設定）を選択します。グラフのプロパティが左側のペインに表示されます。

   1. グラフの名前を指定します。
   2. 「グラフのタイプ」ドロップダウンリストから「円グラフ」を選択します。
   3. X 軸​セクションの​通話​データモデルオブジェクトタイプから Calltype プロパティを選択します。 をタップします。
   4. 「関数」ドロップダウンリストから「頻度」を選択します。
   5. Y 軸​セクションの​通話​データモデルオブジェクトタイプから Calltype プロパティを選択します。 をタップします。
   6. をタップして、グラフのプロパティを保存します。

10. 「アセット」タブに移動してフィルターを適用し、左側のペインのレイアウトフラグメントだけを表示します。table_lf レイアウトフラグメントを​通話明細​のターゲット領域にドラッグアンドドロップします。

11. 「日付」列のテキストフィールドを選択し、（設定）をタップします。

12. 「連結タイプ」ドロップダウンリストから「データモデルオブジェクト」を選択し、calls／calldate の順に選択します。 をタップしてプロパティを保存します。

    同様に、時刻、番号、時間、および​料金​のテキストフィールドについて、それぞれ calltime、callnumber、callduration、および callcharges との連結を作成します。

13. PayNow のターゲット領域をタップし、+ をタップして​画像​のコンポーネントを追加します。

14. 画像のコンポーネントをタップし、（設定）を選択します。左側のペインにイメージのプロパティが表示されます。

    1. 指定 PayNow を 名前 フィールドに入力します。
    2. 「アップロード」をタップし、ローカルのファイルシステムに保存された の画像を選択して「開く」をタップします。
    3. をタップして、画像のプロパティを保存します。

15. 手順 13～14 を繰り返し、ValueAddedServices の画像を ValueAddedServices のターゲット領域に追加します。

Web チャネル用のインタラクティブ通信の作成

次に、このチュートリアルで既に作成済みで、Web チャネル用のインタラクティブ通信を作成する際に必要なリソースのリストを示します。

Web テンプレート： Create_First_IC_Web_Template

フォームデータモデル： FDM_Create_First_IC

ドキュメントフラグメント： bill_details_first_ic、customer_details_first_ic、bill_summary_first_ic、summary_charges_first_ic

画像： PayNowWeb および ValueAddedServicesWeb

1. AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／フォームとドキュメント​に移動します。

2. 「作成」をタップし、「インタラクティブ通信」を選択します。インタラクティブ通信の作成​ウィザードが表示されます。

3. 「タイトル」と「名前」フィールドに create_first_ic と入力します。FDM_Create_First_IC をフォームデータモデルとして選択し、「次へ」をタップします。

4. チャンネル​ウィザードで以下を実行します。

   1. create_first_ic_print_template を印刷テンプレートとして指定し、「選択」をタップします。「Web チャンネルのマスターとして印刷を使用」のチェックボックスが選択されていないことを確認してください。
   2. Create_First_IC_templates フォルダー／Create_First_IC_Web_Template を Web テンプレートとして指定し、「選択」をタップします。
   3. 「作成」をタップします。

   インタラクティブ通信が正常に作成されたことを示す確認メッセージが表示されます。

5. タップ 編集 をクリックして、右側のウィンドウでインタラクティブ通信を開きます。

6. 左側のペインから「チャンネル」タブをタップし、「Web」をタップします。

7. 「アセット」タブに移動してフィルターを適用し、左側のペインのドキュメントフラグメントだけを表示します。

8. 次のドキュメントフラグメントを、インタラクティブ通信のターゲット領域にドラッグ&ドロップします。

   ドキュメントフラグメント	ターゲット領域
   bill_details_first_ic	BillDetails
   customer_details_first_ic	CustomerDetails
   bill_summary_first_ic	BillSummary
   summary_charges_first_interactive_communication	料金

9. 請求概要​のターゲット領域をタップし、+ をタップして​グラフ​のコンポーネントを追加します。

10. グラフのコンポーネントをタップし、（設定）を選択します。グラフのプロパティが左側のペインに表示されます。

    1. グラフの名前を指定します。
    2. 「グラフのタイプ」ドロップダウンリストから「円グラフ」を選択します。
    3. X 軸​セクションの​通話​データモデルオブジェクトタイプから Calltype プロパティを選択します。 をタップします。
    4. 「関数」ドロップダウンリストから「頻度」を選択します。
    5. Y 軸​セクションの​通話​データモデルオブジェクトタイプから Calltype プロパティを選択します。 をタップします。
    6. をタップして、グラフのプロパティを保存します。

11. 左側のペインから「データソース」タブを選択し、通話​データモデルオブジェクトを​通話明細​のターゲット領域にドラッグアンドドロップします。通話​データモデルオブジェクトに含まれるすべてのプロパティが、右側のペインの​通話明細​のターゲット領域にテーブル列として表示されます。

    ユースケースに基づいて、テーブルには、通話日、通話時刻、通話番号、通話時間、そして通話料金の列が必要です。

    

12. Mobilenum テーブルの列見出しを選択し、追加のオプション／列の削除​の順に選択します。同様に、Calltype の列を削除します。

13. Calldate テーブル列見出しを選択し、「」をタップしてテキストの名前を「通話日」に変更します。同様に、テーブル内の他の列見出しの名前を変更します。

14. ユースケースに基づいて、 今すぐ支払う ボタンをクリックして支払いを行うオプションをユーザーに提供するインタラクティブ通信のボタン。 ボタンを挿入するには、次の手順を実行します。

    1. Pay Now のターゲット領域をタップし、+ をタップして​テキスト​のコンポーネントを追加します。
    2. テキストコンポーネントをタップし、「」をタップします。
    3. テキストの名前をに変更します。 今すぐ支払う.
    4. テキストを選択し、ハイパーリンクアイコンをタップします。
    5. 支払い URL を パス フィールドに入力します。
    6. 選択 新しいタブ から ターゲット 」ドロップダウンリストから選択できます。
    7. をタップして、ハイパーリンクのプロパティを保存します。

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

    

16. ハイパーリンクテキストのスタイルを設定し、インタラクティブ通信でボタンとして表示するには次の手順を実行します。

    1. テキストコンポーネントをタップし、「」を選択します。
    2. 内 境界線 セクション、指定 1.5px as 境界線の幅​を選択します。 実線 as 境界線のスタイル、を指定します。 46px as 境界線の半径.
    3. ボタンの背景色として、赤を 背景 」セクションに入力します。
    4. 内 余白 ～のフィールド Dimensionと位置 セクションで、 同時に編集 アイコンをクリックし、 右 余白 450px. 上、下、左のフィールドは空白に設定されます。

    

17. Pay Now のターゲット領域をタップし、+ をタップして​画像​のコンポーネントを追加します。

18. 画像のコンポーネントをタップし、（設定）を選択します。左側のペインにイメージのプロパティが表示されます。

    1. 指定 PayNow を 名前 フィールドに入力します。
    2. 「アップロード」をタップし、ローカルのファイルシステムに保存された PayNowWeb の画像を選択して「開く」をタップします。
    3. をタップして、画像のプロパティを保存します。

19. ユースケースに基づき、「登録」ボタンをインタラクティブ通信に挿入し、ユーザーがボタンをクリックして付加価値サービスを追加できるようにします。

    手順 13～17 を繰り返し、付加価値サービス ターゲット領域に「登録」ボタンを追加し、ValueAddedServicesWeb​画像を追加します。

自動同期を使用して印刷および Web 用のインタラクティブ通信を作成

印刷チャネルと Web チャネル間の自動同期を有効にして、インタラクティブ通信を作成することもできます。 自動同期を有効にするには、インタラクティブ通信の作成時に「マスターとして印刷」オプションを選択します。 「マスターとして印刷」オプションを選択すると、Web チャネルのコンテンツ、継承、データ連結が印刷チャネルから派生するようになります。 また、印刷チャネルで行った変更が Web チャネルに反映されるようにします。

印刷チャネルを使用して Web チャネルのコンテンツを派生させるには、次の手順を実行します。

1. AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／フォームとドキュメント​に移動します。

2. 「作成」をタップし、「インタラクティブ通信」を選択します。インタラクティブ通信の作成​ウィザードが表示されます。

3. 「タイトル」と「名前」フィールドに create_first_ic と入力します。FDM_Create_First_IC をフォームデータモデルとして選択し、「次へ」をタップします。

4. チャネル​ウィザードで以下を実行します。

   1. create_first_ic_print_template を印刷テンプレートとして指定し、「選択」をタップします。
   2. 「Web チャネルのマスターとして印刷を使用」チェックボックスを選択します。
   3. Create_First_IC_templates フォルダー／Create_First_IC_Web_Template を Web テンプレートとして指定し、「選択」をタップします。
   4. 「作成」をタップします。

   インタラクティブ通信が正常に作成されたことを示す確認メッセージが表示されます。

5. タップ 編集 をクリックして、右側のウィンドウでインタラクティブ通信を開きます。

6. 「印刷チャネル用のインタラクティブ通信の作成」セクションの手順 6 ～ 15 を実行します。

7. 左側のペインのタブから「チャネル」をタップし、「Web」をタップし、印刷チャネルから Web チャネル用にコンテンツを自動生成します。

8. 手順 4 で「Web チャネルのマスターとして印刷を使用」のチェックボックスを選択したので、コンテンツと連結は印刷チャネルから Web チャネル用に自動生成されます。

   印刷チャネルのコンテンツは、Web チャネルのテンプレートコンテンツの下に挿入されます。 印刷チャネルから自動生成された Web チャネルコンテンツを変更するには、任意のターゲット領域の継承をキャンセルします。

   Web チャネル内の関連するターゲット領域にカーソルを置いて （継承キャンセル）を選択し、継承をキャンセル​ダイアログで「はい」をタップします。

   

   コンポーネントの継承をキャンセルした場合は、その継承を再度有効にすることができます。継承をもう一度有効にするには、目的のコンポーネントが含まれているターゲット領域の境界線にカーソルを置いて をタップします。

9. を選択します。 コンテンツ 」タブをクリックします。

10. コンテンツツリーを使用して、自動生成された Web チャネルコンテンツを Web テンプレートの既存のパネルにドラッグ&ドロップします。 再配置が必要なコンポーネントのリストを次に示します。

    • 請求明細コンポーネントから請求詳細パネルへ
    • 顧客詳細コンポーネントから顧客詳細パネル
    • 請求要約コンポーネントから請求要約パネルへ
    • 料金コンポーネントの概要から料金パネルの概要へ
    • レイアウトフラグメント（表）を通話定義パネルに

    

11. 「Web チャネル用インタラクティブ通信の作成」の手順 13 ～ 18 を繰り返し、「Pay Now」（今すぐ支払う）および「登録」ハイパーリンクをインタラクティブ通信の Web チャネルに挿入します。

Business.Adobe.com リソース