Amazon Connect Streamsの初期セットアップ手順
事業開発部の酒匂です。
以前にAmazon ConnectとSFDCを連携させる手順について書きました。
Amazon ConnectはSFDC以外のアプリ（ウェブアプリである必要がある）とも連携することができます。
そこで今回は、自前のウェブアプリと連携させる場合の初期セットアップの手順までを記載いたします。
Amazon Connect Streamsとは
Amazonがオープンソースとして公開しているAmazon Connectとウェブアプリを連携するためのJavaScriptライブラリです。
これによって、Contact Control Panel (CCP) UI コンポーネントをアプリ画面上に埋め込むができ、イベントドリブンなインターフェースを通じてエージェントや呼の状態を取得することができるようになります。
Amazon Connect Streamsのアーキテクチャー
ハイレベルなアーキテクチャーとしては、Amazon Connect StreamsのライブラリがAmazon Connect側のCTIサービスとアプリ（図のCRM System Integrationとなっている部分）の間に入り、互いに通信することで、連携できるようになっております。
https://github.com/aws/amazon-connect-streams/blob/master/Architecture.mdの図を転載
Amazon Connect Streamsのライブラリとアプリの連携については、アプリに埋め込まれたCCP（図のCCP IFrameConduitとなっている部分）から発行されるイベント情報をアプリ側が取得するように実装することで、Amazon Connect側のイベント情報を取得できるようになります（図のUser Defined Event Handlersの部分）。
また、アプリ側からAmazon Connect StreamsのライブラリのAPIを呼び出すことで、Amazon Connectの機能を利用することができるようになります（図のUser Defined CRM Codeの部分）。
https://github.com/aws/amazon-connect-streams/blob/master/Architecture.mdの図を転載
利用例
Amazon Connectからイベントを受信したり、アプリからAmazon Connectの機能を呼び出したりすることで、以下のような機能をアプリに実装することができます。
- 着信したら顧客情報の検索を行い、画面上に表示する
-
通話が終了したら、通話履歴を登録する画面を表示する
-
キャンペーンでアウトバウンド対象の顧客に電話をかけていく
電話の操作画面は、アプリ上に埋め込んだContact Control Panel (CCP)を使いますが、CCPを非表示にして同様のものを自作することもできます。
初期セットアップ
ホワイトリストへの登録
アプリのContact Control Panel (CCP)を埋め込む画面のプロトコルスキーム、ホスト 、ポートをAmazon Connectの管理画面上に登録します。
Amazon Connectの管理画面上から対象の"インスタンスエイリアス"を選択します。
"アプリケーション統合"を選択し、"オリジンの追加"を選択します。
プロトコルスキーム、ホスト 、ポートを入力します。
Amazon Connect Streamsのダウンロード
ソースコードをダウンロードし、.jsファイルを生成します。
Githubからソースコードをcloneします。
$ git clone https://github.com/aws/amazon-connect-streams
ディレクトリを移動します。
$ cd amazon-connect-streams
.jsファイルを生成します。
$ make
amazon-connect-streamsフォルダの直下に"connect-streams-${VERSION}.js"形式のファイルが存在していることを確認します。 2017年12月22日現在ですと、"amazon-connect-v1.2.0.js"というファイルが生成されます。
Contact Control Panel (CCP)の初期化
htmlファイルの作成
CCPを埋め込む画面用にHTMLファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>amazon connect streams sample</title>
<script src="amazon-connect-v1.2.0.js"></script>
</head>
<body>
<div id="containerDiv" style="width: 320px; min-width: 200px; height: 465px; min-height: 400px;"></div>
<script>
//CCPのURLを設定する
var ccpUrl = "https://hogehoge.awsapps.com/connect/ccp#/";
connect.core.initCCP(containerDiv, {
ccpUrl: ccpUrl,
loginPopup: true,
softphone: {
disableRingtone: true,
ringtoneUrl: ringtoneUrl,
allowFramedSoftphone: true
}
});
</script>
</body>
</html>
Github上のREADME.mdを読んだだけでは、connect.core.initCCP()メソッドの第一引数のcontainerDivにどんな値を渡せば良いのか分からなかったので、ソースを読んで確認しました。
ここで指定したconnect.core.initCCPの子要素として<iframe></iframe>を追加し、そこにCCPがロードされますので、CCPをロードさせたい要素のオブジェクトを渡します。
→CCPをロードさせたいdivタグにid="containerDiv"を指定すれば表示できましたので、上記HTMLを修正しました。
htmlファイル、connect-streams-${VERSION}.jsをWEBサーバー上に設置
上記の手順で用意したhtmlファイルとconnect-streams-${VERSION}.jsをWEBサーバー上に設置します。
今回は静的ファイルを置くだけなので、S3上に置きました。
動作確認
ブラウザからHTMLページへアクセスします。
ポップアップブロックが出ましたら、下記のように許可してください。
CCPへのログイン認証が済んでいない場合は、別タブでCCPへのログイン画面が表示されますので、ログインを行います。
ログインが完了すると、HTML画面上にCCPがロードされます。
おわりに
今回は初期セットアップまでの手順を記載いたしましたが、今後はAmazon Connectからのイベント受信や、機能の呼び出し手順について書いていきたいと思います。
