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