Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Twilio入門 -Web アプリ編-

3,674 views

Published on

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

Published in: Technology
  • Be the first to comment

Twilio入門 -Web アプリ編-

  1. 1.  @shin1x1 2015/09/30 TwilioJP-UG 大阪 第0回 Twilio 入門 - Webアプリ編 -
  2. 2. TwilioとWebアプリの連携
  3. 3. TwilioとWebアプリ (c) 2015 Masashi Shinbara @shin1x1 • TwilioとWebアプリの関係性 • 電話との接続は、Twilio • TwilioとWebアプリが通信して、動作を決定
  4. 4. (c) 2015 Masashi Shinbara @shin1x1 電話を受ける
  5. 5. (c) 2015 Masashi Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio Twilio Webサーバ 050-xxxx-xxxx
  6. 6. (c) 2015 Masashi Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio HTTPリクエスト
  7. 7. (c) 2015 Masashi Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio 処理を実行 TwiML生成
  8. 8. (c) 2015 Masashi Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio TwiMLを返す
  9. 9. (c) 2015 Masashi Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio 音声再生 電話を転送 入力受付等々
  10. 10. TwiML (c) 2015 Masashi Shinbara @shin1x1 • Twilio独自拡張のXML • Twilioへ命令を指示する • 音声再生、録音、入力受付、SMS送信等々
  11. 11. TwiML <?xml version="1.0" encoding="UTF-8"?>
 <Response>
 <Say voice="woman" language="ja-JP">メッセージ</Say>
 <Record maxLength="20" />
 </Response>
  12. 12. TwiML <?xml version="1.0" encoding="UTF-8"?>
 <Response>
 <Say voice="woman" language="ja-JP">メッセージ</Say>
 <Record maxLength="20" />
 </Response> Sayタグ(音声再生)
  13. 13. TwiML <?xml version="1.0" encoding="UTF-8"?>
 <Response>
 <Say voice="woman" language="ja-JP">メッセージ</Say>
 <Record maxLength="20" />
 </Response> Recordタグ(録音)
  14. 14. (c) 2015 Masashi Shinbara @shin1x1 電話をかける
  15. 15. (c) 2015 Masashi Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ REST API 電話番号を指示 電話
  16. 16. (c) 2015 Masashi Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 電話をかける!
  17. 17. (c) 2015 Masashi Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 通話に利用する TwiML取得
  18. 18. (c) 2015 Masashi Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 TwiMLに 書かれた処理を行う 音声再生 入力受付 録音など TwiMLを返す
  19. 19. TwilioとWebアプリ (c) 2015 Masashi Shinbara @shin1x1 • TwilioとWebアプリとの間は、HTTPの世界 • HTTPで受けて、TwiMLを返す • 通常のWebアプリと同じ
  20. 20. サンプルアプリケーション
  21. 21. 伝言アプリ (c) 2015 Masashi Shinbara @shin1x1 • 電話がかかってくる • メッセージを聞く • プッシュフォンを押す
 => 1なら終了、それ以外なら、もう一度再生 • 誰が聞いたかを記録
  22. 22. (c) 2015 Masashi Shinbara @shin1x1 • PHP + Laravel + Heroku • twilio-php (PHP版SDK) • コードは、GitHub で公開してます。 伝言アプリ https://github.com/shin1x1/twiliojp-osaka-demo
  23. 23. (c) 2015 Masashi Shinbara @shin1x1 伝言アプリ DEMO
  24. 24. (c) 2015 Masashi Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ REST API実行 電話
  25. 25. (c) 2015 Masashi Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 電話をかける! 電話をかける
  26. 26. (c) 2015 Masashi Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 音声再生 入力受付 電話 電話をかける TwiML取得
  27. 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. 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. 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. 30. (c) 2015 Masashi Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 自動音声が流れる 音声再生
  31. 31. (c) 2015 Masashi Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 入力待ち プッシュフォン入力
  32. 32. (c) 2015 Masashi Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 プッシュフォンを押す プッシュフォン入力
  33. 33. (c) 2015 Masashi Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 入力された番号を通知 プッシュフォン入力
  34. 34. (c) 2015 Masashi Shinbara @shin1x1 • Twilioサーバから、POSTリクエスト • Digits = 入力した値 • To = 入力した電話の電話番号 プッシュフォン入力
  35. 35. (c) 2015 Masashi Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 DBに記録 1を入力(終了) 終了音声を流す TwiML
  36. 36. TwiML <?xml version="1.0" encoding="UTF-8"?>
 <Response>
 <Say voice="women" language="ja-JP">
 完了しました。電話を切って下さい。
 </Say>
 </Response>
  37. 37. (c) 2015 Masashi Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 終了音声が流れる 1を入力(終了)
  38. 38. Webアプリ連携の注意点
  39. 39. 開発での注意点 (c) 2015 Masashi Shinbara @shin1x1 • 外部サービスとの連携である • 連携前に検証しておく(自動テストなど) • 自動テストでは、モックを利用 • 連携箇所ではログの記録
  40. 40. Twilioからのリクエストを検証 (c) 2015 Masashi Shinbara @shin1x1 • HTTPS(自己証明書はNG) • Basic / Digest認証 • リクエストのバリデーション
 (HMAC-SHA1署名検証)
 (SDKで対応可)
  41. 41. 困ったら (c) 2015 Masashi Shinbara @shin1x1 http://twilio.kddi-web.com/document/
  42. 42. 困ったら (c) 2015 Masashi Shinbara @shin1x1 https://jp.twilio.com/user/account/log/calls
  43. 43. 困ったら (c) 2015 Masashi Shinbara @shin1x1 https://twiliojp-ug.doorkeeper.jp
  44. 44. まとめ (c) 2015 Masashi Shinbara @shin1x1 • HTTPとTwiMLで連携 • Webアプリ、Twilio、電話の関係性を把握 • 外部システム連携を意識して開発
  45. 45. @shin1x1 (c) 2015 Masashi Shinbara @shin1x1

×