Twilio x Azure ハンズオン Twilio X Azure ハンズオン 中級編 : ブラウザ フォンを開発しよう !
2015年2月17日(火)開催 Twilio x Azure ハンズオン Vol.3 Twilio API 勉強会 Vol.21
#twilioapistudy
����:,7�*437;!Twilio!for!KDDI!Web!Communica5ons���! ��� ��!!$%0"16(9)57&7*.":RoR,PHP��;!!&7*."��#27-!�������� ��!8���/7+'7#27-�Twilio!API!��!����� ��!
#twilioapistudy!
自己紹介
@joohounsong
Simple:RESTful API
概要
<Say>
TwiML
<Record>
<Dial>
<Sms>
<Conference>
<Play>
<Gather>
<Number>
<Sip><Client>
<Queue>
<Enqueue>
<Leave><Hnagup>
<Redirect>
<Reject>
<Pause>
動詞 名詞 第2動詞
ドキュメント:https://jp.twilio.com/docs
TwiML:https://jp.twilio.com/docs/api/twiml
<Say> <Dial>
<Dial> <Client>
TwiML
ハンズオン:curl
<Play>curl -‐X POST ‘https://api.twilio.com/2010-‐04-‐01/Accounts/ Account SID/Calls.xml' \ -‐d 'From=%2B8150xxxxxxxx' \ -‐d 'To=%2B8180xxxxxxxx' \ -‐d 'Url=http%3A%2F%2F<twiML URL>' \ -‐u Account SID:Auth Token
※ 白部分のみ自分の情報を設定 ・Account SID 、Auth Token:自分のダッシュボードから確認 ・From : 発信元の電話番号(Twilio電話番号) ・To:発信先の電話番号 ・Url : TwiMLが格納されているサーバー(TwiML名(ファイル名)を含む) ※ “< >”は要りません。 ※ コマンドをターミナルなどで実行
ライブラリ:https://jp.twilio.com/docs/libraries
© 2009 - 2014 Twilio, Inc. All rights reserved.
ヘルパーライブラリー
ライブラリからコール
© 2009 - 2014 Twilio, Inc. All rights reserved.
Twilioの3つの機能
© 2009 - 2014 Twilio, Inc. All rights reserved.
Twilio Client
© 2009 - 2014 Twilio, Inc. All rights reserved.
3つのSDKs
© 2009 - 2014 Twilio, Inc. All rights reserved.
JavaScript
WEBRTC
© 2009 - 2014 Twilio, Inc. All rights reserved.
Native SDKs
iOS & Android SDKs
© 2009 - 2014 Twilio, Inc. All rights reserved.
ハンズオン(作業)の流れ
・電話アプリのサンプルダウンロード ・PHPヘルパーライブラリーダウンロード ・TwiML Apps作成 ・着信用電話番号にTWIML APP設定 ・電話アプリにTWIML APP情報設定 ・Azureに電話アプリをアップ ・ウェブで電話アプリを実行 ・電話アプリから発信(ブラウザ発信) ・電話アプリの着信番号へ発信(ブラウザ着信)
電話アプリのサンプルダウンロード
https://jp.twilio.com/docs/howto/ twilio-client-browser-soft-phone
browser-phonebrowser-phone.phpdial_client.xmldial_number.php
PHPヘルパーライブラリーダウンロード
https://jp.twilio.com/docs/php/install#installation
twilio-php-master Servicesフォルダーだけを取り出して、 アプリケーションが参照できるように サーバーに配置
© 2009 - 2014 Twilio, Inc. All rights reserved.
TwiML Apps作成
ツール → TWIML APPS 「TwiMLAppを作成する」 クリック
・Application Sidを確認 ・フレンドリーネーム設定 ・Request URL設定 最後に「保存」クリック
© 2009 - 2014 Twilio, Inc. All rights reserved.
Request URL設定
TwiMLのパスを設定
着信用電話番号にTWIML APP設定
電話番号 → TWILIO電話番号 「Configure with Application」 クリック
アプリケーションから、 作成した「TwiML APP」を 選択
電話アプリにTWIML APP情報設定
browser-phone.php
①②
③
④
② Twilio Account 情報設定(ダッシュボードで確認)① PHPヘルパーライブラリーパス設定 ③ TwiML APP 情報設定
④ SDK バージョン変更( 1.1 -> 1.2 )
電話アプリにTWIML APP情報設定
dial_number.php
①
① 発信者番号を設定(Twilio契約中の電話番号) ※ 電話番号は、ダッシュボードの「電話番号 → TWILIO電話番号」で確認
Azureに電話アプリをアップ
/site/wwwrootServicesbrowser-phone
browser-phone.phpdial_client.xmldial_number.php
PHPヘルパーライブラリー電話アプリケーション
初期画面
TwiML
TwiML
ウェブで電話アプリを実行
http://joohoun-twilio.azurewebsites.net/browser-phone/browser-phone.php
電話アプリの着信番号へ発信(ブラウザ着信)
http://joohoun-twilio.azurewebsites.net/browser-phone/browser-phone.php
※ トライアルアカウントご利用の皆様へ トライアルアカウントの場合、アカウント登録時に検証を行った番号にしか 発信ができませんので、発信テストの際には「検証済み番号」を入力し、 発信テストを行ってください。 (正式アカウントにアップグレードしますとこの制限はなくなります。) !※「認証済み番号」確認方法 ダッシュボード → 電話番号 → 検証済み番号
電話アプリの着信番号へ発信(ブラウザ着信)
https://gist.github.com/twilioforkwc4e42ec9ef930cbfc407a
TwiML
Azure Web Site
Visual Studio Online
Visual Studio Online - Monaco
Request URLの設定
Request URLの設定
Request URL
ソースコード
しゃべる
録音
しゃべる → 録音 → 音声ファイル再生
音声ファイル再生
ソースコード
Smart Communication Award 2015
事業化をテーマにしたコンテストアイデア募集中 http://twilio.kddi-web.com/event/smartcommunicationaward/2015/
Twilioのコミュニティ
■twitter : @twilioforkwc ■facebook: ◎ page : https://facebook.com/TwilioforKWC ◎ group: https://facebook.com/groups/twilioforkwc ■SlideShare : http://slideshare.net/twilioforkwc ■Doorkeeper:http://twiliomeetup.doorkeeper.jp ■GitHub:https://github.com/twilioforkwc ■YouTubu:https://youtube.com/user/twilioforkwc
Recommended