目次

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が無効になっていないか

  →