1.
@shin1x1
2015/09/30 TwilioJP-UG 大阪 第0回
Twilio 入門
- Webアプリ編 -

2.
TwilioとWebアプリの連携

3.
TwilioとWebアプリ
(c) 2015 Masashi Shinbara @shin1x1
• TwilioとWebアプリの関係性
• 電話との接続は、Twilio
• TwilioとWebアプリが通信して、動作を決定

4.
(c) 2015 Masashi Shinbara @shin1x1
電話を受ける

5.
(c) 2015 Masashi Shinbara @shin1x1
電話を受ける
図図 - twilio
図図 - twilio
Twilio
Webサーバ
050-xxxx-xxxx

6.
(c) 2015 Masashi Shinbara @shin1x1
電話を受ける
図図 - twilio
図図 - twilio
HTTPリクエスト

7.
(c) 2015 Masashi Shinbara @shin1x1
電話を受ける
図図 - twilio
図図 - twilio
処理を実行
TwiML生成

8.
(c) 2015 Masashi Shinbara @shin1x1
電話を受ける
図図 - twilio
図図 - twilio
TwiMLを返す

9.
(c) 2015 Masashi Shinbara @shin1x1
電話を受ける
図図 - twilio
図図 - twilio
音声再生
電話を転送
入力受付等々

10.
TwiML
(c) 2015 Masashi Shinbara @shin1x1
• Twilio独自拡張のXML
• Twilioへ命令を指示する
• 音声再生、録音、入力受付、SMS送信等々

11.
TwiML
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say voice="woman" language="ja-JP">メッセージ</Say>
<Record maxLength="20" />
</Response>

12.
TwiML
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say voice="woman" language="ja-JP">メッセージ</Say>
<Record maxLength="20" />
</Response>
Sayタグ（音声再生）

13.
TwiML
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say voice="woman" language="ja-JP">メッセージ</Say>
<Record maxLength="20" />
</Response>
Recordタグ（録音）

14.
(c) 2015 Masashi Shinbara @shin1x1
電話をかける

15.
(c) 2015 Masashi Shinbara @shin1x1
電話をかける
図図 - twilio
図図 - twilio
Twilio
Webサーバ
REST API
電話番号を指示
電話

16.
(c) 2015 Masashi Shinbara @shin1x1
電話をかける
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
電話をかける！

17.
(c) 2015 Masashi Shinbara @shin1x1
電話をかける
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
通話に利用する
TwiML取得

18.
(c) 2015 Masashi Shinbara @shin1x1
電話をかける
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
TwiMLに
書かれた処理を行う
音声再生
入力受付
録音など
TwiMLを返す

19.
TwilioとWebアプリ
(c) 2015 Masashi Shinbara @shin1x1
• TwilioとWebアプリとの間は、HTTPの世界
• HTTPで受けて、TwiMLを返す
• 通常のWebアプリと同じ

20.
サンプルアプリケーション

21.
伝言アプリ
(c) 2015 Masashi Shinbara @shin1x1
• 電話がかかってくる
• メッセージを聞く
• プッシュフォンを押す
=> 1なら終了、それ以外なら、もう一度再生
• 誰が聞いたかを記録

22.
(c) 2015 Masashi Shinbara @shin1x1
• PHP + Laravel + Heroku
• twilio-php （PHP版SDK）
• コードは、GitHub で公開してます。
伝言アプリ
https://github.com/shin1x1/twiliojp-osaka-demo

23.
(c) 2015 Masashi Shinbara @shin1x1
伝言アプリ
DEMO

24.
(c) 2015 Masashi Shinbara @shin1x1
電話をかける
図図 - twilio
図図 - twilio
Twilio
Webサーバ
REST API実行
電話

25.
(c) 2015 Masashi Shinbara @shin1x1
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
電話をかける！
電話をかける

26.
(c) 2015 Masashi Shinbara @shin1x1
図図 - twilio
図図 - twilio
Twilio
Webサーバ
音声再生
入力受付
電話
電話をかける
TwiML取得

27.
TwiML
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say voice="man" language="ja-JP">
ようこそ！TwilioUG-Osakaへ。楽しんで下さいね。
</Say>
<Gather timeout="10" numDigits="1" action="/twilio/gathering">
<Say voice="women" language="ja-JP">
完了するには、1、を、もう一度聞くには、2、をプッシュして下さい。
</Say>
</Gather>
</Response>

28.
TwiML
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say voice="man" language="ja-JP">
ようこそ！TwilioUG-Osakaへ。楽しんで下さいね。
</Say>
<Gather timeout="10" numDigits="1" action="/twilio/gathering">
<Say voice="women" language="ja-JP">
完了するには、1、を、もう一度聞くには、2、をプッシュして下さい。
</Say>
</Gather>
</Response>

29.
TwiML
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say voice="man" language="ja-JP">
ようこそ！TwilioUG-Osakaへ。楽しんで下さいね。
</Say>
<Gather timeout="10" numDigits="1" action="/twilio/gathering">
<Say voice="women" language="ja-JP">
完了するには、1、を、もう一度聞くには、2、をプッシュして下さい。
</Say>
</Gather>
</Response>

30.
(c) 2015 Masashi Shinbara @shin1x1
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
自動音声が流れる
音声再生

31.
(c) 2015 Masashi Shinbara @shin1x1
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
入力待ち
プッシュフォン入力

32.
(c) 2015 Masashi Shinbara @shin1x1
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
プッシュフォンを押す
プッシュフォン入力

33.
(c) 2015 Masashi Shinbara @shin1x1
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
入力された番号を通知
プッシュフォン入力

34.
(c) 2015 Masashi Shinbara @shin1x1
• Twilioサーバから、POSTリクエスト
• Digits = 入力した値
• To = 入力した電話の電話番号
プッシュフォン入力

35.
(c) 2015 Masashi Shinbara @shin1x1
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
DBに記録
1を入力（終了）
終了音声を流す
TwiML

36.
TwiML
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say voice="women" language="ja-JP">
完了しました。電話を切って下さい。
</Say>
</Response>

37.
(c) 2015 Masashi Shinbara @shin1x1
図図 - twilio
図図 - twilio
Twilio
Webサーバ 電話
終了音声が流れる
1を入力（終了）

38.
Webアプリ連携の注意点

39.
開発での注意点
(c) 2015 Masashi Shinbara @shin1x1
• 外部サービスとの連携である
• 連携前に検証しておく（自動テストなど）
• 自動テストでは、モックを利用
• 連携箇所ではログの記録

40.
Twilioからのリクエストを検証
(c) 2015 Masashi Shinbara @shin1x1
• HTTPS（自己証明書はNG）
• Basic / Digest認証
• リクエストのバリデーション
（HMAC-SHA1署名検証）
（SDKで対応可）

41.
困ったら
(c) 2015 Masashi Shinbara @shin1x1
http://twilio.kddi-web.com/document/

42.
困ったら
(c) 2015 Masashi Shinbara @shin1x1
https://jp.twilio.com/user/account/log/calls

43.
困ったら
(c) 2015 Masashi Shinbara @shin1x1
https://twiliojp-ug.doorkeeper.jp

44.
まとめ
(c) 2015 Masashi Shinbara @shin1x1
• HTTPとTwiMLで連携
• Webアプリ、Twilio、電話の関係性を把握
• 外部システム連携を意識して開発

45.
@shin1x1
(c) 2015 Masashi Shinbara @shin1x1