はじめに

こんにちは、サーバーワークスのディベロップメントサービス2課の池田です。
Amazon Connectを活用したコンタクトセンターの構築や運用において、ソフトフォンのカスタマイズ性と柔軟性は非常に重要です。今回の記事では、ソフトフォンのカスタマイズに欠かせないAmazon Connect Streamsのローカル環境で実行する手順を解説します。

Amazon Connect Streamsとは

Amazon Connect Streamsは、既存のウェブアプリケーションとAmazon Connectを統合するためのJavaScriptライブラリです。
これを使用することで、Contact Control Panel（CCP）のコンポーネントをウェブページに埋め込むことが可能になります。
また、エージェントやコンタクトの状態変化をイベント処理することもでき、カスタムなエージェント体験を構築する際に非常に有用です。

前提条件

Node.jsがインストール済みであること(今回はv20.16.0を利用)
connectのインスタンスが作成済みであること

手順

1. 必要なパッケージのインストール

まずは、amazon-connect-streamsライブラリをプロジェクトに追加します。今回はローカル起動するために、http-serverもインストールします。

npm init -y
npm install amazon-connect-streams http-server

2. HTMLファイルの作成

index.htmlファイルを作成して下記に編集します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="node_modules/amazon-connect-streams/release/connect-streams-min.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="container-div" style="width: 400px; height: 800px;"></div>
        <script type="text/javascript">
            var containerDiv = document.getElementById("container-div");
            // initialize the streams api
            function init() {
                // initialize the ccp
                connect.core.initCCP(containerDiv, {
                    ccpUrl: "[connectのAccess URL]/connect/ccp-v2/", // ConnectインスタンスのURL
                    loginPopup: true,        // ログインポップアップを有効にする
                    loginPopupAutoClose: true,  // ログイン完了後にポップアップを自動で閉じる
                    region: "ap-northeast-1",   // リージョンの設定
                    softphone: {
                        allowFramedSoftphone: true // ソフトフォンの埋め込みを許可
                    }
                });
            }
        </script>
    </body>
</html>

`connectのAccess URL`には下記赤枠のconnectのアクセスURLを記入します。
<figure class="figure-image figure-image-fotolife" title="connectのアクセスURL">[f:id:swx-tomoya-ikeda:20241107151633p:plain:w300]</figure>

3. 認証済みドメイン追加

aws コンソールのamazon connect画面にて承認済みドメイン→ドメインを追加をクリックして下記ドメインを追加します。
ドメイン:http://localhost:8080

4. ローカルサーバーの設定

http-serverを利用してサーバーを立ち上げます。

http-server .

5. 動作確認

ブラウザでhttp://localhost:8080にアクセスし、CCPが表示されるかを確認します。正常にアクセスできていれば下記画像のように表示されます。

おわり

今回の記事では、Amazon Connect Streamsをローカル環境で実行する手順について解説しました。
実運用の際には、CCPのカスタムページをAmazon S3にホスティングし、CloudFrontを使用してキャッシュや配信の最適化をご検討ください。
また、Amazon Connect Streamsは豊富なカスタマイズが可能です。具体的なカスタマイズ方法については、公式のDocumentationもご参照ください。ソフトフォンのレイアウト変更など、柔軟に設定を行うことができます。

弊社では、Amazon Connect Streamsを利用したカスタムCCPとしてクラウドコンタクトワークスペースを提供しております。コンタクトセンター構築の際に、ミニマムスタートプランと合わせて、ご検討ください。