twilio入門 -web アプリ編-

　@shin1x1

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

Twilio 入門 - Webアプリ編 -

TwilioとWebアプリの連携

TwilioとWebアプリ

(c) 2015 Masashi Shinbara @shin1x1

• TwilioとWebアプリの関係性 • 電話との接続は、Twilio • TwilioとWebアプリが通信して、動作を決定


電話を受ける


電話を受ける

図図 - twilio

図図 - twilio

TwilioWebサーバ

050-xxxx-xxxx


電話を受ける

図図 - twilio

図図 - twilio

HTTPリクエスト


電話を受ける

図図 - twilio

図図 - twilio

処理を実行 TwiML生成


電話を受ける

図図 - twilio

図図 - twilio

TwiMLを返す


電話を受ける

図図 - twilio

図図 - twilio

音声再生電話を転送入力受付等々

TwiML


• 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


Sayタグ（音声再生）

TwiML


Recordタグ（録音）


電話をかける


電話をかける

図図 - twilio

図図 - twilio

TwilioWebサーバ

REST API 電話番号を指示

電話


電話をかける

図図 - twilio

図図 - twilio

TwilioWebサーバ電話

電話をかける！


電話をかける

図図 - twilio

図図 - twilio


通話に利用する TwiML取得


電話をかける

図図 - twilio

図図 - twilio


TwiMLに書かれた処理を行う

音声再生入力受付録音など

TwiMLを返す

TwilioとWebアプリ


• TwilioとWebアプリとの間は、HTTPの世界 • HTTPで受けて、TwiMLを返す • 通常のWebアプリと同じ

サンプルアプリケーション

伝言アプリ


• 電話がかかってくる • メッセージを聞く • プッシュフォンを押す => 1なら終了、それ以外なら、もう一度再生

• 誰が聞いたかを記録


• PHP + Laravel + Heroku • twilio-php （PHP版SDK） • コードは、GitHub で公開してます。

伝言アプリ

https://github.com/shin1x1/twiliojp-osaka-demo


伝言アプリ

DEMO


電話をかける

図図 - twilio

図図 - twilio

TwilioWebサーバ

REST API実行

電話


図図 - twilio

図図 - twilio


電話をかける！

電話をかける


図図 - 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>


図図 - twilio

図図 - twilio


自動音声が流れる

音声再生


図図 - twilio

図図 - twilio


入力待ち

プッシュフォン入力


図図 - twilio

図図 - twilio


プッシュフォンを押す



図図 - twilio

図図 - twilio


入力された番号を通知



• Twilioサーバから、POSTリクエスト • Digits = 入力した値 • To = 入力した電話の電話番号



図図 - twilio

図図 - twilio


DBに記録

1を入力（終了）

終了音声を流す TwiML

TwiML

<?xml version="1.0" encoding="UTF-8"?> <Response> <Say voice="women" language="ja-JP"> 完了しました。電話を切って下さい。 </Say> </Response>


図図 - twilio

図図 - twilio


終了音声が流れる

1を入力（終了）

Webアプリ連携の注意点

開発での注意点


• 外部サービスとの連携である • 連携前に検証しておく（自動テストなど） • 自動テストでは、モックを利用 • 連携箇所ではログの記録

Twilioからのリクエストを検証


• HTTPS（自己証明書はNG） • Basic / Digest認証 • リクエストのバリデーション（HMAC-SHA1署名検証）（SDKで対応可）

困ったら


http://twilio.kddi-web.com/document/

困ったら


https://jp.twilio.com/user/account/log/calls

https://jp.twilio.com/user/account/log/calls

困ったら


https://twiliojp-ug.doorkeeper.jp

まとめ


• HTTPとTwiMLで連携 • Webアプリ、Twilio、電話の関係性を把握 • 外部システム連携を意識して開発

@shin1x1


twilio入門 -web アプリ編-

Technology