Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@echolimitless

【クラウド初心者向け】留守番電話4（録音した留守番電話を聴く）

Posted at

概要

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

使用ユーザー

  • IAMユーザー

手順

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

  1. AWSにサインインします。

    1. アカウント、ユーザー名、パスワードを入力してサインインします。
      アカウント内（IAM）で作成したユーザーを使用してコンソールにサインインする

  2. 『AWSマネジメントコンソール』画面の右上にある《リージョン名》をクリックし、ドロップダウンます。
    image.png

  3. 『AWSマネジメントコンソール』画面にある「サービスを検索」にCognitoと入力し、検索結果から《Cognito》をクリックし、Amazon Cognito コンソール（https://console.aws.amazon.com/cognito/）を開きます。
    image.png

  4. Cognitoの画面が表示されるので《IDプールの管理》をクリックします。
    image.png

  5. 以下の項目を選択、入力して《プールの作成》をクリックします。
    image.png

    1. IDプール名：適当な名前を入力します。
    2. 認証されていないIDに対してアクセスを有効にする：選択します。

  6. IAMロール作成確認画面が表示されるので《詳細を表示》をクリックします。
    image.png

  7. 未承認のロールを使用しますので、ロール名をメモしてから《許可》をクリックします。
    image.png

  8. サンプルコードの画面が表示されるので、「プラットフォーム」からJavaScriptを選択します。
    image.png

  9. AWS認証情報の取得に表示されている「region」と「IdentityPoolId」をメモします。
    image.png

  10. 作成したロールに必要な権限を付与するため、『AWSマネジメントコンソール』画面にある「サービスを検索」にIAMと入力し、検索結果から《IAM》をクリックし、IAM コンソール（https://console.aws.amazon.com/iam/）を開きます。
    image.png

  11. 『IAMコンソール』画面のメニューから《ロール》をクリックします。
    image.png

  12. ロール一覧から先ほど作成したロールをクリックします。
    image.png

    1. WAV変換後のデータをS3から取得するための権限
      1. Bucketに設定する権限
        1. ListBucket
        2. GetBucketTagging
      2. フォルダに設定する権限
        1. GetObject
        2. GetObjectTagging

  13. 選択したロールの概要が表示されるのでポリシー名の「▶」をクリックします。
    image.png

  14. 《ポリシーの編集》をクリックします。
    image.png

  15. ビジュアルエディタが表示されるので、登録されている権限の《削除》をクリックします。（今回は利用しないため）
    image.png

  16. 《さらにアクセス許可を追加する》をクリックします。
    image.png

  17. 《サービスの選択》をクリックします。
    image.png

  18. 「サービス」にS3と入力し、検索結果から《S3》をクリックします。
    image.png

  19. 「アクション」に今回利用するListBucketを入力し、《ListBucket》をクリックし、選択状態にします。
    image.png

  20. 「アクション」に今回利用するGetBucketTaggingを上書き入力し、《GetBucketTagging》をクリックし、選択状態にします。
    image.png

  21. 《リソース》をクリックします。
    image.png

  22. 《ARNの追加》をクリックします。
    image.png

  23. 以下の項目を選択、入力して《追加》をクリックします。
    image.png

    1. Bucket name：kinesis Video StreamsデータをWAVに変換したデータが保存されているS3のバケット名
      1. Bucket name：my-baseXXXXXXXXX

  24. 《さらにアクセス許可を追加する》をクリックします。
    image.png

  25. 《サービスの選択》をクリックします。
    image.png

  26. 「サービス」にS3と入力し、検索結果から《S3》をクリックします。
    image.png

  27. 「アクション」に今回利用するGetObjectを入力し、《GetObject》をクリックし、選択状態にします。
    image.png

  28. 「アクション」に今回利用するGetObjectTaggingを上書き入力し、《GetObjectTagging》をクリックし、選択状態にします。
    image.png

  29. 《リソース》をクリックします。
    image.png

  30. 《ARNの追加》をクリックします。
    image.png

  31. 以下の項目を選択、入力して《追加》をクリックします。
    image.png

    1. Bucket name：kinesis Video StreamsデータをWAVに変換したデータが保存してあるS3のバケット名
      1. Bucket name：my-baseXXXXXXXXX/my-voicemessageXXXXXXX/wav
    2. Object name：すべてにチェックを付ける（テキストボックスには*が入力される）

  32. 《ポリシーの確認》をクリックします。
    image.png

  33. 内容を確認して、《変更の保存》をクリックします。
    image.png

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

  • 以下のコードで各自で変える部分
    • 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>

  1. 留守番電話一覧画面で利用するアイコンをダウンロードするのでICOON MONOを開きます。
    image.png

  2. アイコンを検索するので検索欄に以下の文言を入力して検索します。
    image.png

    1. 検索文言：スピーカー

  3. 《可愛いスピーカーアイコン》をクリックします。
    image.png

  4. PNG形式のアイコンをダウンロードするので、サイズから《32px》を選択し、《PNG》をクリックします。
    image.png

  5. ファイル名を「listen.png」に変更して保存します。
    image.png

  6. アイコンを保存したフォルダにテキストファイルを作成し、開いて上記のindex.htmlをコピー＆ペーストします。

  7. 保存してテキストファイルを閉じます。

  8. テキストファイルの名前を「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>

  1. AWSにサインインします。

    1. アカウント、ユーザー名、パスワードを入力してサインインします。
      アカウント内（IAM）で作成したユーザーを使用してコンソールにサインインする

  2. 『AWSマネジメントコンソール』画面の右上にある《リージョン名》をクリックし、ドロップダウンます。
    image.png

  3. 『AWSマネジメントコンソール』画面にある「サービスを検索」にS3と入力し、検索結果から《S3》をクリックし、Amazon S3 コンソール（https://console.aws.amazon.com/s3/）を開きます。
    image.png

  4. S3のバケット一覧が表示されるので、《バケットを作成する》をクリックします。
    image.png

  5. 「バケット作成」画面が表示されるので、以下の項目を選択、入力して《次へ》をクリックします。
    image.png

    1. バケット名：世界中で一意になる名前を付ける
      1. my-hostingXXXXXXXXX
    2. リージョン：作成するを選択します。

  6. 適宜必要な設定を行い《次へ》をクリックします。
    image.png

    1. 今回はデフォルトのまま

  7. 適宜必要な設定を行い《次へ》をクリックします。
    image.png

    1. 今回はデフォルトのまま

  8. 設定内容を確認して《バケットを作成》をクリックします。
    image.png

  9. S3のバケット一覧が表示されるので、作成したバケットをクリックします。
    image.png

  10. 《アップロード》をクリックします。
    image.png

  11. 「アップロード」画面が表示されるので、ドラッグ＆ドロップまたは、《ファイルを追加》ボタンを押してindex.htmlとlisten.pngをアップロードします。
    image.png

  12. 指定したファイルを確認して、《次へ》をクリックします。
    image.png

  13. アクセス許可の設定を確認して、《次へ》をクリックします。
    image.png

    1. 今回はデフォルトのまま

  14. ストレージクラスの設定を確認して、《次へ》をクリックします。
    image.png

    1. 今回はデフォルトのまま

  15. 設定を確認して、《アップロード》をクリックします。
    image.png

  16. ファイルがアップロードされました。
    image.png

  17. S3にホスティングの設定を行うため《プロパティ》をクリックします。
    image.png

  18. 《Static website hosting》をクリックします。
    image.png

  19. 以下の項目を選択、入力して《保存》をクリックします。
    image.png

    1. このバケットを使用してウェブサイトをホストする：選択します。
    2. インデックスドキュメント：index.html

  20. このバケットをインターネットに公開するように設定するので《アクセス権限》をクリックします。
    image.png

  21. ブロックパブリックアクセスの設定を変更するので《編集》をクリックします。
    image.png

  22. 以下の項目を選択して《保存》をクリックします。
    image.png

    1. パブリックアクセスをすべてブロック

  23. 確認画面が表示されるので、以下の項目を入力して《確認》をクリックします。
    image.png

    1. 確認フィールド：確認

  24. 《バケットポリシー》をクリックします。
    image.png

  25. バケットポリシーエディターに上記のバケットポリシーを貼り付けて《保存》をクリックしてください。
    image.png

  26. 保存すると「パブリック」という表示がでます。これでインターネット上に公開されました。
    image.png

  27. kinesis Video StreamsデータをWAVに変換したデータが保存されているS3のバケットを開きます。
    image.png

  28. HTMLが保存されているバケットからJavaScriptでデータを取得できるようにするため《アクセス権限》をクリックします。
    image.png

  29. 《CORSの設定》をクリックします。
    image.png

  30. CORS 構成エディターに上記のCORS構成を貼り付けて《保存》をクリックしてください。
    image.png

  31. 留守番電話画面の動作を確認するため、パブリック設定にしたバケットを開きます。
    image.png

  32. 《プロパティ》をクリックします。
    image.png

  33. 《Static website hosting》をクリックします。
    image.png

  34. エンドポイントに表示されているURLをクリックします。
    image.png

  35. 留守番電話画面が表示されます。リストから聞きたいものを選択して《スピーカー》アイコンをクリックします。
    image.png

参考サイト

目次に戻る

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?