翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Amazon Connect のフローブロック: ビューを表示
このトピックでは、エージェントが一貫したカスタマーエクスペリエンスを提供するために役立つステップバイステップのワークフローガイドと、インタラクティブなカスタマーエクスペリエンスを実現するためのガイドを作成するフローブロックを定義します。
## 説明
+ このフローブロックを使用して、以下を行います。
+ Amazon Connect エージェントワークスペースを使用しているエージェント向けの[ステップバイステップガイド](step-by-step-guided-experiences.md)を作成します。これらのガイドは、一貫した方法でお客様と対話するための手順をワークフロー形式でエージェントに案内します。
+ チャットエクスペリエンス内で顧客から情報を収集するフォームを作成します。
+ **[ビューを表示]** ブロックを含むフローにコンタクトがルーティングされると、[[ビュー]](view-resources-sg.md) という UI ページがエージェントワークスペースまたは顧客のチャット UI 内にレンダリングされます。
## このブロックのユースケース
このフローブロックは、エージェントに次の手順を案内するように設計されています。
+ 予約、支払い管理、新規発注など、一般的なタスクをお客様のために実行する。
+ テンプレートに基づいてメールを送信し、返金リクエストが送信されたことをお客様に知らせる。メールの構造は常に同じですが、注文番号、返金額、支払い口座など、具体的な値は変更できます。これらの情報をエージェントが提供できるように、[ビューを表示] ブロックを設定できます。
+ 既存のエージェントワークスペースに新しい CRM エントリを作成する。コンタクト属性を使用して、顧客の名前や電話番号などの関連情報をフォームにあらかじめ入力します。
また、チャット会話内のステップを通じて顧客をガイドし、以下のための支援を行います。
+ クレジットカード情報を提供して支払いを行います。
+ ホームアドレスなどの PII 情報を指定してプロファイルを更新します。
+ 顧客アカウント ID を指定してアカウント情報を受け取ります。
## コンタクトのタイプ
**[ビューを表示]** ブロックは、音声、チャット、E メール、タスクなど、任意のコンタクトタイプから ([[イベントフローの設定](set-event-flow.md)] ブロックで) 開始されるガイドフローで使用できます。顧客にガイドを示す場合は、メインチャットフローで **[ビューを表示]** ブロックを直接使用できます。
| コンタクトのタイプ | サポート対象? |
| --- | --- |
| 音声 | はい |
| Chat | はい |
| タスク | はい |
| E メール | はい |
## フロータイプ
このブロックは、次の[フロータイプ](create-contact-flow.md#contact-flow-types)で使用できます。
| フロータイプ | サポート対象? |
| --- | --- |
| 着信フロー | はい |
| 顧客保留フロー | いいえ |
| 顧客ウィスパーフロー | いいえ |
| アウトバウンドウィスパーフロー | いいえ |
| エージェント保留フロー | いいえ |
| エージェントウィスパーフロー | いいえ |
| エージェントへの転送フロー | いいえ |
| キューへの転送フロー | いいえ |
## このブロックの設定方法
**Show view** ブロックを設定するには、 Amazon Connect 管理ウェブサイトを使用するか、Amazon Connect Flow 言語の [ShowView](https://docs.aws.amazon.com/connect/latest/APIReference/participant-actions-showview.html) アクションを使用します。
**Topics**
+ [ビューリソースを選択する](#choose-viewresource)
+ [[手動で設定] オプションの使用方法](#view-setmanually)
+ [[動的に設定] オプションの使用方法](#view-setdynamically)
+ [[JSON を設定] オプションの使用方法](#show-view-block-example-json)
+ [このビューには機密データがあります](#showview-sensitive-data)
+ [フローブロックのブランチ](#showview-branches)
+ [追加の設定のヒント](#showview-tips)
+ [このブロックで生成されるデータ](#showview-data)
### ビューリソースを選択する
Amazon Connect には、エージェントのワークスペースを追加できる一連のビューが用意されています。**[表示]** ボックスでビューを指定します (下図を参照)。
![\[[ビューを表示] ブロックの [プロパティ] ページ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-form.png)
これらの AWS マネージドビューの簡単な説明を次に示します。各ビューの詳細については、「[Amazon Connect でエージェントのワークスペースの AWS マネージドビューを設定する](view-resources-managed-view.md)」を参照してください。カスタマーマネージドビューもサポートされています。詳細については、「[Customer-managed views](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/customer-managed-views-customer-managed-views--page)」ドキュメントを参照してください。
+ **詳細ビュー**: エージェントに情報を表示し、実行できるアクションのリストを示します。[Detail] ビューの一般的なユースケースは、通話の開始時にエージェントにポップアップを表示することです。
+ **リストビュー**: 項目 (タイトルと説明) を並べたリスト形式で情報を表示します。項目は、アクションを割り当てられたリンクとして機能する場合もあります。オプションで、標準のバックナビゲーションと永続的なコンテキストヘッダーもサポートしています。
+ **フォームビュー**: 必要なデータを収集してバックエンドシステムに送信するための入力フィールドを顧客とエージェントに提示します。このビューは、ヘッダー付きの定義済みのセクションスタイルを持つ複数のセクションで構成されます。本体は、列またはグリッドレイアウト形式で配置されたさまざまな入力フィールドで構成されています。
+ **確認ビュー**: フォームの送信後やアクションの完了後に顧客とエージェントに表示するページです。この事前構築されたテンプレートでは、何が起こったかの概要、次のステップ、およびプロンプトを提供できます。[Confirmation] ビューでは、固定属性バー、アイコン/画像、見出し、小見出し、ホームに戻るナビゲーションボタンがサポートされています。
+ **カードビュー**: エージェントにコンタクトが表示されたときに、選択できるトピックのリストを提示して、顧客とエージェントをガイドできます。
**[ビューを表示]** ブロックのプロパティは、選択した**ビュー**リソースに応じて動的に読み込まれます。例えば、**[Form]** を選択した場合は、**[Next]** アクションと **[Previous]** アクションを設定するため、これらが表示されます。これらはビューのアクションのほんの一部です。
![\[[表示] が [Form] に設定され、[バージョン] は 1 に設定されています。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-version2.png)
以降のセクションでは、**[Form]** アクションを手動で、動的に、または JSON オプションを使用して設定する方法について説明します。
### [手動で設定] オプションの使用方法
1. **[プロパティ]** ページの **[表示]** セクションで、ドロップダウンメニューから **[フォーム]** を選択し、**[バージョンを使う]** をデフォルトの [1] に設定します。次の図では、**[プロパティ]** ページでこれらのオプションが設定されています。
![\[[表示] が [Form] に設定され、[バージョン] は 1 に設定されています。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-version1.png)
1. **[プロパティ]** ページには、[Form] ビューに基づいて一連のフィールドが表示されます。**[手動で設定]** を選択し、ビュー UI コンポーネントにレンダリングするテキストを入力します。次の図には、**[Next]** と **[Previous]** の UI コンポーネントが表示されています。コンポーネントの表示名は手動で **[Next]** と **[Previous]** に設定されています。この名前が、ステップバイステップガイドのレンダリング時にエージェントワークスペースに表示されます。
![\[[Next] と [Previous] の UI コンポーネントが手動で設定されています。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-version2.png)
### [動的に設定] オプションの使用方法
1. **[プロパティ]** ページの **[表示]** セクションで、ドロップダウンメニューから **[フォーム]** を選択し、**[バージョンを使う]** をデフォルトの [1] に設定します。次の図では、**[プロパティ]** ページでこれらのオプションが設定されています。
![\[[表示] が [Form] に設定され、[バージョン] は 1 に設定されています。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-version1.png)
1. **[プロパティ]** ページには、[Form] ビューに基づいて一連のフィールドが表示されます。**[Set dynamically]** (動的に設定) を選択します。**[名前空間]** ドロップダウンメニューで、コンタクト属性を選択し、キーを選択します。次の図の **[見出し]** は、ステップバイステップガイドに動的にレンダリングされ、顧客の姓を表示します。
![\[ビュー UI テンプレートの見出し。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-dynamic.png)
### [JSON を設定] オプションの使用方法
このセクションでは、**[JSON を設定]** オプションの使用方法の例を説明します。
1. [ビューを表示] ブロックの **[プロパティ]** ページの **[ビュー]** セクションで、ドロップダウンメニューから **[フォーム]** を選択し、**[バージョン]** をデフォルトの **[1]** に設定します。これらのオプションは、次の画像に示されています。
![\[[表示] が [Form] に設定され、[バージョン] は 1 に設定されています。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-version1.png)
1. **[Form]** ビューを選択した場合、ビューの入力スキーマが **[プロパティ]** ページに表示されます。スキーマには、**[Sections]**、**[AttributeBar]**、**[Back]**、**[Cancel]**、**[Edit]**、**[ErrorText]** の各セクションがあり、情報を追加できます。
1. 次の図には、**[AttributeBar]** パラメータと **[JSON を設定]** オプションが表示されています。貼り付けた JSON をすべて表示するには、ボックスの隅をクリックして下にプルダウンします。
![\[入力パラメータ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-json.png)
**ヒント**
JSON が無効な場合は、エラーをすべて修正してください。以下の画像は、カンマが余分にあるため発生したエラーメッセージの例を示しています。
![\[JSON が無効であるというエラーメッセージ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-json-invalid.png)
1. カスタムビューを選択するときは、**[JSON を設定]** オプションを使用して動的入力の値を設定することもできます。これを行う場合は、**[サンプルデータを適用]** を選択して、サンプルデータを含む JSON スキーマを入力として事前に設定できます。
実行時に入力される UI ビルダーの動的データ (\$1.Channel など) の動的[参照を設定](no-code-ui-builder-properties-dynamic-fields.md)してください。
次の画像は、**[サンプルデータを適用]** オプションを示しています。
![\[[ビューを表示] ブロックの [サンプルデータを適用] オプション。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/apply-sample-data.png)
1. **[保存]** を選択して、準備ができたら公開してください。
次のコード例は、上記と同じ設定が、Flow 言語の [ShowView](https://docs.aws.amazon.com/connect/latest/APIReference/participant-actions-showview.html) アクションではどのように表現されるかを示しています。
```
{
"Parameters": {
"ViewResource": {
"Id": "arn:aws:connect:us-west-2:aws:view/form:1"
},
"InvocationTimeLimitSeconds": "2",
"ViewData": {
"Sections": "Sections",
"AttributeBar": [
{
"Label": "Example",
"Value": "Attribute"
},
{
"Label": "Example 2",
"Value": "Attribute 2"
},
{
"Label": "Example 3",
"Value": "Case 123456",
"LinkType": "case",
"ResourceId": "123456",
"Copyable":true
},
{
"Label": "Example 3",
"Value": "Case 123456",
"LinkType": "case",
"ResourceId": "https:example.com"
}
],
"Back": {
"Label": "Back"
},
"Cancel": {
"Label": "Cancel"
},
"Edit": "Edit",
"ErrorText": "ErrotText",
"Heading": "$.Customer.LastName",
"Next": "Next",
"Previous": "Previous",
"SubHeading": "$.Customer.FirstName",
"Wizard": {
"Heading": "Progress tracker",
"Selected": "Step Selected"
}
}
},
"Identifier": "53c6be8a-d01f-4dd4-97a5-a001174f7f66",
"Type": "ShowView",
"Transitions": {
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"Conditions": [
{
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"Condition": {
"Operator": "Equals",
"Operands": [
"Back"
]
}
},
{
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"Condition": {
"Operator": "Equals",
"Operands": [
"Next"
]
}
},
{
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"Condition": {
"Operator": "Equals",
"Operands": [
"Step"
]
}
}
],
"Errors": [
{
"NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
"ErrorType": "NoMatchingCondition"
},
{
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"ErrorType": "NoMatchingError"
},
{
"NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
"ErrorType": "TimeLimitExceeded"
}
]
}
}
```
### このビューには機密データがあります
クレジットカードデータ、自宅の住所、その他のタイプの機密データを顧客から収集するときは、**[このビューには機密データがあります]** を有効にすることをお勧めします。このオプションを有効にすると、顧客から送信されたデータはトランスクリプトやコンタクトレコードに記録されず、エージェントに表示されることもありません (デフォルトの場合)。**[ログ記録動作の設定]** がコンタクトフローでオンになっている場合は、ログ記録をオフにして、顧客の機密データがフローログに含まれないようにします。
![\[機密データビューのチェックボックス。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-form-sensitive-data.png)
**ヒント**
**[このビューには機密データがあります]** が有効になっている [ビューを表示] ブロック、Lambda 関数、およびプロンプトを使用して[フローモジュール](contact-flow-modules.md)を構築し、既存のインバウンドコンタクトフローに配置できる再利用可能な支払いエクスペリエンスモジュールを作成します。
### フローブロックのブランチ
次の図は、設定済みの **[ビューを表示]** ブロックの例を示しています。このブロックは条件分岐に対応しています。つまり、選択したビューによってブランチは異なります。また、**[エラー]** ブランチと **[タイムアウト]** ブランチにも対応しています。
![\[設定された [ビューを表示] ブロック。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/show-view-block-sq-config.png)
+ 条件分岐: これらのブランチは、**[ビューを表示]** ブロックで選択されているビューによって決まります。上図では、ブロックが **[Form]** ビュー用に設定され、**[戻る]**、**[次へ]**、**[一致なし]** というアクションが表示されています。
+ この特定の設定では、チャットのコンタクトは、ランタイムにエージェントがビューでクリックした対象に応じて、**[戻る]** または **[次へ]** のブランチにルーティングされます。**[一致なし]** は、ユーザーがカスタムアクション値のあるアクションコンポーネントを持っている場合のみ可能です。
+ **エラー**: 実行に失敗した (エージェントワークスペースでビューをレンダリングできない、またはビューの出力アクションを取得できない) 場合は、**[エラー]** ブランチに分岐します。
+ **タイムアウト**: ステップバイステップガイドのこのステップをエージェントが完了するまでの所要時間を指定します。[タイムアウト] の指定値よりもステップの完了に時間がかかった場合 (例えば、指定された時間内にエージェントが必要な情報を提供しなかった場合)、そのステップは [タイムアウト] ブランチに分岐します。
ステップがタイムアウトすると、ステップバイステップガイドはフローで定義されたロジックに従って次のステップを判定します。例えば、次のステップとして、あらためて情報の提示を求める、ガイドエクスペリエンスを停止するなどが考えられます。
この時点でお客様はエージェントとつながっているため、タイムアウトによるカスタマーエクスペリエンスの変化はありません。
### 追加の設定のヒント
このログ記録設定、このブロック、および Lambda を使用してフローモジュールを構築し、ログ記録をオフにしたままで、既存のインバウンドフローに配置できる再利用可能な支払いエクスペリエンスモジュールを作成します。
次のセキュリティプロファイル権限をエージェントに割り当ててください。エージェントがステップバイステップガイドを使用できるようになります。
+ **エージェントアプリケーション - カスタムビュー - すべて**: この権限を割り当てられたエージェントは、各自のエージェントワークスペースでステップバイステップガイドを見ることができます。
次のセキュリティプロファイル権限をマネージャーとビジネスアナリストに割り当ててください。これらの担当者がステップバイステップガイドを作成できるようになります。
+ **チャネルとフロー - ビュー**: この権限を割り当てられたマネージャーは、ステップバイステップガイドを作成できます。
既存のセキュリティプロファイルにアクセス許可を追加する方法については、「[Amazon Connect でセキュリティプロファイルを更新する](update-security-profiles.md)」を参照してください。
### このブロックで生成されるデータ
ランタイムに、**[ビューを表示]** ブロックは、ビューリソースの実行時に出力されるデータを生成します。ビューは主に次の 2 つのデータを生成します。
+ レンダリングされたビュー UI (エージェントワークスペース上) で実行された `Action` と、`Output` データである `ViewResultData`。
**[ビューを表示]** ブロックを使用する場合、**[アクション]** はブランチを表し、Views 名前空間の下位の `$.Views.Action` コンタクト属性に設定されます。
+ `Output` データは Views 名前空間の下位の `$.Views.ViewResultData` コンタクト属性に設定されます。
`Action` の値と `Output` データは、エージェントがビューリソースの使用中にやり取りしたコンポーネントによって決まります。
#### フローの各部でこのデータを使用する方法
+ ブロックはライアントアプリケーションからレスポンスを受け取ると、出力データをフローで参照するため、` `$.Views.Action` と `$.Views.ViewResultData` を使用します。
+ **[ビューを表示]** ブロックでビューを使用する場合、`Action` は Views 名前空間の下位のコンタクト属性 `$.Views.Action` で取得されたブランチを表し、ビューの出力データは `$.Views.ViewResultData` コンタクト属性に設定されます。
+ **[ビューを表示]** ブロックで生成されたデータを参照するには、コンタクト属性で JSON パスを使用するか ([手動で設定] または [JSON を設定] オプションでコンタクト属性を指定可能)、**[動的に設定]** を選択した場合は属性セレクターのドロップダウンを使用します。
## エラーシナリオ
**注記**
`ShowView` ブロックがエラーブランチ (一致なし、タイムアウト、エラー) に進んだ場合、フローをフロー内の前のポイントにルーティングできます。このようなループをフローに作成した場合、チャットコンタクトがタイムアウトするまで、コンタクトフローは無限に実行できます。`Loop` コンタクトフローブロックを使用して、特定の `ShowView` ブロックの再試行回数を制限することをお勧めします。
コンタクトは、次の状況で **[エラー]** ブランチへルーティングされます。
+ Amazon Connect は、エージェントワークスペースの View UI コンポーネントでユーザーアクションをキャプチャできません。この場合、断続的なネットワークの問題か、メディアサービス側の問題が原因として考えられます。
## フローログのエントリ
Amazon Connect フローログには、お客様との対話中にフローのイベントに関する詳細がリアルタイムで記録されます。詳細については、「[フローログを使用して Amazon Connect フローのイベントを追跡する](about-contact-flow-logs.md)」を参照してください。
ShowView の入力例 (入力ログ)
```
{
"ContactId": "string",
"ContactFlowId": "string",
"ContactFlowName": "string",
"ContactFlowModuleType": "ShowView",
"Timestamp": "2023-06-06T16:08:26.945Z",
"Parameters": {
"Parameters": {
"Cards": [
{
"Summary": {
"Id": "See",
"Heading": "See cancel options"
}
},
{
"Summary": {
"Id": "Change",
"Heading": "Change Booking"
}
},
{
"Summary": {
"Id": "Get",
"Heading": "Get Refund Status"
}
},
{
"Summary": {
"Id": "Manage",
"Heading": "Manage rewards"
}
}
],
"NoMatchFound": {
"Label": "Do Something Else",
"type": "bubble"
}
},
"TimeLimit": "300",
"ViewResourceId": "cards"
}
}
```
ShowView の出力例 (出力ログ)
```
{
"Results": "string",
"ContactId": "string",
"ContactFlowId": "string",
"ContactFlowName": "string",
"ContactFlowModuleType": "ShowView",
"Timestamp": "2023-06-06T16:08:35.201Z"
}
```
## サンプルフロー
ブログ「[Getting started with step-by-step guides](https://aws.amazon.com/blogs/contact-center/getting-started-with-step-by-step-guides-for-the-amazon-connect-agent-workspace/)」のステップ 2 からサンプルフローをダウンロードできます。このブログの手順を実行して、 AWSマネージドビューが設定されたフローの作成方法や、インバウンドのメディアコンタクトに対してこれらのフローを実行する方法を学ぶことをお勧めします。
## その他のリソース
ステップバイステップガイドとビューの詳細については、以下のトピックを参照してください。
+ [Amazon Connect エージェントワークスペースを設定するためのステップバイステップガイド](step-by-step-guided-experiences.md)
+ [Amazon Connect チャットで機密データ収集を実装する方法について説明します](https://aws.amazon.com/blogs/contact-center/collecting-sensitive-information-with-amazon-connect-chat/)。
+ 顧客管理ビューを設定するステップバイステップの手順については、「[Customer-managed Views](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/customer-managed-views-customer-managed-views--page)」を参照してください。
+ インスタンスにプラグアンドプレイのステップバイステップガイドエクスペリエンスを設定する方法については、「[Getting started with step-by-step guides](https://aws.amazon.com/blogs/contact-center/getting-started-with-step-by-step-guides-for-the-amazon-connect-agent-workspace/)」を参照してください。
+ [AWS-managed Views - Common Configuration](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-common-configuration--page)
+ [Views - UI Components](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-ui-components--page)
+ 「Amazon Connect API リファレンス**」の「[View actions](https://docs.aws.amazon.com/connect/latest/APIReference/view-api.html)」