チュートリアル:インタラクティブ通信の作成 tutorial-create-interactive-communication

09-style-your-adaptive-form-small

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

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

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

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

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

同期を行わない、印刷および Web 用のインタラクティブ通信の作成 create-interactive-communications-for-print-and-web-with-no-synchronization

印刷チャネル用のインタラクティブ通信の作成 create-interactive-communication-for-print-channel

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

印刷テンプレート: 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. 次のドキュメントフラグメントを、インタラクティブ通信のターゲット領域にドラッグ&ドロップします。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    ドキュメントフラグメント ターゲット領域
    bill_details_first_ic BillDetails
    customer_details_first_ic CustomerDetails
    bill_summary_first_ic BillSummary
    summary_charges_first_interactive_communication 料金

    インタラクティブ通信用のドキュメントフラグメント

  8. 選択 グラフ ターゲット領域を選択し、 + を追加する グラフ コンポーネント。

  9. グラフコンポーネントを選択し、「 」を選択します。 configure_icon (設定)を参照してください。 グラフのプロパティが左側のペインに表示されます。

    1. グラフの名前を指定します。
    2. グラフのタイプ」ドロップダウンリストから「円グラフ」を選択します。
    3. X 軸 ​セクションの​ 通話 ​データモデルオブジェクトタイプから Calltype プロパティを選択します。選択 done_icon .
    4. 関数」ドロップダウンリストから「頻度」を選択します。
    5. Y 軸 ​セクションの​ 通話 ​データモデルオブジェクトタイプから Calltype プロパティを選択します。選択 done_icon .
    6. 選択 done_icon をクリックして、グラフのプロパティを保存します。
  10. アセット」タブに移動してフィルターを適用し、左側のペインのレイアウトフラグメントだけを表示します。table_lf レイアウトフラグメントを​ 通話明細 ​のターゲット領域にドラッグアンドドロップします。

  11. テキストフィールドを 日付 列と選択 configure_icon (設定)を参照してください。

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

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

  13. 選択 PayNow ターゲット領域を選択し、 + を追加する 画像 コンポーネント。

  14. 画像コンポーネントを選択し、「 」を選択します。 configure_icon (設定)を参照してください。 左側のペインにイメージのプロパティが表示されます。

    1. 指定 PayNow 画像の名前として 名前 フィールドに入力します。
    2. 選択 アップロード ​をクリックし、ローカルファイルシステムに保存されたイメージを選択し、「 」を選択します。 開く.
    3. 選択 done_icon をクリックして、画像のプロパティを保存します。
  15. 手順 13~14 を繰り返し、ValueAddedServices の画像を ValueAddedServices のターゲット領域に追加します。

Web チャネル用のインタラクティブ通信の作成 create-interactive-communication-for-web-channel

次に、このチュートリアルで既に作成済みで、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. 次のドキュメントフラグメントを、インタラクティブ通信のターゲット領域にドラッグ&ドロップします。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    ドキュメントフラグメント ターゲット領域
    bill_details_first_ic BillDetails
    customer_details_first_ic CustomerDetails
    bill_summary_first_ic BillSummary
    summary_charges_first_interactive_communication 料金
  9. 選択 料金の概要 ターゲット領域を選択し、 + を追加する グラフ コンポーネント。

  10. グラフコンポーネントを選択し、「 」を選択します。 configure_icon (設定)を参照してください。 グラフのプロパティが左側のペインに表示されます。

    1. グラフの名前を指定します。

    2. グラフのタイプ」ドロップダウンリストから「円グラフ」を選択します。

    3. X 軸 ​セクションの​ 通話 ​データモデルオブジェクトタイプから Calltype プロパティを選択します。選択 done_icon .

    4. 関数」ドロップダウンリストから「頻度」を選択します。

    5. Y 軸 ​セクションの​ 通話 ​データモデルオブジェクトタイプから Calltype プロパティを選択します。選択 done_icon .

    6. 選択 done_icon をクリックして、グラフのプロパティを保存します。

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

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

    インタラクティブ通信用テーブル

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

  13. を選択します。 Calldate 表の列見出しと「 」を選択します。 編集 (編集)テキストの名前をに変更します。 通話日. 同様に、テーブル内の他の列見出しの名前を変更します。

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

    1. 選択 今すぐ支払う ターゲット領域を選択し、 + を追加する テキスト コンポーネント。

    2. テキストコンポーネントを選択し、「 」を選択します。 編集 (編集)。

    3. テキストの名前をに変更します。 今すぐ支払う.

    4. テキストを選択し、ハイパーリンクアイコンを選択します。

    5. 支払い URL を パス フィールドに入力します。

    6. 選択 新しいタブ から Target 」ドロップダウンリストから選択できます。

    7. 選択 done_icon ハイパーリンクのプロパティを保存します。

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

    インタラクティブ通信のスタイルモードを選択

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

    1. テキストコンポーネントを選択し、「 」を選択します。 編集 (編集)。

    2. Adobe Analytics の 境界線 セクション、指定 1.5px as 境界線の幅 ​を選択します。 実線 as 境界線のスタイル、を指定します。 46px as 境界線の半径.

    3. ボタンの背景色として、赤を 背景 」セクションに入力します。

    4. Adobe Analytics の 余白 ~のためのフィールド Dimensionと位置 セクションで、 同時に編集 アイコンをクリックし、 次の余白 450px. 上、下、左のフィールドは空白に設定されます。

    インタラクティブ通信にハイパーリンクを挿入

  17. 選択 今すぐ支払う ターゲット領域を選択し、 + を追加する 画像 コンポーネント。

  18. 画像コンポーネントを選択し、「 」を選択します。 configure_icon (設定)を参照してください。 左側のペインにイメージのプロパティが表示されます。

    1. 指定 PayNow 画像の名前として 名前 フィールドに入力します。

    2. 選択 アップロード ​を選択し、 PayNowWeb ローカルファイルシステムに保存されたイメージを選択し、 開く.

    3. 選択 done_icon をクリックして、画像のプロパティを保存します。

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

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

自動同期を使用して印刷および Web 用のインタラクティブ通信を作成する create-interactive-communications-for-print-and-web-with-auto-synchronization

印刷チャネルと 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 チャネルの関連するターゲット領域にカーソルを合わせ、「 」を選択します。 cancelinherance (継承をキャンセル)、 継承をキャンセル ダイアログ、選択 はい.

    継承のキャンセル

    コンポーネントの継承をキャンセルした場合は、その継承を再度有効にすることができます。継承を再度有効にするには、コンポーネントを含む関連するターゲット領域の境界線にカーソルを合わせ、「 」を選択します。 reenableinheritance .

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

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

    • 請求明細コンポーネントから請求詳細パネルへ
    • 顧客詳細コンポーネントから顧客詳細パネルへ
    • 請求要約コンポーネントから請求要約パネルへ
    • 料金コンポーネントの概要から料金パネルの概要へ
    • レイアウトフラグメント(表)を呼び出し定義パネルに

    Web コンテンツツリー

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2