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