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

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

インタラクティブ通信のスタイル設定

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

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

インタラクティブ通信は、印刷チャネルと Web チャネルという 2 つのチャネルを使用して配信することができます。また、印刷チャネルをマスターとしてインタラクティブ通信を作成することも可能です。印刷チャネルを 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 料金

    create_first_ic_doc_fragments

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

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

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

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

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

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

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

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

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

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

  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. Summary of Charges​ターゲット領域をタップし、+​をタップして​グラフ​コンポーネントを追加します。

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

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

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

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

    table_ic_web

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

  13. Calldate​テーブルの列見出しを選択し、edit（「編集」）をタップして、テキストの名前を「Call Date」に変更します。 同様に、テーブル内の他の列見出しの名前を変更します。

  14. ユースケースに基づき、「Pay Now」（今すぐ支払う）ボタンをインタラクティブ通信に挿入し、ユーザーがボタンをクリックして支払いを行えるようにします。ボタンを挿入するには、次の手順を実行します。

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

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

    select_style_ic_web

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

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

    ic_web_hyperlink

  17. 「今すぐ支払う」​ターゲット領域をタップし、+​をタップして​画像​コンポーネントを追加します。

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

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

  19. 使用例に基づいて、インタラクティブ通信に​Subscribe​ボタンを挿入します。このボタンを使用すると、追加された値のサービスをボタンをクリックして購読できます。

    手順13 ～ 17を繰り返して、Subscribe​ボタンを​Value Added Services​のターゲット領域に追加し、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チャネルの関連するターゲット領域の上にマウスポインターを置いて、継承をキャンセル（継承をキャンセル）を選択し、継承をキャンセル​ダイアログで​はい​をタップします。

    cancel_inheritance_web_channel

    コンポーネントの継承をキャンセルした場合は、その継承を再度有効にすることができます。継承を再度有効にするには、コンポーネントを含む関連するターゲット領域の境界上にマウスポインターを置いて、再有効化の継承をタップします。

  9. 左側のペインで、「コンテンツ」タブを選択します。

  10. 自動生成された Web チャネルコンテンツを、コンテンツツリーを使用して Web テンプレートの既存のパネルにドラッグアンドドロップします。以下は配置を調節する必要があるコンポーネントの一覧です。

    • 請求明細コンポーネントを請求明細パネルに
    • 顧客情報コンポーネントを顧客情報パネルに
    • 請求内容コンポーネントを請求内容パネルに
    • 請求概要コンポーネントを請求概要パネルに
    • レイアウトフラグメント（テーブル）を通話明細パネルに

    ic_web_content_tree

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

このページ