概要

Amazon Connectには留守番電話機能は無いため個別に作成する。
基本の考え方等は『[Amazon Connect]営業時間外に着信したビジネスチャンスを失わないように留守番電話機能をつけてみた』をもとにしています。
S3でWebサイトをホスティングします。そこに留守番電話を聴くためのHTMLを配置します。
Cognito（コグニート）を利用してkinesis Video StreamsデータをWAVに変換したデータが保存されているバケットへアクセス権を付与します。
セキュリティには配慮していませんので、留守番電話を聴く画面にCoginito（コグニート）のキーを貼り付けて全世界に公開しています。

使用ユーザー

IAMユーザー

手順

Cognito（コグニート）による権限設定

AWSにサインインします。
1. アカウント、ユーザー名、パスワードを入力してサインインします。
  アカウント内（IAM）で作成したユーザーを使用してコンソールにサインインする
『AWSマネジメントコンソール』画面の右上にある《リージョン名》をクリックし、ドロップダウンます。
『AWSマネジメントコンソール』画面にある「サービスを検索」にCognitoと入力し、検索結果から《Cognito》をクリックし、Amazon Cognito コンソール（https://console.aws.amazon.com/cognito/）を開きます。
Cognitoの画面が表示されるので《IDプールの管理》をクリックします。
以下の項目を選択、入力して《プールの作成》をクリックします。
1. IDプール名：適当な名前を入力します。
2. 認証されていないIDに対してアクセスを有効にする：選択します。
IAMロール作成確認画面が表示されるので《詳細を表示》をクリックします。
未承認のロールを使用しますので、ロール名をメモしてから《許可》をクリックします。
サンプルコードの画面が表示されるので、「プラットフォーム」からJavaScriptを選択します。
AWS認証情報の取得に表示されている「region」と「IdentityPoolId」をメモします。
作成したロールに必要な権限を付与するため、『AWSマネジメントコンソール』画面にある「サービスを検索」にIAMと入力し、検索結果から《IAM》をクリックし、IAM コンソール（https://console.aws.amazon.com/iam/）を開きます。
『IAMコンソール』画面のメニューから《ロール》をクリックします。
ロール一覧から先ほど作成したロールをクリックします。
1. WAV変換後のデータをS3から取得するための権限
  1. Bucketに設定する権限
    1. ListBucket
    2. GetBucketTagging
  2. フォルダに設定する権限
    1. GetObject
    2. GetObjectTagging
選択したロールの概要が表示されるのでポリシー名の「▶」をクリックします。
《ポリシーの編集》をクリックします。
ビジュアルエディタが表示されるので、登録されている権限の《削除》をクリックします。（今回は利用しないため）
《さらにアクセス許可を追加する》をクリックします。
《サービスの選択》をクリックします。
「サービス」にS3と入力し、検索結果から《S3》をクリックします。
「アクション」に今回利用するListBucketを入力し、《ListBucket》をクリックし、選択状態にします。
「アクション」に今回利用するGetBucketTaggingを上書き入力し、《GetBucketTagging》をクリックし、選択状態にします。
《リソース》をクリックします。
《ARNの追加》をクリックします。
以下の項目を選択、入力して《追加》をクリックします。
1. Bucket name：kinesis Video StreamsデータをWAVに変換したデータが保存されているS3のバケット名
  1. Bucket name：my-baseXXXXXXXXX
《さらにアクセス許可を追加する》をクリックします。
《サービスの選択》をクリックします。
「サービス」にS3と入力し、検索結果から《S3》をクリックします。
「アクション」に今回利用するGetObjectを入力し、《GetObject》をクリックし、選択状態にします。
「アクション」に今回利用するGetObjectTaggingを上書き入力し、《GetObjectTagging》をクリックし、選択状態にします。
《リソース》をクリックします。
《ARNの追加》をクリックします。
以下の項目を選択、入力して《追加》をクリックします。
1. Bucket name：kinesis Video StreamsデータをWAVに変換したデータが保存してあるS3のバケット名
  1. Bucket name：my-baseXXXXXXXXX/my-voicemessageXXXXXXX/wav
2. Object name：すべてにチェックを付ける（テキストボックスには*が入力される）
《ポリシーの確認》をクリックします。
内容を確認して、《変更の保存》をクリックします。

