Twilio入門 -Web アプリ編-
- 1. @shin1x1 2015/09/30 TwilioJP-UG 大阪 第0回 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