Twilio Studio ワークショップ

##ワークショップの目的
1.Twilioのことを知っていただく
2.Studioの簡単な操作ができるようになる

---
##アジェンダ
1.Twilioの説明
2.Twilioの仕組み　　
  　アカウント　　
  　料金体型　　　
3.Twilio Studioの説明
4.ワークショップ
  　自動応答システムの作り方
  　SMS自動送信システムの作り方
  　その他機能説明

---
##本日のワークショップ資料
**https://bit.ly/studio_workshop1**

---
##Twilioとは
音声通話やSMSなどのコミュニケーションチャネルをAPIとして提供しているクラウドサービスです。
・2007年設立
・2008年サービス開始
<img width="529" alt="スクリーンショット 2018-06-26 17.48.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/217201/ca6836e6-bf7f-6ce7-a52b-7186c8a050c2.png">

---
##Twilio For KWC
・2013年4月日本国内向けサービス提供を開始。
・日本独自のアカウント管理
　**https://twilio.kddi-web.com/**
・日本のレギュレーションに沿った運用

---
##現在Twilioが提供している機能
<img width="706" alt="スクリーンショット 2018-06-11 19.40.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/217201/9597a7d2-7c2c-c9a5-795c-df77ca306918.png">

---
##Twilioを使用する上で必要な設備
・Twilioは、パソコンとインターネットさえあればOK！
・アカウントを作成していただくだけで使用可能。
・初期費用や契約申し込みも不要です。

---
##Twilioの仕組み : アカウント1
<img width="711" alt="スクリーンショット 2018-08-07 14.58.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/217201/98e2bd7c-d8b7-3999-8bac-ffc2c8764755.png">

<b>ユーザー</b>
・ログイン用アカウント
・サインアップ時に作成されます。同時にオーナー権限を持つプロジェクトも１つ生成されます。

<b>トライアルアカウント</b>
・サインアップ後の状態です。
・ある一定の金額まで無料でお試しいただけます。

▽無料トライアルアカウントの制限事項につきましては、下記URLをご参照下さい。▽
　　http://bit.ly/2hRVOkp

---
##Twilioの仕組み : アカウント2
<b>プロジェクト</b>
・支払情報を保有します。
・プロジェクトに、別のユーザーを紐付けることも可能です。
・独自のAccountSidとAuthTokenが付与されます。

<b>サブアカウント</b>
・プロジェクト内に生成する環境、しかしそのプロジェクトとは完全に独立しています。
・独自のAccountSidとAuthTokenが付与されます。
・支払情報は持っていません。

---
##Twilioの仕組み : 課金の仕組み
・従量課金制になります。
・ポイントを事前購入し、利用した分だけポイントから引かれます。
・利用履歴や残ポイントはコンソールから確認可能です。
・残高が 0円に達すると、アカウントがサスペンドされます。
・サスペンドを解除するには、ポイントを購入する必要がございます。

---
##実装1：ワークショップで使用するアカウントへログインします。

！ログインする前の注意点！
　「二要素認証を有効にする」にはチェックを入れないで下さい。
<img width="420" alt="スクリーンショット 2018-07-24 13.56.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/217201/468a5f72-26fb-15d8-0d49-664d894f4f41.png">

<b>手順</b>
1.**https://jp.twilio.com/login/kddi-web**へアクセスします。
2.管理コンソールに短冊に表記されているログインIDとパスワードを入力しログインします。
3.ホーム -> setting -> [Subaccounts]を選択します。
4.短冊に記載されたご自分のサブアカウントを一覧から探します。
5.ご自分のサブアカウントの「サブアカウントを表示」をクリックします。

---
##実装2：ワークショップで使用する０５０番号を購入します。

<b>手順</b>
1.左ボタン印 -> 電話番号 -> 番号を購入 を選択します。
2.国の選択で Japan(+81)を選択し、音声通話とFAXにチェックを入れた状態で、[検索]ボタンを押します。
3.一覧の中からローカル番号を1つ選択し、[購入]ボタンを押します。
4.[この番号を購入しますか？]ダイアログで、[この番号を購入する]ボタンを押します。この時点で108ポイントを消費します。
5.[閉じる]を押します。
6.電話番号　->　番号の管理を選択し、今購入した番号が表示されることを確認します。
※購入した番号はテキストなどにメモして下さい。

---
##実装3：ワークショップで使用するUS番号を購入します。

