すべての構築ブロックを使ってインタラクティブ通信を作成する
これは、「最初のインタラクティブ通信の作成」シリーズを構成するチュートリアルです。チュートリアルの使用例を理解、実行、デモするために、時系列に従うことをお勧めします。
Web 版のフォームデータモデル、ドキュメントフラグメント、テンプレート、テーマなど、すべての構築ブロックを作成したら、インタラクティブ通信の作成を開始できます。
インタラクティブ通信は、次の 2 つのチャネルを通じて配信できます。印刷と 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
AEM オーサーインスタンスにログインし、Adobe Experience Manager/フォーム/フォームとドキュメントに移動します。
「作成」をタップし、「インタラクティブ通信」を選択します。インタラクティブ通信の作成ウィザードが表示されます。
「タイトル」と「名前」フィールドに create_first_ic と入力します。FDM_Create_First_IC をフォームデータモデルとして選択し、「次へ」をタップします。
チャンネルウィザードで以下を実行します。
インタラクティブ通信が正常に作成されたことを示す確認メッセージが表示されます。
タップ 編集 をクリックして、右側のウィンドウでインタラクティブ通信を開きます。
「アセット」タブに移動してフィルターを適用し、左側のペインのドキュメントフラグメントだけを表示します。
次のドキュメントフラグメントを、インタラクティブ通信のターゲット領域にドラッグ&ドロップします。
ドキュメントフラグメント | ターゲット領域 |
---|---|
bill_details_first_ic | BillDetails |
customer_details_first_ic | CustomerDetails |
bill_summary_first_ic | BillSummary |
summary_charges_first_interactive_communication | 料金 |
グラフのターゲット領域をタップし、+ をタップしてグラフのコンポーネントを追加します。
グラフのコンポーネントをタップし、(設定)を選択します。グラフのプロパティが左側のペインに表示されます。
「アセット」タブに移動してフィルターを適用し、左側のペインのレイアウトフラグメントだけを表示します。table_lf レイアウトフラグメントを通話明細のターゲット領域にドラッグアンドドロップします。
「日付」列のテキストフィールドを選択し、(設定)をタップします。
「連結タイプ」ドロップダウンリストから「データモデルオブジェクト」を選択し、calls/calldate の順に選択します。 をタップしてプロパティを保存します。
同様に、時刻、番号、時間、および料金のテキストフィールドについて、それぞれ calltime、callnumber、callduration、および callcharges との連結を作成します。
PayNow のターゲット領域をタップし、+ をタップして画像のコンポーネントを追加します。
画像のコンポーネントをタップし、(設定)を選択します。左側のペインにイメージのプロパティが表示されます。
手順 13~14 を繰り返し、ValueAddedServices の画像を ValueAddedServices のターゲット領域に追加します。
次に、このチュートリアルで既に作成済みで、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
AEM オーサーインスタンスにログインし、Adobe Experience Manager/フォーム/フォームとドキュメントに移動します。
「作成」をタップし、「インタラクティブ通信」を選択します。インタラクティブ通信の作成ウィザードが表示されます。
「タイトル」と「名前」フィールドに create_first_ic と入力します。FDM_Create_First_IC をフォームデータモデルとして選択し、「次へ」をタップします。
チャンネルウィザードで以下を実行します。
インタラクティブ通信が正常に作成されたことを示す確認メッセージが表示されます。
タップ 編集 をクリックして、右側のウィンドウでインタラクティブ通信を開きます。
左側のペインから「チャンネル」タブをタップし、「Web」をタップします。
「アセット」タブに移動してフィルターを適用し、左側のペインのドキュメントフラグメントだけを表示します。
次のドキュメントフラグメントを、インタラクティブ通信のターゲット領域にドラッグ&ドロップします。
ドキュメントフラグメント | ターゲット領域 |
---|---|
bill_details_first_ic | BillDetails |
customer_details_first_ic | CustomerDetails |
bill_summary_first_ic | BillSummary |
summary_charges_first_interactive_communication | 料金 |
請求概要のターゲット領域をタップし、+ をタップしてグラフのコンポーネントを追加します。
グラフのコンポーネントをタップし、(設定)を選択します。グラフのプロパティが左側のペインに表示されます。
左側のペインから「データソース」タブを選択し、通話データモデルオブジェクトを通話明細のターゲット領域にドラッグアンドドロップします。通話データモデルオブジェクトに含まれるすべてのプロパティが、右側のペインの通話明細のターゲット領域にテーブル列として表示されます。
ユースケースに基づいて、テーブルには、通話日、通話時刻、通話番号、通話時間、そして通話料金の列が必要です。
Mobilenum テーブルの列見出しを選択し、追加のオプション/列の削除の順に選択します。同様に、Calltype の列を削除します。
Calldate テーブル列見出しを選択し、「」をタップしてテキストの名前を「通話日」に変更します。同様に、テーブル内の他の列見出しの名前を変更します。
ユースケースに基づいて、 今すぐ支払う ボタンをクリックして支払いを行うオプションをユーザーに提供するインタラクティブ通信のボタン。 ボタンを挿入するには、次の手順を実行します。
「プレビュー」オプションの隣にあるドロップダウンリストから「スタイル」を選択します。
ハイパーリンクテキストのスタイルを設定し、インタラクティブ通信でボタンとして表示するには次の手順を実行します。
Pay Now のターゲット領域をタップし、+ をタップして画像のコンポーネントを追加します。
画像のコンポーネントをタップし、(設定)を選択します。左側のペインにイメージのプロパティが表示されます。
ユースケースに基づき、「登録」ボタンをインタラクティブ通信に挿入し、ユーザーがボタンをクリックして付加価値サービスを追加できるようにします。
手順 13~17 を繰り返し、付加価値サービス ターゲット領域に「登録」ボタンを追加し、ValueAddedServicesWeb画像を追加します。
印刷チャネルと Web チャネル間の自動同期を有効にして、インタラクティブ通信を作成することもできます。 自動同期を有効にするには、インタラクティブ通信の作成時に「マスターとして印刷」オプションを選択します。 「マスターとして印刷」オプションを選択すると、Web チャネルのコンテンツ、継承、データ連結が印刷チャネルから派生するようになります。 また、印刷チャネルで行った変更が Web チャネルに反映されるようにします。
印刷チャネルを使用して Web チャネルのコンテンツを派生させるには、次の手順を実行します。
AEM オーサーインスタンスにログインし、Adobe Experience Manager/フォーム/フォームとドキュメントに移動します。
「作成」をタップし、「インタラクティブ通信」を選択します。インタラクティブ通信の作成ウィザードが表示されます。
「タイトル」と「名前」フィールドに create_first_ic と入力します。FDM_Create_First_IC をフォームデータモデルとして選択し、「次へ」をタップします。
チャネルウィザードで以下を実行します。
インタラクティブ通信が正常に作成されたことを示す確認メッセージが表示されます。
タップ 編集 をクリックして、右側のウィンドウでインタラクティブ通信を開きます。
「印刷チャネル用のインタラクティブ通信の作成」セクションの手順 6 ~ 15 を実行します。
左側のペインのタブから「チャネル」をタップし、「Web」をタップし、印刷チャネルから Web チャネル用にコンテンツを自動生成します。
手順 4 で「Web チャネルのマスターとして印刷を使用」のチェックボックスを選択したので、コンテンツと連結は印刷チャネルから Web チャネル用に自動生成されます。
印刷チャネルのコンテンツは、Web チャネルのテンプレートコンテンツの下に挿入されます。 印刷チャネルから自動生成された Web チャネルコンテンツを変更するには、任意のターゲット領域の継承をキャンセルします。
Web チャネル内の関連するターゲット領域にカーソルを置いて (継承キャンセル)を選択し、継承をキャンセルダイアログで「はい」をタップします。
コンポーネントの継承をキャンセルした場合は、その継承を再度有効にすることができます。継承をもう一度有効にするには、目的のコンポーネントが含まれているターゲット領域の境界線にカーソルを置いて をタップします。
を選択します。 コンテンツ 」タブをクリックします。
コンテンツツリーを使用して、自動生成された Web チャネルコンテンツを Web テンプレートの既存のパネルにドラッグ&ドロップします。 再配置が必要なコンポーネントのリストを次に示します。
「Web チャネル用インタラクティブ通信の作成」の手順 13 ~ 18 を繰り返し、「Pay Now」(今すぐ支払う)および「登録」ハイパーリンクをインタラクティブ通信の Web チャネルに挿入します。