すべての構築ブロックを使ってインタラクティブ通信を作成する
このチュートリアルは、最初の対話型通信を作成するシリーズのステップです。 チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。
フォームデータモデル、ドキュメントフラグメント、テンプレート、Web 版用のテーマなどのすべての構築ブロックの作成が終わったら、インタラクティブ通信の作成を開始できます。
インタラクティブ通信は、印刷チャネルと Web チャネルという 2 つのチャネルを使用して配信することができます。また、印刷チャネルをマスターとしてインタラクティブ通信を作成することも可能です。印刷チャネルを 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 の順に選択します。を2回タップしてプロパティを保存します。
同様に、時刻、番号、時間、および料金のテキストフィールドについて、それぞれ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 | 料金 |
「Summary of Charges」ターゲット領域をタップし、+をタップしてグラフコンポーネントを追加します。
グラフコンポーネントをタップし、(設定)を選択します。 グラフのプロパティが左側のペインに表示されます:
左側のペインから「データソース」タブを選択し、通話 データモデルオブジェクトを通話明細のターゲット領域にドラッグアンドドロップします。callsデータモデルオブジェクトのすべてのプロパティは、右側のウィンドウの項目別の呼び出しターゲット領域に、テーブル列として表示されます。
ユースケースに基づいて、テーブルには、通話日、通話時刻、通話番号、通話時間、そして通話料金の列が必要です。
Mobilenumテーブルの列見出しを選択し、その他のオプション/列を削除を選択します。 同様に、Calltype の列を削除します。
Calldateテーブルの列見出しを選択し、 (Edit)をタップして、テキストの名前をCall Dateに変更します。 同様に、テーブル内の他の列見出しの名前を変更します。
ユースケースに基づき、「Pay Now」(今すぐ支払う)ボタンをインタラクティブ通信に挿入し、ユーザーがボタンをクリックして支払いを行えるようにします。ボタンを挿入するには、次の手順を実行します。
「プレビュー」オプションの隣にあるドロップダウンリストから「スタイル」を選択します。
ハイパーリンクテキストのスタイルを設定し、インタラクティブ通信でボタンとして表示するには次の手順を実行します。
「今すぐ支払うターゲット」領域をタップし、+をタップして画像コンポーネントを追加します。
画像コンポーネントをタップし、(設定)を選択します。 画像のプロパティが左側のペインに表示されます:
使用例に基づいて、対話型通信に購読ボタンを挿入します。このボタンをクリックすると、付加された値サービスを購読するオプションが表示されます。
手順13 ~ 17を繰り返して、Value Added Servicesターゲット領域にSubscribeボタンを追加し、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 チャネルに挿入します。