<b>手順</b>
1.番号を購入を選択し、購入 ページへ戻ります。
2.国の選択で United States(+1)を選択し、SMSにチェックを入れた状態で、[検索]ボタンを押します。
3.一覧の中からローカル番号を1つ選択し、[購入]ボタンを押します。
4.この番号を購入しますか？ ダイアログで、[この番号を購入する]ボタンを押します。この時点で150ポイントを消費します。
5.[閉じる]を押します。
6.電話番号 -> 番号の管理を選択し、今購入した番号が表示されることを確認します。
※この番号も同様、テキストなどにメモしてください。

---
##Twilio Studioとは
・ドラッグ＆ドロップ形式でコールフローを構築するビジュアルアプリケーションビルダー機能になります。
・「Widget」と呼ばれるGUIの部品を繋ぎ合わせてコールフローを構築します。

---
##Twilio Studio : 各Widgetの概要
| 名前 | 役割 | 
|:-----------|:------------|
|Trigger（Start)|フローの開始となるWidgetです。受信メッセージ、着信通話やREST APIをトリガーにして処理を開始します。|
|Split Based On…|フローを分割して設定された条件に基づいたWidgetへ接続します。※Studioの条件は大文字小文字は区別しません。また空白文字は自動的に切り詰められます。| 
|Send Message|「SEND MESSAGE TO」に指定された送信先に対してメッセージを送信します。メッセージ送信後、送信先からの入力をリクエストしたい場合は、「Send & Wait For Reply 」Widgetを使用します。| 
|Send & Wait For Reply|「SEND MESSAGE TO」に指定された送信先に対してメッセージを送信した後、送信先からの入力をリクエストしたい場合に使用します。| 
|Say/Play|メディアファイルの再生やテキストを読み上げることが可能です。|
|Gather Input On Call|通話中に発信者側の入力情報を処理します。このWidgetではDTMFやSpeech情報を収集することが可能です。| 
|Connect Call To|呼の状態（CallStatus）がIn-progress状態の通話を別の電話へブリッジします。通話を転送する時に使用します。| 
|Record Voicemail|ボイスメールを録音するとができます。録音したオーディオファイルを再生するには、ウィジェットのURL（widgets.MY_WIDGET_NAME.RecordingUrl）を使用して聞くことができます。| 
|Make Outgoing Call|Make Outgoing Callを使用すると、Flow中でContactの電話番号に通話を発信できます。 このWidgetを使用して自動通話でContactに連絡したり、ボイメッセージを追加してフォローアップを行えます。|
|Run Function|Run Functionを使用すると、Twilio Functionｓ（クラウド上で実行される軽量でサーバーレスなコード）を実行できます。このWidgetを使用してフローの拡張が可能です。|
|HTTP Request|HTTP Requestを使用すると、Studio外部のアプリケーションおよびコードとやり取りできます。 このWidgetを使用してFlowやFunctionsで定義されていないビジネスロジックの部分とやり取りします。|
|Understand|音声解析機能になります。※日本アカウントは未対応の機能になります。|

---
##実装を始める前の準備
以下の内容をメモへコピー＆ペーストして下さい。

実装４−１
フロー名：IVR
Widget名1：reception_1
テキストメッセージ：こんにちは。営業へおつなぎする場合は１を、サポートへおつなぎする場合は2をおして下さい。
Widget名2：split_IVR
Widget名3：Call_Sale
Sales番号：+815031775444
パラメータ：{{trigger.call.To}}
Widget名4：Call_Support
サポート番号：+815031880466

実装４-2
テキストメッセージ：こんにちは。営業へおつなぎする場合は営業、サポートへおつなぎする場合はサポート、とおっしゃって下さい。
ヒント設定：営業, サポート
パラメータ：.\*サポート.\*

実装４-3
メディアURL：https://true-things-3178.twil.io/assets/Welcometotwilio%20(online-audio-converter.com).mp3

実装5-1
テキストメッセージ1：こんにちは。料金の情報を受け取りたい方は３、事例紹介の情報を受け取りたい方は４を選択してください。サイトURL情報をSMSへ送信いたしますので、電話を切って今しばらくお待ち下さい。また、営業へおつなぎする場合は１、サポートへおつなぎする場合は２を選択して下さい。
Widget名1：split_SMS
Widget名2：Send_Price
テキストメッセージ2：https://twilio.kddi-web.com/price/
Widget名3：Send_UseCase
テキストメッセージ3：https://twilio.kddi-web.com/case/

