はじめに

こんにちは！孔子の80代目子孫兼技術5課の孔です。ずっとIHコンロを使っていましたが、火力がほしいなと思い、最近ガスコンロを家に導入しました。すると、カスコンロを使うと鍋の取っ手が熱くなることを知らず、いつもどおり鍋の取っ手を掴んだらめちゃめちゃ加熱されてて一瞬で火傷をしてしまいました🥺絆創膏巻いたらタッチパッドが反応しなくなるという笑えない状況になってしまいましたが、泣いてても状況は改善されないので笑うことにしました。笑えばなんとかなります、はい。

それでは、参りましょう！

Amazon Connect Streams構築手順

最初に

Amazon Connect Streams API（以下Streams）は自前のウェブアプリにCCPを組み込むことができるAPIとなります。Streamsを使用するために、こちらのGithubリポジトリをダウンロードしましょう。Streamsは、makeが必要なため、最初にmakeコマンドを実行してください。そうするとamazon-connect-${version}.jsの名前のjsファイルが生成されます

$ git clone git@github.com:amazon-connect/amazon-connect-streams.git
$ cd amazon-connect-streams
$ make
$ ls -la amazon-connect-*.js
-rw-r--r--  1 kong  staff  936728 Apr 21 18:09 amazon-connect-1.4.7.js

index.htmlを作成

HTMLファイル内でJSを読み込めるように、index.htmlファイルを作成しましょう。以下のコードを使ってください。

<!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">
            const 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, default TRUE*/
                    region: "ap-northeast-1",           /*REQUIRED for chat, optional otherwise*/
                    softphone: {                /*optional*/
                        allowFramedSoftphone: true, /*optional*/
                        disableRingtone: false,     /*optional*/
                        ringtoneUrl: "./ringtone.mp3"   /*optional*/
                    }
                });
            }
        </script>
    </body>
</html>

instanceURLにAmazon Connectのインスタンス名を入力します。あとはオプションですので必要に応じてカスタマイズしてください。これで初期化は完了です。

補足ですが、各パラメータは以下のことを意味します。

ccpUrl : CCPのURLを指しています。Amazon ConnectのインスタンスのURLとなりますね。
loginPopup: CCPを使用するときにログインポップアップを出すか出さないかの設定です。デフォルトはTrue（出す）となります。
region: どのリージョンを使用するかの設定です。Amazon Connectでチャットを使うときは必須項目ですが、電話の際にはオプションとなります。
softphone: ソフトフォン関連しての設定項目です。開いてるウェブページでソフトフォンのコンポネントを許可するかどうか、着信音を鳴らすかどうか、鳴らすならどの音を鳴らすかなどの設定ができます。

HTTPS環境準備

Streamsを使用するためにはHTTPS環境でホスティングする必要があります。セキュリティが第一ですね。ですので、HTTPS環境を用意しましょう。今回はS3にホスティングし、CloudFrontで配信することでHTTPS環境を用意します。その方法はこちらのリンクを確認してください。CloudFrontでの配信ができるようになりましたら、次はアプリケーション統合が必要となります。