留守番電話を聴く画面の作成

以下のコードで各自で変える部分
- AWS.config.region変数、AWS.config.credentials変数：先ほどメモした、CognitoのreagionとIdentityPoolIdを設定する
- bucketName変数、prefix変数に指定する値：kinesis Video StreamsデータをWAVに変換したデータが保存されているS3のバケット名とフォルダ名

index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Voice Mail Viewer</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
  </head>
  <body>
    <h1 id="time">留守番電話</h1>
     
    <audio id="sound" preload="auto">
    </audio>
 
    <table id="contents"/ border=1>
    <script>
        AWS.config.region = 'XXXXXXXXX'; 
        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: 'XXXXXXXXX:XXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        });
        const bucketName = 'my-baseXXXXXXXXX';
        const prefix = 'my-voicemessageXXXXXXXXX/wav/'
        const s3 = new AWS.S3();
 
        async function refresh(){
            const list = await s3.listObjects({Bucket: bucketName, Prefix: prefix}).promise();
            const keys = list.Contents.map(v => v.Key).filter( v => {
                if (v.indexOf('.wav') >= 0) {
                    return true;
                }
            });

            let items = await Promise.all(keys.map(async (key)=>{
                 
                // S3上のオブジェクトのタグ情報を取得する
                const tagging = await s3.getObjectTagging({Bucket: bucketName, Key: key }).promise();
                const customerEndpoint = tagging.TagSet.find((v => { return v.Key == "customerEndpoint"}))["Value"];
                const startTimestamp = Number(tagging.TagSet.find((v => { return v.Key == "startTimestamp"}))["Value"]);
 
                const item = {
                    customerEndpoint: customerEndpoint,
                    startTimestamp: dateString(new Date(startTimestamp)), // yyyy/mm/dd hh:mm
                    key: key
                };
                return item;
            }));
            // 録音時間でソートする
            items = items.sort((a, b) => b.startTimestamp - a.startTimestamp);
 
            const table = $("#contents");
            const tr = table.append($("<tr></tr>"))
            tr.append("<th>着信時間</th>")
            tr.append("<th>発信番号</th>")
            tr.append("<th></th>")
 
            // 一覧の表示
            items.forEach( item => {
                const customerEndpoint = $("<td></td>").text(item.customerEndpoint.replace("81","0"));
                const startTimestamp = $("<td></td>").text(item.startTimestamp);
                const listenButton = $("<td><img src=listen.png></td>").click(()=> {listen(listenButton,item.key)});
                const tr = table.append($("<tr></tr>"))
                tr.append(startTimestamp)
                tr.append(customerEndpoint)
                tr.append(listenButton)
            });
        }
 
        refresh();
 
        // スピーカーのアイコンをクリックした際にWAVファイルを取得する
        async function listen(element, key) {
            var params = {
                Bucket: bucketName,
                Key: key
            };
            const data = await s3.getObject(params).promise();
            var blob = new Blob([data.Body], {type : 'audio/wav'});
            element.html('<audio src=' + URL.createObjectURL(blob) + ' controls></audio>');
        }
 
        function dateString(date) {
            const year = date.getFullYear();
            const mon = (date.getMonth() + 1);
            const day = date.getDate();
            const hour = date.getHours();
            const min = date.getMinutes();
 
            const space = (n) => {
                return ('0' + (n)).slice(-2)
            }
 
            let result = year + '/';
            result += space(mon) + '/';
            result += space(day) + ' ';
            result += space(hour) + ':';
            result += space(min);
            return result;
        }
 
    </script>
</body>
</html>

留守番電話一覧画面で利用するアイコンをダウンロードするのでICOON MONOを開きます。
アイコンを検索するので検索欄に以下の文言を入力して検索します。
1. 検索文言：スピーカー
《可愛いスピーカーアイコン》をクリックします。
PNG形式のアイコンをダウンロードするので、サイズから《32px》を選択し、《PNG》をクリックします。
ファイル名を「listen.png」に変更して保存します。
アイコンを保存したフォルダにテキストファイルを作成し、開いて上記のindex.htmlをコピー＆ペーストします。
保存してテキストファイルを閉じます。
テキストファイルの名前を「index.html」に変更します。

