Amazon Connect Streams APIのハンズオンをやってみた

目次
はじめに
スカイアーチHRソリューションズのhijikuroです!
この記事はAmazon Connect Advent Calendar 2023の23日目の記事です。
ギークフィードさん、クラスメソッドさん、スカイアーチHRソリューションズの有志によるカレンダーとなっております。
この記事では、Amazon ConnectのStreams APIのハンズオンを試してみた際の内容を書きます。
Streams APIとは
Amazon Connect において電話着信を受けるエージェントは、Contact Control Panel(CCP) というソフトフォンを利用します。CCP は標準でも通話や切断、保留、転送などの基本機能は持っていますが、デザインを変えたい、着信した時にお客様名をソフトフォン上に表示したい等のカスタマイズを行う場合は、AWS から無償で提供している API を使って実現が可能です。これが Amazon Connect Streams API(Streams) です。
Streams API とは
Streams APIについては、Black Beltの解説も参考になりました。
やってみた
こちらのハンズオン資料に沿って設定を進めます。
Amazon Connect内の設定
- コンタクトフローの作成
Amazon Connectインスタンス内のコンソール画面から「フロー」をクリックし、フローの画面で「フローを作成」を選択します。

フロー作成の画面から右上のドロップダウンリストをクリックし、「インポート(ベータ)」を選択します。

ハンズオン資料でダウンロードしたファイルから「Custom-CCP」を選択してインポートします。
下記のような画面が表示されるので、「保存」、「公開」をクリックします。

- 電話番号の設定
先ほど作成したフローを使用する電話番号と紐づけます。

- キューの設定
作成したフロー内でBasicQueueが設定されているので、BasicQueueに紐づける電話番号の設定をします。

- エージェントの作成
ユーザー管理の画面から新規でユーザーを作成します。

セキュリティプロファイルはAgentとAdminを選択し、ルーティングプロファイルはBasicQueueが紐づいているBasic Routing Profileをエージェントを選択、アフターコンタクトワーク(ACW)タイムアウトは3秒に設定します。

S3の設定
S3バケットを作成します。

CCPのURLを確認して、ハンズオン資料からダウンロードしたCCPCourse.jsの17行目を書き換えます。


作成したS3バケットにファイルをアップロードします。

CloudFrontの設定
CloudFrontコンソール画面からディストリビューションを作成します。
(オリジンアクセスの項目で「Origin access control settings (recommended)」を選択した場合は、手動でバケットポリシーを更新する必要がありました。)

ビューワープロトコルポリシーは「Redirect HTTP to HTTPS」を選択します。

WAFの項目は「セキュリティ保護を有効にしないでください」を選択し、デフォルトルートオブジェクトは「CCPCourse.html」を入力します。

ディストリビューションを作成し、ステータスが有効になったらドメイン名をコピーしておきます。

Amazon Connectインスタンスの設定
Amazon Connectのコンソール画面から使用するインスタンスを選択し、承認済みオリジンの画面から「ドメインを追加」をクリックし、CloudFrontで生成したドメイン名にhttps://を付けて登録します。

これで準備が整いました。
動作確認
ブラウザで承認済みオリジンに登録したドメインURLを開きます。
Amazon Connectのログイン画面に遷移し、サインイン後に下記のような画面が表示されました。
また、「Set Ready」のボタンをクリックし、Available状態にした後、対象電話番号にかけた電話を取れることも確認できました。

おわりに
カスタムCCPは難しそうな印象があったのですが、今回のハンズオンをやってみて設定自体は簡単にできることが分かりました。今回は触りの部分だけでしたが、今後は見た目や機能のカスタマイズにも挑戦してみたいと思います。