CI部の村上です。思い返せば先週は2回しか外へ出ていない（うち1回はゴミ捨て）ことに気が付いたのですが、なんかもう平気になっている今日この頃です。

さて、以前に「履歴メトリクスでなにができるの？」というブログで、Amazon Connectで構築したコンタクトセンターでは、通話やエージェント（オペレータのこと）の行動が簡単に照会・分析できることを紹介しました。

ただし履歴メトリクスや問い合わせ検索が閲覧できるのは、デフォルトでは管理者などの特定のユーザーに限られています。

基本的にエージェントは、以下のようなソフトフォン（CCP）にアクセスして電話対応を行うのですが、Amazon Connect StreamsというAPIを使えば、CCPを自前のウェブアプリに組み込んでカスタマイズすることが可能です。

Amazon Connect Streamsの設定については、本記事とは別に名著がありますので、そちらをご覧ください。
Amazon Connect Streamsを使ってみよう

この記事は、「Amazon Connect Streamsを体験してみる」をテーマに書いていこうと思います。

まずは初期設定のおさらい

Amazon Connect StreamsはhtmlファイルからJSを読み込んで使用します。Amazon Connect Streamsを使ってみようのブログでも紹介されていますが、最初は下記のようなコードかと思います。

<!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>

Amazon Connect Streamsでは、GitHubに載っているAPIからエージェントやコールに関するイベントを取得して、各種メソッドを実行します。

ということで、さわってみる

「まずは簡単なものを実装しよう」と思いながらGitHubをみていると、エージェントイベントの中で、agent.onAfterCallWork()なるものを見つけました。

見てのとおり、エージェントが電話を切ったときに使えるAPIだと分かったので、これを使ってみることにします。

とりあえず、エージェントが電話を終えたら「お疲れ様」とメッセージを出す小粋な計らいをしてみたいと思い、やってみました。

connect.agent(function(agent) {    
    agent.onAfterCallWork(function(agent) { 
        alert("お疲れ様") 
    });
});

出来栄えはこんな感じです。

労われている感が皆無だったので、すぐに消しましたが、やりたかったことはできました。

このようにして、エージェントがお客様からの電話を切ったときに行いたい処理を記述すれば、他にもいろいろなことができそうですね。

着信履歴を表示してみる

つづいてContact APIにあるcontact.onConnected()（通話状態になったときに使うAPI）、contact.onMissed()（通話前に相手が電話を切ったときなどに使うAPI）の2つに注目しました。

というのも、デフォルトのままCCPを使っていると、通話中あるいはアフターコールワークの時にしかお客様の電話番号がCCPに表示されず、ちょっと不便かなと思ったからです。

まずは問い合わせフローの中で、「問い合わせ属性の設定」ブロックを使い、phonenumberというキーでお客様の電話番号を取得します。

次に、着信があった日時を表示するためにDateオブジェクトを書きます。

var now = new Date();
var Year = now.getFullYear();
var Month = now.getMonth()+1;
var Day = now.getDate();
var Hour = now.getHours();
var Min = now.getMinutes();

最後に、contact.onConnected()とcontact.onMissed()の処理を書きます。コンタクト属性の参照方法はAWSホームページにある「Amazon Connect スクリーンポップに発信者のコンタクト属性を表示するにはどうすればよいですか?」を参考にしました。htmlに<ul>タグを書いておいて、その中に着信履歴が表示されるようにしています。あと、着信履歴の表示にはBootstrapのボタンを使っています。

connect.contact(function(contact) {
    contact.onConnected(function() {
        var attributeMap = contact.getAttributes();
        var phonenumber = JSON.stringify(attributeMap["phonenumber"]["value"]);
        var button = document.createElement("button");
        button.className = "btn btn-primary btn-lg btn-block";
        button.textContent = Year + "年" + Month + "月" + Day + "日" + Hour + ":" + Min + "    通話：" + phonenumber;
        var ul = document.querySelector("ul");
        ul.appendChild(button);
    });

    contact.onMissed(function(contact) {
        var attributeMap = contact.getAttributes();
        var phonenumber = JSON.stringify(attributeMap["phonenumber"]["value"]);
        var button = document.createElement("button");
        button.className = "btn btn-danger btn-lg btn-block";
        button.textContent = Year + "年" + Month + "月" + Day + "日" + Hour + ":" + Min + "    不在着信：" + phonenumber;
        var ul = document.querySelector("ul");
        ul.appendChild(button);
    });
});

出来栄えはこんな感じです。