【twilio client】twiliox azureハンズオン

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