2015/09/30 TwilioJP-UG 大阪 第0回

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