---
##実装４-1： IVR機能の実装（DTMFトーン）
<b>シナリオ</b>
コールを受信したら自動応答システムが起動し、操作を促すガイダンスが流れます。その後発信者が選択した番号へ転送され、メッセージが流れます。
![スクリーンショット 2018-07-25 18.12.04.png](https://qiita-image-store.s3.amazonaws.com/0/217201/a58fdab4-e127-842c-1dbc-ff9da33f1101.png)

---
<b>手順1:フローを作成する。</b>
 1. 管理コンソールの左側のスライドメニューから、<b>Studio</b>を選択します。
 2. 赤いプラスアイコンをクリックするか、<b>Create a new flow</b>を選択して、新しいフローを作成します。
 3. <b>FLOW NAME</b>に「IVR」と入れて、<b>NEXT</b>ボタンを押します。
![スクリーンショット 2018-07-03 18.21.16.png](https://qiita-image-store.s3.amazonaws.com/0/217201/0a5f0fea-fa1d-8c86-581a-30d699082455.png)

 4. <b>New Flow</b>ダイアログが表示されるので、<b>Start from scratch</b>が選択されている状態で、<b>Next</b>ボタンを押します。
![スクリーンショット 2018-07-03 18.22.32.png](https://qiita-image-store.s3.amazonaws.com/0/217201/fffe491b-76f6-dfe4-8aa2-2b6b0160a96d.png)

---
<b>手順2:コールを受信したときに、メッセージを流しながらキー操作を受け付けるボックスを作成します。</b>
 1. <b>WIDGET LIBRARY</b>から<b>Gather Input on Call</b>をキャンバス上にドロップします。
 2. <b>Trigger WIDGET</b>の<b>Incoming Call</b>と、今ドロップしたボックスを結合します。
 3. <b>GATHER INPUT ON CALL</b>の<b>WIDGET NAME</b>に「reception_1」と入力します。
 4. <b>SAY OR PLAY MESSAGE</b>は、「Say a Message」を選択して、<b>TEXT TO SAY</b>欄に、
    「こんにちは。営業へおつなぎする場合は１を、サポートへおつなぎする場合は2を押して下さい。」 と入力します。
![IVRメッセージ.png](https://qiita-image-store.s3.amazonaws.com/0/217201/f6537916-2fc5-dbcd-570d-0e362b0314fe.png)
 5. 少し下へスクロールをして、<b>MESSAGE VOICE</b>のプルダウンメニューからお好みのボイスエンジンを選び、<b>LANGUAGE</b>のプルダウンリストから「Japanese,Japan」を選択します。
 6. <b>Save</b>ボタンを押して、内容を確定させます。
![１.png](https://qiita-image-store.s3.amazonaws.com/0/217201/3b5eb7a9-967d-beae-6720-deaf1afdc6f4.png)

---
<b>手順3:押されたキーを判定するボックスを作成します。　</b>
 1. <b>WIDGET LIBRARY</b>から<b>Split Based On...</b>をキャンパス上にドラッグアンドドロップします。
 2. IVRボックスの<b>User Pressed Keys</b>と、今配置したボックスを結合します。
 3. <b>Split Based On...</b>ウィジェットの<b>WIDGET NAME</b>を「split_IVR」に書き換えます。
 4. <b>VARIABLE TO TEST</b>は、プルダウンリストからIVRの<b>Digits</b>を選択します。
![２.png](https://qiita-image-store.s3.amazonaws.com/0/217201/df1413a7-abf8-65b2-ef2f-05d0eeb89b6d.png)

---
<b>手順4:Split Based On...の設定を変更します。　</b>
 1. <b>Transitions</b>タブに移動し、<b>NEW CONDITION</b>の「+」ボタンを押します。
 2. <b>Equal To</b>を選択した状態で、「1」と入力します。
 3. <b>Set Condition</b>を押して、条件を確定させます。 
![３.png](https://qiita-image-store.s3.amazonaws.com/0/217201/cd6bf05d-c908-2137-04d7-041dd7ca700d.png)

 4. もう一度、<b>NEW CONDITION</b>の「+」ボタンを押します。
 5. <b>Equal To</b>を選択した状態で、今度は「2」と入力します。
 6. <b>Set Condition</b>を押して、条件を確定させます。
 7. <b>WIDGET</b>に、「If value equal_to 1」と「If value equal_to 2」のコネクタができたことを確認します。 　
![スクリーンショット 2018-07-05 11.11.08.png](https://qiita-image-store.s3.amazonaws.com/0/217201/e7bbc0f6-9cb3-8c21-5bd4-49a5b0dedc1b.png)

---
<b>手順5:CONNECT CALL TOの設定をします。</b>
 1. <b>WIDGET LIBRARY</b>から<b>CONNECT CALL TO</b>をキャンパス上にドラッグアンドドロップします。 
 2. <b>Check Key</b>ボックスの<b>If value equal_to 1</b>と、今配置したボックスを結合します。
 3. <b>CONNECT CALL TO</b>ウィジェットの<b>WIDGET NAME</b>を「Call_Sale」に書き換えます。
 4. <b>CONNECT CALL TO</b>は、「Single Number」を選択して、空欄に「+815031775444」を入力します。
 5. <b>CALLER ID</b>は、受信したTwilio番号から転送するので、<b>{{trigger.call.To}}</b>に設定し、「Save」を押して、設定を確定します。
![４.png](https://qiita-image-store.s3.amazonaws.com/0/217201/e73ec8af-58f0-feaf-61d6-34a332a50b59.png)

 6. 今作成した<b>Call_Sale</b> ウィジェットを複製して、もう一つサポートへ転送するウィジェットを作成します。
 7. <b>Call_Sale</b> ウィジェット複製アイコンをクリックします。
![スクリーンショット 2018-07-05 11.13.06.png](https://qiita-image-store.s3.amazonaws.com/0/217201/d2c6e3b8-a5b6-42bc-c67c-e584282f3dc4.png)

---
<b>手順6:複製されたCONNECT CALL TOウィジェットの設定を変更します。</b>
 1. 複製された<b>CONNECT CALL TO</b>ウィジェットの<b>WIDGET NAME</b>を「Call_Support」に書き換えます。
 2. <b>Check Key</b>ボックスの<b>If value equal_to 2</b>と結合します。
 3. <b>CONNECT CALL TO</b>は、「Single Number」を選択して、空欄に「+815031880466」を入力します。
 4. <b>CALLER ID</b>は、受信したTwilio番号から転送するので <b>{{trigger.call.To}}</b> に設定し、「Save」を押して、設定を確定します。
![5.png](https://qiita-image-store.s3.amazonaws.com/0/217201/ab96fcb0-9dfe-c05e-0d62-a7a220c8425c.png)

---
<b>手順7:作成したフローと購入した番号を紐付ける。</b>
 1. 左ボタン印 -> 電話番号 -> 番号の管理 を選択します。
 2. 購入した050番号を選択し、設定ページを表示します。
 3. 設定項目音声着信時プルダウンメニューからStudioFlowを選択し、
    その横にあるプルダウンメニューから作成したIVRフローを選択し、「保存」します。
![６.png](https://qiita-image-store.s3.amazonaws.com/0/217201/0b58786a-95b5-ca31-5a1e-bfebc493400c.png)

実際に電話を架けて試してみましょう！

---
##実装４-2： IVR機能の実装（音声認識）
<b>手順1:先程作成したIVRのreception_1の設定を変更します。</b>
 1. 管理コンソールの左側のスライドメニューから、<b>Studio</b>を選択します。
 2. 先ほど作成したフローIVRを選択。
 3. <b>GATHER INPUT ON CALL</b>「reception_1」を選択します。
 4. <b>SAY OR PLAY MESSAGE</b>の<b>TEXT TO SAY</b>欄の設定を
    「こんにちは。営業へおつなぎする場合は営業、サポートへおつなぎする場合はサポートとおっしゃって下さい。」へ変更します。
![7.png](https://qiita-image-store.s3.amazonaws.com/0/217201/559a8d8c-9271-6be3-5f5d-409055d399de.png)

 5. 少し下へスクロールをして、<b>SPEECH RECOGNITION LANGUAGE</b>プルダウンリストから「Japanese(Japan)」を選択します。
 6. <b>SPEECH RECOGNITION HINTS</b>には、<b>Twilio</b>に認識させる言葉「営業, サポート」を記入します。
 7. <b>Save</b>ボタンを押して、内容を確定させます。
![8.png](https://qiita-image-store.s3.amazonaws.com/0/217201/6d1db51f-4e80-ec23-748a-af72c2bea135.png)

 8. <b>Transitions</b>タブへ移動し、設定を表示します。
 9. <b>IF USER PRESSED KEYS</b>設定の<b>Disconnect</b>を選択します。
10. <b>IF USER SAID SOMETHING</b>のプルダウンメニューから<b>split_IVR</b>を選択。
11. <b>Save</b>ボタンを押して、内容を確定させます。
![9.png](https://qiita-image-store.s3.amazonaws.com/0/217201/134d6f6f-cf03-3aed-19fe-4ab96aabe449.png)

---
<b>手順2:発信者が言った言葉を判定するボックスを設定します。</b>
 1. <b>Split Based On...</b>ウィジェットの<b>WIDGET NAME</b>、「split_IVR」の<b>VARIABLE TO TEST</b>設定を、
    プルダウンリストから<b>SpeechResult</b>を選択し、<b>Save</b>します。
![10.png](https://qiita-image-store.s3.amazonaws.com/0/217201/b84759fd-417b-4d44-00ad-70631628d720.png)

 2. <b>Transitions</b>タブに移動し、<b>IF VALUE EQUAL_TO1</b>の設定を「1」から「営業」へ変更します。 
    もう一つの、<b>IF VALUE EQUAL_TO2</b>をプルダウンメニューから<b>Regex</b>を選択し、設定を「2」から「.\*サポート.\*」へ変更します。
 3. <b>Save</b>を押して、条件を確定させます。 　
![11.png](https://qiita-image-store.s3.amazonaws.com/0/217201/4610233f-ef48-669b-b171-ab99df05a180.png)

---
##実装４-3： IVR機能の実装

メディアファイルを使用して着信時のガイダンスを再生したい場合の設定方法。
※フローは先程作成したIVRを使用します。

今回メディアファイルの置き場所としてTwilio Assetsを使用します。
・<b>Assets</b>とは、<b>Twilio</b>のファイルストレージです。
・公開ファイルと非公開ファイルの選択が可能です。
・20ファイルまでアップロード可能
・月10,000リクエストまで無料（それ以上は0.015円/リクエスト）

---
<b>手順1:Assets</b>
・<b>Assets</b>へのファイルアップロードの実装は今回行いません。
・既にアップロードされている、URLを使用します。
https://true-things-3178.twil.io/assets/Welcometotwilio%20(online-audio-converter.com).mp3
![１５.png](https://qiita-image-store.s3.amazonaws.com/0/217201/a503d9aa-84be-7253-8a32-a91932f6ed25.png)

---
<b>手順2:先程作成したIVRのreception_1の設定を変更します。</b>
 1. 管理コンソールの左側のスライドメニューから、Studioを選択します。
 2. 先ほど作成したフローIVRを選択。
 3. <b>GATHER INPUT ON CALL</b>「reception_1」を選択します。
 4. <b>SAY OR PLAY MESSAGE</b>は、「Play a Message」を選択して、
    <b>URL OR AUDIO FILE</b>欄に先程コピーしたURLを入力し、<b>Save</b>します。
![１６.png](https://qiita-image-store.s3.amazonaws.com/0/217201/33009db3-52c3-7010-9592-2499a38d949f.png)

---
<b>もし複数の電話番号へ一斉発信したい場合</b>
先程作成したフロー「IVR」の<b>CONNECT CALL TO　WIDGET</b>「Call_Sale」の設定を変更します。

 - 管理コンソールの左側のスライドメニューから、<b>Studio</b>を選択します。
 - 先ほど作成したフローIVRを選択。
 - <b>CONNECT CALL TO</b>「Call_Sale」を選択します。
 - <b>CONNECT CALL TO</b>は、「Multiple Numbers」を選択して、
   <b>PHONE NUMBERS OR CLIENTS</b>欄に転送先電話番号を入力し、<b>Save</b>します。
![17.png](https://qiita-image-store.s3.amazonaws.com/0/217201/5efb9a36-420b-d20c-bc68-094564dbb6a0.png)

---
##実装5-1：SMS送信
<b>シナリオ</b>
コールを受信したら自動応答システムが起動し、操作を促すガイダンスが流れます。
その後発信者が選択した番号に紐ついているサイトURL情報が<b>SMS</b>で送信されます。
![スクリーンショット 2018-07-25 18.17.26.png](https://qiita-image-store.s3.amazonaws.com/0/217201/cb614f25-32d9-6035-a94d-f9d247c61140.png)


---
<b>手順1:SMS送信用フローを作成します。</b>
 - 管理コンソールの左側のスライドメニューから、<b>Studio</b>を選択します。
 - 赤いプラスアイコンを選択して、新しいフローを作成します。
 - FLOW NAMEに「SMS」と入れて、<b>NEXT</b>ボタンを押します。
![SMS.png](https://qiita-image-store.s3.amazonaws.com/0/217201/16932aa7-ac2d-b276-f9da-8682cdd656f6.png)

 - <b>New Flow</b>ダイアログが表示されるので、<b>Start from scratch</b>が選択されている状態で、<b>Next</b>ボタンを押します。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/217201/a48065f7-72ff-edd9-ae38-4691b8e49762.png)

---
<b>手順2:コールを受信したときに、メッセージを流しながらキー操作を受け付けるボックスを作成します。</b>
 - <b>WIDGET LIBRARY</b>から<b>Gather Input on Call</b>をキャンバス上にドロップします。
 - <b>Trigger WIDGET</b>の<b>Incoming Call</b>と、今ドロップしたボックスを結合します。
 - <b>GATHER INPUT ON CALL</b>の<b>WIDGET NAME</b>に「SMS_1」と入力します。
 - <b>SAY OR PLAY MESSAGE</b>は、「Say a Message」を選択して、<b>TEXT TO SAY</b>欄に「こんにちは。料金の情報を受け取りたい方は３、事例紹介の情報を受け取りたい方は４を選択してください。サイトURL情報をSMSへ送信いたしますので、電話を切って今しばらくお待ち下さい。また、営業へおつなぎする場合は１、サポートへおつなぎする場合は２を選択して下さい。」と入力します。
![スクリーンショット 2018-07-05 11.56.57.png](https://qiita-image-store.s3.amazonaws.com/0/217201/7790985c-c153-ba7f-078c-4cef3ca408bd.png)

 - 少し下へスクロールをして、<b>MESSAGE VOICE</b>を「Alice」、LANGUAGEのプルダウンリストから「Japanese, Japan」を選択します。
 - <b>Save</b>ボタンを押して、内容を確定させます。
![14.png](https://qiita-image-store.s3.amazonaws.com/0/217201/f0c49fcf-bf59-21a4-c125-f7ed60456222.png)

---
<b>手順3:押されたキーを判定するボックスを作成します。</b>
 - <b>WIDGET LIBRARY</b>から<b>Split Based On...</b>をキャンパス上にドラッグアンドドロップします。
 - <b>IVR</b>ボックスの<b>User Pressed Keys</b>と、今配置したボックスを結合します。
 - <b>Split Based On...</b>ウィジェットの<b>WIDGET NAME</b>を「split_SMS」に書き換えます。
 - <b>VARIABLE TO TEST</b>は、プルダウンリストから<b>IVR</b>の<b>Digits</b>を選択します。
![15.png](https://qiita-image-store.s3.amazonaws.com/0/217201/82d375e7-7feb-5927-8ed6-8846ec1262f9.png)

 - <b>Transitions</b>タブに移動し、<b>NEW CONDITION</b>の「+」ボタンを押します。
 - <b>Equal To</b>を選択した状態で、「3」と入力します。
 - <b>Set Condition</b>を押して、条件を確定させます。 
![16.png](https://qiita-image-store.s3.amazonaws.com/0/217201/8c8b3c3f-174c-1c67-0184-ebc892d72d8a.png)

 - もう一度、<b>NEW CONDITION</b>の「+」ボタンを押します。
 - <b>Equal To</b>を選択した状態で、今度は「4」と入力します。
 - <b>Set Condition</b>を押して、条件を確定させます。
 - 「If value equal_to 1」と「If value equal_to 2」のコネクタができたことを確認します。 　 
![スクリーンショット 2018-07-05 11.59.51.png](https://qiita-image-store.s3.amazonaws.com/0/217201/812c93b7-c323-ea7e-1898-0d8699cb18a9.png)

---
<b>手順4:SMSを送信するボックスを作成します。</b>
 - <b>WIDGET LIBRARY</b>から<b>SEND MESSAGE</b>をキャンパス上にドラッグアンドドロップします。
 - 作成した<b>If value equal_to 1</b>と、今配置したボックスを結合します。
 - <b>CONNECT CALL TO</b>ウィジェットの<b>WIDGET NAME</b>を「Send_Price」に書き換えます。
 - <b>MESSAGE BODY</b>欄に「 https://twilio.kddi-web.com/price/ 」を入力します。
 - 下へスクロールし、<b>SEND MESSAGE FROM</b>は、購入したTwilio番号から転送するので、
   「+1~から始まるUS番号」に設定し、「Save」を押して、設定を確定します。
![スクリーンショット 2018-07-05 12.00.44.png](https://qiita-image-store.s3.amazonaws.com/0/217201/bbfc312d-fe7b-0a38-fa2d-5b980a7a535f.png)

 - 今作成した<b>Send_Price</b>を複製して、もう一つ事例紹介URLを送信するウィジェットを作成します。
 - <b>Send_Price</b>の複製アイコンをクリックします。
![スクリーンショット 2018-07-05 12.01.17.png](https://qiita-image-store.s3.amazonaws.com/0/217201/46c0fc99-ec47-12a8-e6e3-f44b5abd0968.png)

---
<b>手順５：CONNECT CALL TOウィジェットの設定を変更します。</b>
 - 複製された<b>CONNECT CALL TO</b>ウィジェットの<b>WIDGET NAME</b>を「Send_UseCase」に書き換えます。
 - <b>Check Key</b>ボックスの<b>If value equal_to 2</b>と結合します。
 - <b>MESSAGE BODY</b>欄に「 https://twilio.kddi-web.com/case/」を入力します。
 - 下へスクロールし、<b>SEND MESSAGE FROM</b>は、購入した<b>Twilio</b>番号から転送するので、「+1~から始まるUS番号」に設定し、「Save」を押して、設定を確定します。
![スクリーンショット 2018-07-05 12.01.57.png](https://qiita-image-store.s3.amazonaws.com/0/217201/25b2c700-c952-e771-e0d4-3c60f1005e3a.png)

---
<b>手順６：作成したフローと購入した番号を紐付ける。</b>
 - 左ボタン印 -> 電話番号 -> 番号の管理 を選択します。
 - 購入した050番号を選択し、設定ページを表示します。
 - 設定項目音声着信時プルダウンメニューから<b>StudioFlow</b>を選択し、その横にあるプルダウンメニューから作成したSMSフローを選択し、「保存」します。
![１７.png](https://qiita-image-store.s3.amazonaws.com/0/217201/ef813134-1c63-c4d0-6e9d-5f4cab51a964.png)

---
##実装6-1：ログの確認
<b>シナリオ</b>
フローを実行したタイミングで生成される<b>executionログ</b>を確認します。

<b>手順</b>
<b>executionログ</b>を表示します。
 - 管理コンソールの左側のスライドメニューから、<b>Studio</b>を選択します。
 - 各フローリストの「Logs」を選択します。
 - 「Contact」項目に表示されているFN〜から始まるIDを選択します。
![スクリーンショット 2018-07-05 12.08.54.png](https://qiita-image-store.s3.amazonaws.com/0/217201/b09dfab0-d5c9-5a3f-0d92-f09758d21d91.png)

---
##Twilio Studioが保有するデータ
<b>ログデータ</b>
生成されたタイミングから、90日間が有効期限になります。
フロー実行時に生成される<b>execution</b>や実行されたウィジェットなどの情報を保有します。

<b>コンテキストデータ</b>
Flowが実行されると、以下４種類のデータが保存されます。

Flow   :　Flowに属するデータです。 フローに紐ついているTwilio電話番号など。
Trigger: 最初の受信メッセージ、着信通話、あるいはREST APIなど、Flowの初期化時に設定されるデータです。
Widgets: 各Widgetが自身に設定するデータ、およびコンテキストが実行されるとそれに追加されるデータです。 
         ユーザーが押したプッシュボタンの番号や、受信メッセージの本文などです。
Contact: Flowとやり取りを行なっている相手の連絡先に関するデータで、電話番号などが該当します。

---
##資料

<b>各機能の使い方ガイド</b>
https://jp.twilio.com/docs/
<b>FAQ</b>
https://twilioforkwc.zendesk.com/hc/ja
<b>その他情報</b>
https://twilio.kddi-web.com/news/
https://twilio.kddi-web.com/blog/

---
<b>アンケート</b>
お手数ですが、受付時にお渡したアンケートにご協力をお願いいたします。