AmazonConnectStreamsの初期セットアップ
AmazonConnectはCCP(オペレータ操作画面)がシンプルな作りになっている。
AmazonConnectStreams(API)を利用することで、自前のウェブアプリに組み込んだり機能を追加することが可能になるので、初期セットアップの手順を記載する。
今回はs3にjsファイルと読み込むhtmlファイルを配置する前提で記載する。
1.事前準備
①s3バケットの作成
s3バケットはwebアクセス可能とする為、パブリックアクセス有効で作成する。
②承認済みオリジンの追加
s3バケットのURLからAmazonConnectのCCPにアクセス可能とする為、承認済みオリジンの登録が必要になります。
※AmazonConnectStreamsの利用は、Https通信が必要になるのでアドレスはhttps:～～で記載すること。
2.amazon-connect-XXXX.jsの作成/配置
今回利用したバージョン(amazon-connect-1.4.9-1-gf9242a0.js)では、24459と24460行目の間に
改行が足りずjsの読み込みエラーとなった、「websocket-manager.js.map」の後ろに改行を入れることで解決した。
//# sourceMappingURL=amazon-connect-websocket-manager.js.map /* * Copyright 2014-2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. * * SPDX-License-Identifier: Apache-2.0 */
AmazonConnectStreamsではjsファイルを作成して、自前のウェブアプリ等で読み込んで利用します。
まずは、以下の手順でamazon-connect-XXXX.jsを作成します。
①Githubリポジトリのダウンロード
こちらのGithubリポジトリを任意のディレクトリにダウンロードします。
git clone git@github.com:amazon-connect/amazon-connect-streams.git
②amazon-connect-XXXX.jsをmakeコマンドで作成
cd amazon-connect-streams make
makeすると、以下のメッセージが表示され、同ディレクトリにamazon-connect-XXXX.jsファイルが作成されます。
cat src/aws-client.js src/sprintf.js src/log.js src/util.js src/event.js src/streams.js src/client.js src/transitions.js src/api.js src/lib/amazon-connect-websocket-manager.js src/core.js src/ringtone.js src/softphone.js src/worker.js src/mediaControllers/chat.js src/mediaControllers/softphone.js src/mediaControllers/factory.js >'amazon-connect-XXXX.js'
③s3バケットへamazon-connect-XXXX.jsファイルのアップロード
「amazon-connect-XXXX.js」と「s3バケット名」は自身の環境に書き換える。
aws s3 cp amazon-connect-XXXX.js s3://s3バケット名
④アップロードしたファイルの公開設定
アップロードしたamazon-connect-XXXX.jsファイルを公開設定にする。
3.htmlファイルの作成/配置
Githubリポジトリにサンプルコードがあるのでサンプルをベースに、自身の環境に書き換える。
①htmlファイルの作成
下記コードのハイライト行を書き換える。
・“amazon-connect-1.4.js”→amazon-connect-XXXX.jsの作成で作成したファイル名
・“https://my-instance-domain.awsapps.com/connect/ccp-v2/“→「my-instance-domain」を自身のインスタンスエイリアス名
・”eu-central-1”→AmazonConnectを作成したリージョン名
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<script type="text/javascript" src="amazon-connect-1.4.js"></script>
</head>
<!-- Add the call to init() as an onload so it will only run once the page is loaded -->
<body onload="init()">
<div id=containerDiv style="width: 400px;height: 800px;"></div>
<script type="text/javascript">
var instanceURL = "https://my-instance-domain.awsapps.com/connect/ccp-v2/";
// initialise the streams api
function init() {
// initialize the ccp
connect.core.initCCP(containerDiv, {
ccpUrl: instanceURL, // REQUIRED
loginPopup: true, // optional, defaults to `true`
region: "eu-central-1", // REQUIRED for `CHAT`, optional otherwise
softphone: { // optional
allowFramedSoftphone: true, // optional
disableRingtone: false, // optional
ringtoneUrl: "./ringtone.mp3" // optional
}
});
}
</script>
</body>
</html>
②htmlファイルのアップロード及び公開設定
jsファイルと同じs3バケットにindex.htmlファイルをアップロードし、ファイルを公開設定にする。
4.接続手順
アップロードしたindex.htmlのアドレスに接続すれば、CCP画面が表示されます。
※CCPにログインしていない場合、Amazonconnectのログイン画面がポップアップされ、ログインするとindex.html側でCCPの画面が表示されます。
CCPが表示されない場合は、下記の確認をお願いします。
①jsファイル、htmlファイルともs3で公開設定になっているか
②ポップアップがブロックされていないか
③coockieが無効になっていないか
→ 