Twilio Flexの始め方（IVR編）

:::note alert
2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。
:::

# はじめに

みなさん、こんにちは。
KDDIウェブコミュニケーションズの Twilio事業部エバンジェリストの高橋です。

[Twilio Flex Advent Calendar 2021](https://qiita.com/advent-calendar/2021/twilio-flex) 6日目の記事となります。
[前回の記事](https://qiita.com/mobilebiz/private/d06a29214b437339d226)で、Twilio Flexのセットアップ方法について解説をしましたので、今回からはそちらの環境を使いながら少しずつカスタマイズ方法について学習していきたいと思います。

# IVRを実装するTwilio Studio

今回は、IVR（Interactive Voice Response）のカスタマイズについて学習していきたいと思います。

Twilio Flex内でIVRの機能を実装するのは、Twilio Studioになります。Twilio Studioは、ドラッグアンドドロップで操作ができるコールフローの管理ツールとなります。操作が簡単なので、ちょっとしたカスタマイズであればエンジニアでなくても可能です。
しかし、少し凝った作業を行おうとすると、Studioだけでは完結できないため、別途Twilio Functionsなどを使う必要も出てきます。
まずは、Twilio Studioの仕組みについて理解し、どのようなときにどのようなカスタマイズが必要なのかを学習していきましょう。

## セットアップで作成された「Voice IVR」

まずはセットアップ直後のTwilio Studioにはどのような設定がされているのかをおさらいしましょう。

- Twilio管理コンソールにログインします。
- 左側のスライドメニューから**Studio**を選択します。
- **フローを管理する**メニューを選択します。
![スクリーンショット 2021-12-02 13.48.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/bfb134f5-f85b-82b2-e208-ed827f3a2ac7.png)

このように3つのフローが事前に作成されているのがわかります。

- 「Voice IVR」をクリックします。
![スクリーンショット 2021-12-02 13.43.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/4172b95a-5c01-2975-40d5-7eb8b07d2467.png)

こちらが、「Voice IVR」という名前がつけられたセットアップ直後のStudioフローになります。
着信したコールが**Trigger**と書かれたウィジェットの**Incoming Call**というレグから流れていき、そのまま**SendCallToAgent**ウィジェットに接続されています。

**SendCallToAgent**ウィジェットの設定は以下のようになっています。
![スクリーンショット 2021-12-02 14.13.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/847c4096-73cf-ea76-0986-7336f99e75db.png)

**ATTRIBUTES**は、以下のJSONです。

```json
{
  "type": "inbound",
  "name": "{{trigger.call.From}}" 
}
```

# IVRのカスタマイズ

では、ここからはIVR機能をカスタマイズして、要件を聞き出してからオペレーターにつなぐようにしてみましょう。
具体的には、電話がかかってくると「お電話ありがとうございます。オペレーターにお繋ぎいたしますので、ご用件をお話ください。」というガイダンスが流れ、発話した内容がFlexのオペレーター画面に表示されるというシナリオにしたいと思います。

## Gather Input On Call ウィジェット

IVRで必要な、ユーザーとの対話を行うのは、Twilio Studioの**Gather Input On Call**ウィジェットです。
このウィジェットを使うと、ユーザーからのDTMF信号（数字キーによる応答）だけではなく、ユーザーが発話した内容を音声認識して文字として取得することもできます。

- 画面の右側にあるWIDGET LIBRARYの中から、**Gather Input On Call**ウィジェットをキャンバスにドラッグアンドドロップします。
![スクリーンショット 2021-12-02 14.22.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/90dac3ce-5a13-5e81-6a8d-7049f5d6ffbc.png)

- このウィジェットの設定画面が開くので、以下のように入力していきましょう。
![スクリーンショット 2021-12-03 10.00.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/7ec5ffd1-2f11-e091-9eb8-565445010167.png)

**WIDGET NAME**: 「GetQuestion」
**TEXT TO SAY**: 「お電話ありがとうございます。オペレーターにお繋ぎいたしますので、ご用件をお話ください。」
**LANGUAGE**: 「Japanese」を選択
**MESSAGE VOICE**: 「[Polly]Mizuki」を選択（女性の声になります）
**STOP GATHERING AFTER**: 「10」（待受タイムアウトを10秒にします）
**SPEECH RECOGNITION LANGUAGE**: 「Japanese(Japan)」を選択（間違えると音声認識ができません）

- **Save**ボタンを押します。


次に、完成したSalesOrSupportウィジェットを、**Trigger**ウィジェットと**SendCallToAgent**の間に入れます。

- **SendCallToAgent**ウィジェットの左上の黒い●をクリックすると、そこにつながっている線が掴めますので、一旦このウィジェットから線を外します。
- **Trigger**ウィジェットの**Incoming Call**から出ている赤い線の先を、作成した**GetQuestion**ウィジェットの左上の●につなぎます。
![スクリーンショット 2021-12-03 10.09.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/4a3344ce-a172-0f3d-794c-0d3b1d107a35.png)

次に、**GetQuestion**ウィジェットの**User Said Something**と書かれたほうの黒い●を、**SendCallToAgent**ウィジェットの左上の●につなぎます。
![スクリーンショット 2021-12-03 10.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/9bb81c70-39cc-7e7f-93d8-c58a5e8bc641.png)

## Sent To Flex ウィジェット

StudioからTaskRouterにコールを引き渡す役目をするのが、**Send To Flex**ウィジェットになります。ここでは、すでに**SendCallToAgent**ウィジェットとして実装されていますので、こちらを少し修正しましょう。

- **SendCallToAgent**ウィジェットを選択して、設定画面を表示させます。
![スクリーンショット 2021-12-03 10.14.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/6100fd07-dd6a-d6fd-394c-c1f69db1c16b.png)

- **Save**ボタンを押してください。

修正する箇所は、**ATTRIBUTES**のみです。その他の設定は変更しないように注意してください。

- **ATTRIBUTES**欄に 「`{ "type": "inbound", "name": "{{widgets.GetQuestion.SpeechResult}}" }`」と入力します。スペル間違いに気をつけてください。
"name": "{{widgets.GetQuestion.SpeechResult}}"の指定をすることによって、このタスクの名前に、ユーザーが発話した内容を音声認識した結果をいれて、TaskRouterにわたすことになります。

## パブリッシュ

Twilio Studioの修正結果は、最後にパブリッシュすることで反映されます。

- 画面上部にある**Publish**ボタンを押します。
![スクリーンショット 2021-12-03 10.19.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/c0485818-dd91-1933-b2a2-338dc84cf37a.png)

- 確認ダイアログが表示されます。
![スクリーンショット 2021-12-03 10.20.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/459be279-6cb8-362c-4d19-1df0ae243c7c.png)

- **Publish**ボタンを押して、変更を確定します。

# IVRをテストする

IVRをテストするためには、Studioフローを紐付けた電話番号に電話を掛けるのが簡単ですが、これだと電話代がかかってしまいます。
そこで、費用をかけずにIVRのテストをするために、Twilioの管理コンソールから電話をかけるように準備をしたいと思います。

## StudioフローのWebHook URLを取得する

Studioフローには、それぞれWebHook用のURLが設定されていますので、まずはそちらを控えておきましょう。

- **Trigger**ウィジェットを選択して、設定画面を表示させます。
![スクリーンショット 2021-12-03 10.53.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/1cf9719c-254e-57a5-aeaf-c37f54403b83.png)

- **WEBHOOK URL**にかかれているURLをメモ帳などにコピーしておきます（コピーアイコンを押すとクリップボードにコピーされます）。

## TwiML Appsを作成する

- 管理コンソールの左側のスライドメニューから、**Phone Numbers**を選択します。
- **ツール**メニューの中の、**TwiML Apps**を選択します。
![スクリーンショット 2021-12-03 10.56.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/4c658fb8-7bd4-bebb-55f4-022b6f78b131.png)

- **新しい TwiML App を作成する**ボタンを押します。
![スクリーンショット 2021-12-03 10.58.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/4e433fa2-8d8c-1d16-b669-cca745c9182e.png)

- **わかりやすい名前**に、「IVRテスト」と入力します。
- **Voice**の**REQUEST URL**に、先程控えておいたStudioフローのWebHook URLを貼り付けます。
- **保存**ボタンを押します。
![スクリーンショット 2021-12-03 11.01.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/1fda9e47-db0e-e332-6d9b-44fcd16c6ef8.png)

- 今作成した「IVRテスト」を選択して開きます。
![スクリーンショット 2021-12-03 11.02.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/a381812f-2eb8-0448-cd4b-8353b88097c7.png)

- 画面の右側に**発信**ボタンを押します。
- マイクの許可ダイアログが表示されたら、**許可**ボタンを押します。
- ![スクリーンショット 2021-12-03 11.03.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/82504fec-a1ad-e5d7-9545-ae266093793f.png)

- 呼び出し音がなって、先程設定した応答メッセージが流れます。
- たとえば、「パスワードを忘れてしまいました」などと話します。
- 待受の音楽が流れ始めます。
![スクリーンショット 2021-12-03 11.06.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/c3f5dab9-f78f-eaf8-dc2c-73d398be2b16.png)

- **終話**をクリックすると電話が切れます。

Flexプロジェクトでこのテストを行った場合、VoIP通話については発着信ともFlex料金に含まれるため、実質通話料は無料になります。

## Flexのオペレーター画面でテストする

では最後に、Flexのオペレーター画面をつかってテストをしてみましょう。
Flexでテストするときは、上記のTwiML Appsによるテストができない（着信しても通話状態にならない）ため、実際の電話機を使って電話をかける必要があります。

- Twilio管理コンソールを開きます。
- 左側のスライドメニューから、**Flex**を選択します。
![スクリーンショット 2021-12-03 11.17.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/c7af8580-aa15-21c5-44c3-a58a40197f5d.png)

- **Launch Flex**ボタンを押して、Flexを起動します。
![スクリーンショット 2021-12-03 11.18.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/a35d3ec1-179f-7a17-1043-c07edaf2117f.png)

- 左側の上から２つ目のアイコンを選択します。
![スクリーンショット 2021-12-03 11.19.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/b3879322-4199-255f-a600-28526aaaf09a.png)

- ステータスを**Available**に切り替えます。

では、早速テストをしましょう。

- 電話機からFlexの電話番号に発信をします。
- 先程と同じように、何かメッセージを吹き込みます。
![スクリーンショット 2021-12-03 11.21.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/03ec0040-fd00-7c60-f55b-04f17ec82515.png)

- 画面左側に上記のように発話したメッセージが文字として表示されて、着信通知が届けばテストは成功です。

先程のTwiML Appsからも発信テストは可能ですが、オペレーターが応答しても通話は始まりません（発信側は待受音楽が流れたまま）ので、発信側で終話操作をしてください。

# まとめ

今回は、非常に簡単なIVRのテストを行ってみました。
発話を音声認識した結果を、タスクの`name`パラメータを使ってTaskRouterに伝えることで、Flex上には名前の表示位置に音声内容が表示されました。
実際の運用では、名前の部分は顧客名に利用することが多いので、要件は別の部分に表示させるのがよいのですが、このカスタマイズをするためには、Flex UI側でのプラグイン開発が必要になるので、現時点では触れません。

いずれにしろ、IVRでの操作と、その内容をTaskRouter経由でオペレーターに通知できることがおわかりいただけたかと思います。

次回以降の記事では、TaskRouterの仕組みについて解説をしていきたいと思います。

★次の記事
[Twilio Flexの始め方（GoogleSpreadsheet連携編）](https://qiita.com/mobilebiz/items/916b416af155bdab988b)

---
### Twilio（トゥイリオ）とは

https://cloudapi.kddi-web.com
Twilio は音声通話、メッセージング（SMS /チャット）、ビデオなどの 様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウド API サービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。

自己紹介|　
:--|:--
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/b51a8b88-abd5-ce5e-195a-de3564ba2ae6.png" height='200' width='150'/>|高橋克己（Katsumi Takahashi） 自称「<font color='red'>赤い芸人</font>」<br />グローバル・インターネット・ジャパン株式会社　代表取締役<br />株式会社KDDIウェブコミュニケーションズ　Twilio事業部エバンジェリスト<br /><br />2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。<br />2015 Hall of Doers<br />2019 Twilio Champions