LINE ClovaとAmazon Connectでリアルゾンビのまちを作ってみた

VoiceAppLabさんがリリースしている[ゾンビのまち](https://voiceapp-lab.com/apps/zombie/)というのがあるのですが、
演出もリアルで今存在しているVUI向けゲームスキルでは群を抜く出来栄えです。

そのスキルはプレイヤーが知らない電話番号に電話をして、
偶然ケンタくんに繋がるところから物語がスタートします。

そのオープニングの演出を実際の携帯電話にかかってきたら怖さ倍増するんじゃないかと思い、
リアルゾンビのまちとして作ってみました。

# サンプル動画
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Amazon Connectを使ってVoiceAppLabさんのリアル「ゾンビのまち」を作ってみた。 <a href="https://t.co/Nc93l6B9YJ">pic.twitter.com/Nc93l6B9YJ</a></p>&mdash; がおまる@スマートスピーカーアプリ開発入門発売中！ (@gaomar) <a href="https://twitter.com/gaomar/status/1120690898898055168?ref_src=twsrc%5Etfw">April 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 1. Amazon Connectのセットアップ
## 1-1. Amazon Connectの準備
AWSにログインしてサービスから`Amazon Connect`を選択します。
<img width="1071" alt="s100.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/2cca8001-f0b0-bb6f-0d93-591be9c0aa6e.png">

`今すぐ始める`をクリックしてください。
<img width="1274" alt="s101.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/179f0483-c3d8-6848-ef2f-eff11aeed367.png">

東京リージョンになっていない方は`アジアパシフィック（東京）`を選択します。
アクセスURLは好きな名前を決めてください。
<img width="1309" alt="s102.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/f32459fd-00c5-4eee-7f48-de7dc089446e.png">

名前を決めたら、他の選択肢はデフォルトのまま進めて、［インスタンスの作成］ボタンをクリックします。
<img width="1278" alt="s109.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/93db735e-01da-fe3a-18eb-c49287557768.png">

インスタンスが作成できたら、［今すぐ始める］をクリックします。
<img width="900" alt="s110.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/cdff3fd1-b13d-ab19-4f4e-413f8356f87d.png">

## 1-2. 電話番号を取得する
Amazon Connect専用の電話番号を手に入れます。
別のタブでAmazon Connect用の画面が表示されるので、そこに表示されている［今すぐ始める］ボタンをクリックします。
<img width="1321" alt="s111.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/306cf391-3082-e3fd-e801-45b45b7743cf.png">

電話番号の取得で、国は`Japan +81`を選択します。
<img width="1171" alt="s112.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/1b18829a-16d7-154d-0e76-91fea5c03b59.png">

次のタイプは2種類あります。お好きな方を選んでください。

| タイプ       |       特徴 |
|:-----------------|:------------------|
| Direct Dial             | 050番号が取得できる。発信者が通話料負担する。 |
| Toll Free             | 0800番号が取得できる。発信者の通話料無料（フリーダイヤル）開発者が負担する。 |
<img width="1173" alt="s113.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/3ed226b1-4142-0705-76bc-b0c683793041.png">

最後にお好きな番号を選択して、［次へ］ボタンをクリックします。
<img width="1166" alt="s114.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/39aec562-a34f-fab6-65bb-bb72c5ea1c58.png">

［Continue］ボタンをクリックします。
<img width="1238" alt="s115.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/4402aa2f-b739-72ad-1b0f-8940716476f5.png">

## 1-3. 再生するファイルをアップロードする
左側メニューにあるルーティングカテゴリの`プロンプト`をクリックします。
<img width="402" alt="s201.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/7b9012cd-dd61-9618-0f69-8671875dcfea.png">

［プロンプトの新規作成］をクリックします。
<img width="534" alt="s202.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/a97da56e-0155-5d9d-fe8a-7b9ac57a5df3.png">

再生する音声ファイルをアップロードします。対応しているファイルは`.wav`ファイルのみです。
<img width="1016" alt="s203.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/b5edc937-7dbb-a547-28c3-d7d638cc53d4.png">

## 1-4. 問い合わせフローを作成する
左側メニューにあるルーティングカテゴリの`問い合わせフロー`をクリックします。
<img width="311" alt="s200.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/2f1bf176-23ae-ba41-c218-53f977770739.png">

［問い合わせフローの作成］ボタンをクリックします。
<img width="1009" alt="s131.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/f149501c-6893-b0de-7239-d95a9ce161d3.png">

問い合わせフローの名前を最初に設定しておきます。今回は `LINEBotCall` としました。
<img width="420" alt="s204.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/3911e380-3a41-1a07-3614-5b1bf2246128.png">

操作カテゴリにある`プロンプトの再生`をドラッグアンドドロップして、そのブロックをクリックします。
<img width="724" alt="s205.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/c391a5b4-5d81-b15f-784d-c1cfe0b16923.png">

1-3でアップロードしたwavファイルを指定します。
<img width="470" alt="s206.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/5d3fab31-a212-c564-1112-2da3d95d3bc4.png">

ブロックを線で繋ぎます。
<img width="365" alt="スクリーンショット 2019-04-26 15.29.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/3752b0d8-bb96-cd4b-6141-fe71640d8102.png">

終了/転送カテゴリの`切断/ハングアップ`をドラッグアンドドロップします。
<img width="934" alt="s208.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/4dfd9a70-821e-8e62-6425-3a5a5f041b86.png">

ブロックを線で繋いで、［保存して発行］ボタンをクリックします。
<img width="928" alt="s209.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d6746818-0cda-1f25-9e32-e2205df6067e.png">

`追加のフロー情報の表示`部分を展開して、
instanceのID（赤い線部分）とcontact-flowのID（青い線部分）をそれぞれメモしておきます。
<img width="527" alt="s210.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/8f997341-af69-f88e-b88f-cb56cefaa412.png">

# 2. Lambda関数の作成
## 2-1. Lambda関数を作成しよう
Lambda関数を作成します。

| 項目       |       値 |
|:-----------------|:------------------|
|①関数名|ClovaConnect|
|②実行ロール|AWSポリシーテンプレートから新しいロールを作成|
|③ロール名|ClovaConnect-Role|
|④ポリシーテンプレート|基本的なLambda@Edgeのアクセス権限|

![s211.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/87e3afca-cad2-b9b4-212a-4572b343d9d5.png)

関数ができたら、下にスクロールして`ClovaConnect-Role`をクリックします。
<img width="768" alt="s212.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/134bcd13-0518-0e1c-59f0-06731929934f.png">

## 2-2. IAMの編集
IAMを編集してAmazon Connectに必要な権限を追加します。`インラインポリシーの追加`をクリックします。

<img width="857" alt="s213.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/f8af4eac-516c-bbc6-f52c-45103fce7ab6.png">

サービスから`Connect`を検索して、クリックします。
<img width="897" alt="s214.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/f9e99cfc-581f-feec-4a2d-e7ee589ce25e.png">

アクションの書き込みにある`StartOutboundVoiceContact`のチェックを入れます。
<img width="903" alt="s215.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/080db76c-a3e2-07f7-7214-feac3e1cbdcb.png">

リソースは`すべてのリソース`をクリックして、［ポリシーの確認］をクリックします。
<img width="912" alt="s216.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/0e825f91-8018-2637-8737-bd80245a3ff3.png">

ポリシー名を入力して、［ポリシーの作成］ボタンをクリックします。
<img width="1235" alt="s217.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/9d1e0b28-b0fa-22e6-dc26-bd2c5cd6ab69.png">

## 2-3. Lambda関数の編集
Lambdaに戻り、index.jsを編集します。下記コードをコピペしてください。
具体的には`startOutboundVoiceContact`にAmazon ConnectのインスタンスIDとフローIDを指定するだけですね。

```javascript:index.js
'use strict';

const AWS = require('aws-sdk');
var connect = new AWS.Connect();

exports.handler = function (event, context, callback) {
    var response = {
        statusCode: 200,
        headers: {},
        body: ""
    };

    var speechText = "";
    var requestJson = JSON.parse(event.body).request;
    
    if (requestJson.type === 'LaunchRequest') {
        // 起動時処理
        speechText = '知らない番号から電話がかかってきた！電話を取ってみよう。';

        var params = {
            ContactFlowId: process.env.CONTACTFLOWID,
            DestinationPhoneNumber: process.env.PHONENUMBER,
            InstanceId: process.env.INSTANCEID,
            SourcePhoneNumber: process.env.SOURCEPHONENUMBER
        };

        // 電話をかける
        connect.startOutboundVoiceContact(params, function(err, data) {
        if (err) {
          console.log("gaomar=" + err);
        } else {
          console.log("gaomar=" + data);
        }
    
        });

        // Clovaにレスポンスを返す
        responseCall(speechText, response, callback);

    } else if (requestJson.type === 'SessionEndedRequest') {
        speechText = 'さようなら、また遊びましょう。';
        responseCall(speechText, response, callback);

    }
};

// レスポンス処理
function responseCall(speechText, response, callback) {
    var responseJson = JSON.stringify({
        "version": "1.0",
        "response": {
            "outputSpeech": {
                "type": "SimpleSpeech",
                "values": {
                    "type":"PlainText",
                    "lang":"ja",
                    "value": speechText
                }
            },
            "card": {},
            "directives": [],
            "shouldEndSession": true
        }
    });

    response.body = responseJson;

    callback(null, response);

}
```

環境変数を追加します。

| 項目       |       値 |
|:-----------------|:------------------|
|INSTANCEID|1-3でメモしたinstanceのIDを貼り付ける|
|CONTACTFLOWID|1-3でメモしたcontack-flowのIDを貼り付ける|
|PHONENUMBER|鳴らしたい携帯電話等を入力する番号は+81をつける|
|SOURCEPHONENUMBER|Amazon Connectで発行した番号を入力する|

<img width="1275" alt="s218.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/107878a4-ee6d-f2c4-6a44-4ad7a82a1106.png">

## 2-4. API Gatewayを追加する
トリガーの追加から`API Gateway`をクリックして追加します。

<img width="1348" alt="s219.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/f76e591d-9d3a-d2b5-0fd7-1255f324d028.png">

下にスクロールして、各項目を選択して、［追加］ボタンをクリックします。

| 項目       |       値 |
|:-----------------|:------------------|
|API|新規APIの作成|
|セキュリティ|オープン|

<img width="1351" alt="s220.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/7f7d6b27-875b-532b-e885-8352e6069772.png">

右上の［保存］ボタンをクリックすると、API GatewayのアクセスURLが発行されるので、メモしておきます。
<img width="1548" alt="s221.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/ddc52cb7-8d3b-a59e-8b10-3e686bbfa1dd.png">

# 3. Clovaの設定をする

## 3-1. サーバー設定
Clovaのプロジェクトを作成して、サーバー設定にAPI GatewayのアクセスURLを貼り付けます。

<img width="1407" alt="s222.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/54c13fcc-8bc6-2766-29c8-262157ca186d.png">

## 3-2. テストする
テストタブをクリックして、`シナリオテスト`を有効にします。`○○を起動して`をクリックします。

<img width="714" alt="s223.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/95e216d2-2cbe-cda9-03ec-d65e66d51e64.png">

すると、指定した番号に電話がかかってきます。

# まとめ
LIFF等と連携すると、かけたい電話番号を指定することが可能になるかもしれません。
Amazon Connectはただのコールセンターだけでなく、アイデア次第で面白いものが作れるかもしれませんね。

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/