2015年2月17日開催の「Twilio x Azrue ハンズオンイベント」の資料。 Twilio Clientを使って、ブラウザから電話の発信と着信ができるウェブアプリケーションを開発する内容です。 ※ ブラウザフォンの開発は下記の動画で紹介していますので、参考資料としてご覧ください。 【Twilio Client 説明動画】 ・Twilio Client 概要 　https://www.youtube.com/watch?v=pIYZq1Y7hyE ・ブラウザフォン開発 -1 　https://www.youtube.com/watch?v=IjSVPFyu2vE ・ブラウザフォン開発 -2 　https://www.youtube.com/watch?v=j46utXnZGhk

1. Twilio x Azure ハンズオン
Twilio X Azure ハンズオン 中級編 : ブラウザ フォンを開発しよう !
2015年2月17日（火）開催
Twilio x Azure ハンズオン Vol.3
Twilio API 勉強会 Vol.21
#twilioapistudy

2. !
Twilio!for!KDDI!Web!Communica5ons !
!
RoR,PHP !
!
!
Twilio!API! !
#twilioapistudy!
自己紹介
@joohounsong

3. Simple：RESTful API

4. 概要

5. <Say>
TwiML
<Record>
<Dial>
<Sms>
<Conference>
<Play>
<Gather>
<Number>
<Sip>
<Client>
<Queue>
<Enqueue>
<Leave>
<Hnagup>
<Redirect>
<Reject>
<Pause>
動詞 名詞 第2動詞

6. ドキュメント：https://jp.twilio.com/docs

7. TwiML：https://jp.twilio.com/docs/api/twiml

8. <Say> <Dial>
<Dial> <Client>
TwiML

9. ハンズオン：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名（ファイル名）を含む）
※ < > は要りません。
※ コマンドをターミナルなどで実行

10. ライブラリ：https://jp.twilio.com/docs/libraries

11. © 2009 - 2014 Twilio, Inc. All rights reserved.
ヘルパーライブラリー

12. ライブラリからコール

13. © 2009 - 2014 Twilio, Inc. All rights reserved.
Twilioの3つの機能

14. © 2009 - 2014 Twilio, Inc. All rights reserved.
Twilio Client

15. © 2009 - 2014 Twilio, Inc. All rights reserved.
3つのSDKs

16. © 2009 - 2014 Twilio, Inc. All rights reserved.
JavaScript
WEBRTC

17. © 2009 - 2014 Twilio, Inc. All rights reserved.
Native SDKs
iOS & Android SDKs

18. © 2009 - 2014 Twilio, Inc. All rights reserved.
ハンズオン（作業）の流れ
・電話アプリのサンプルダウンロード
・PHPヘルパーライブラリーダウンロード
・TwiML Apps作成
・着信用電話番号にTWIML APP設定
・電話アプリにTWIML APP情報設定
・Azureに電話アプリをアップ
・ウェブで電話アプリを実行
・電話アプリから発信（ブラウザ発信）
・電話アプリの着信番号へ発信（ブラウザ着信）

19. 電話アプリのサンプルダウンロード
https://jp.twilio.com/docs/howto/
twilio-client-browser-soft-phone
browser-phone
browser-phone.php
dial_client.xml
dial_number.php

20. PHPヘルパーライブラリーダウンロード
https://jp.twilio.com/docs/php/install#installation
twilio-php-master
Servicesフォルダーだけを取り出して、
アプリケーションが参照できるように
サーバーに配置

21. © 2009 - 2014 Twilio, Inc. All rights reserved.
TwiML Apps作成
ツール → TWIML APPS
「TwiMLAppを作成する」
クリック
・Application Sidを確認
・フレンドリーネーム設定
・Request URL設定
最後に「保存」クリック

22. © 2009 - 2014 Twilio, Inc. All rights reserved.
Request URL設定
TwiMLのパスを設定

23. 着信用電話番号にTWIML APP設定
電話番号 → TWILIO電話番号
「Configure with Application」
クリック
アプリケーションから、
作成した「TwiML APP」を
選択

24. 電話アプリにTWIML APP情報設定
browser-phone.php
①
②
③
④
② Twilio Account 情報設定（ダッシュボードで確認）
① PHPヘルパーライブラリーパス設定 ③ TwiML APP 情報設定
④ SDK バージョン変更（ 1.1 -> 1.2 )

25. 電話アプリにTWIML APP情報設定
dial_number.php
①
① 発信者番号を設定（Twilio契約中の電話番号）
※ 電話番号は、ダッシュボードの「電話番号 → TWILIO電話番号」で確認

26. Azureに電話アプリをアップ
/site/wwwroot
Services
browser-phone
browser-phone.php
dial_client.xml
dial_number.php
PHPヘルパーライブラリー
電話アプリケーション
初期画面
TwiML
TwiML

27. ウェブで電話アプリを実行
http://joohoun-twilio.azurewebsites.net/browser-phone/
browser-phone.php

28. 電話アプリの着信番号へ発信（ブラウザ着信）
http://joohoun-twilio.azurewebsites.net/browser-phone/
browser-phone.php
※ トライアルアカウントご利用の皆様へ
トライアルアカウントの場合、アカウント登録時に検証を行った番号にしか
発信ができませんので、発信テストの際には「検証済み番号」を入力し、
発信テストを行ってください。
（正式アカウントにアップグレードしますとこの制限はなくなります。）
!
※「認証済み番号」確認方法
ダッシュボード → 電話番号 → 検証済み番号

29. 電話アプリの着信番号へ発信（ブラウザ着信）
https://gist.github.com/twilioforkwc4e42ec9ef930cbfc407a
TwiML

30. Azure Web Site

31. Visual Studio Online

32. Visual Studio Online - Monaco

33. Request URLの設定

34. Request URLの設定

35. Request URL

36. ソースコード
しゃべる
録音

37. しゃべる → 録音 → 音声ファイル再生
音声ファイル再生
ソースコード

38. Smart Communication Award 2015
事業化をテーマにしたコンテストアイデア募集中
http://twilio.kddi-web.com/event/
smartcommunicationaward/2015/

39. 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