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

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

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

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

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

1. create_first_ic_print_template を印刷テンプレートとして指定し、「選択」を選択します。「Web チャンネルのメインとして印刷を使用」のチェックボックスが選択されていないことを確認してください。

2. Create_First_IC_templates フォルダー／Create_First_IC_Web_Template を web テンプレートとして指定し、「選択」を選択します。

3. 「作成」を選択します。

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

「編集」を選択し、右側のパネルでインタラクティブ通信を開きます。

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

以下のドキュメントフラグメントをインタラクティブ通信のターゲット領域にドラッグ＆ドロップします。

グラフ ​のターゲット領域を選択し、「+」を選択して​ グラフ ​のコンポーネントを追加します。

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

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

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

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

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

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

Pay Now のターゲット領域を選択し、「+」を選択して​ 画像 ​のコンポーネントを追加します。

画像のコンポーネントを選択し、 （設定）を選択します。画像のプロパティが左側のパネルに表示されます。

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

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

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

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

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

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

1. create_first_ic_print_template を印刷テンプレートとして指定し、「選択」を選択します。「Web チャンネルのメインとして印刷を使用」のチェックボックスが選択されていないことを確認してください。

2. Create_First_IC_templates フォルダー／Create_First_IC_Web_Template を web テンプレートとして指定し、「選択」を選択します。

3. 「作成」を選択します。

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

「編集」を選択し、右側のパネルでインタラクティブ通信を開きます。

左側のパネルから「チャネル」タブを選択し、「Web」を選択します。

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

以下のドキュメントフラグメントをインタラクティブ通信のターゲット領域にドラッグ＆ドロップします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. 「パス」フィールドで支払い URL を指定します。

6. ターゲット ​ドロップダウンリストから「新規タブ」を選択します。

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

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

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

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

2. 「境界線」セクションで、境界線の幅 ​を 1.5px に指定します。境界線のスタイル ​として​ 実線 ​を選択し、境界線の半径 ​を 46px に指定します。

3. 「背景」セクションから、ボタンの背景色に赤を選択します。

4. 「寸法と位置」セクションの「余白」フィールドで、「同時に編集」アイコンを選択して、右 ​の余白を 450px に設定します。上、下、左のフィールドは空白に設定されます。

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

画像コンポーネントを選択し、 （設定）を選択します。画像のプロパティが左側のパネルに表示されます。

1. 「名前」フィールドで、「PayNow」を画像の名前として指定します。

2. 「アップロード」を選択し、ローカルのファイルシステムに保存された PayNowWeb の画像を選択して「開く」を選択します。

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

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

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

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

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

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

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

1. create_first_ic_print_template を印刷テンプレートとして指定し、「選択」を選択します。

2. 「Web チャネルのマスターとして印刷を使用」チェックボックスを選択します。

3. Create_First_IC_templates フォルダー／Create_First_IC_Web_Template を web テンプレートとして指定し、「選択」を選択します。

4. 「作成」を選択します。

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

「編集」を選択し、右側のパネルでインタラクティブ通信を開きます。

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

左側のパネルから「チャネル」タブを選択し、「Web」を選択し、印刷チャネルから web チャネル用にコンテンツを自動生成します。

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

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

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

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

左側のパネルで「コンテンツ」タブを選択します。

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

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

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