留守番電話を聴く画面をホスティングするS3を作成

my-hostingXXXXXXXXX：作成したバケット名に変更してください。

バケットポリシー

{
   "Version":"2012-10-17",
   "Statement":[{
 	"Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
 	  "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::my-hostingXXXXXXXXX/*"
       ]
     }
   ]
 }

my-hostingXXXXXXXXX：作成したバケット名に変更してください。
reagionXXXXXX：作成したバケットのリージョン名に変更してください。

CORS構成

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://my-hostingXXXXXXXXX.s3-website-reagionXXXXXX.amazonaws.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>X-Amz-Content-Sha256</AllowedHeader>
    <AllowedHeader>X-Amz-Date</AllowedHeader>
    <AllowedHeader>x-amz-security-token</AllowedHeader>
    <AllowedHeader>X-Amz-User-Agent</AllowedHeader>
</CORSRule>
</CORSConfiguration>

AWSにサインインします。
1. アカウント、ユーザー名、パスワードを入力してサインインします。
  アカウント内（IAM）で作成したユーザーを使用してコンソールにサインインする
『AWSマネジメントコンソール』画面の右上にある《リージョン名》をクリックし、ドロップダウンます。
『AWSマネジメントコンソール』画面にある「サービスを検索」にS3と入力し、検索結果から《S3》をクリックし、Amazon S3 コンソール（https://console.aws.amazon.com/s3/）を開きます。
S3のバケット一覧が表示されるので、《バケットを作成する》をクリックします。
「バケット作成」画面が表示されるので、以下の項目を選択、入力して《次へ》をクリックします。
1. バケット名：世界中で一意になる名前を付ける
  1. my-hostingXXXXXXXXX
2. リージョン：作成するを選択します。
適宜必要な設定を行い《次へ》をクリックします。
1. 今回はデフォルトのまま
適宜必要な設定を行い《次へ》をクリックします。
1. 今回はデフォルトのまま
設定内容を確認して《バケットを作成》をクリックします。
S3のバケット一覧が表示されるので、作成したバケットをクリックします。
《アップロード》をクリックします。
「アップロード」画面が表示されるので、ドラッグ＆ドロップまたは、《ファイルを追加》ボタンを押してindex.htmlとlisten.pngをアップロードします。
指定したファイルを確認して、《次へ》をクリックします。
アクセス許可の設定を確認して、《次へ》をクリックします。
1. 今回はデフォルトのまま
ストレージクラスの設定を確認して、《次へ》をクリックします。
1. 今回はデフォルトのまま
設定を確認して、《アップロード》をクリックします。
ファイルがアップロードされました。
S3にホスティングの設定を行うため《プロパティ》をクリックします。
《Static website hosting》をクリックします。
以下の項目を選択、入力して《保存》をクリックします。
1. このバケットを使用してウェブサイトをホストする：選択します。
2. インデックスドキュメント：index.html
このバケットをインターネットに公開するように設定するので《アクセス権限》をクリックします。
ブロックパブリックアクセスの設定を変更するので《編集》をクリックします。
以下の項目を選択して《保存》をクリックします。
1. パブリックアクセスをすべてブロック
確認画面が表示されるので、以下の項目を入力して《確認》をクリックします。
1. 確認フィールド：確認
《バケットポリシー》をクリックします。
バケットポリシーエディターに上記のバケットポリシーを貼り付けて《保存》をクリックしてください。
保存すると「パブリック」という表示がでます。これでインターネット上に公開されました。
kinesis Video StreamsデータをWAVに変換したデータが保存されているS3のバケットを開きます。
HTMLが保存されているバケットからJavaScriptでデータを取得できるようにするため《アクセス権限》をクリックします。
《CORSの設定》をクリックします。
CORS 構成エディターに上記のCORS構成を貼り付けて《保存》をクリックしてください。
留守番電話画面の動作を確認するため、パブリック設定にしたバケットを開きます。
《プロパティ》をクリックします。
《Static website hosting》をクリックします。
エンドポイントに表示されているURLをクリックします。
留守番電話画面が表示されます。リストから聞きたいものを選択して《スピーカー》アイコンをクリックします。

参考サイト

目次に戻る

【クラウド初心者向け】Amazon Connectでコールセンターを作る