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

ヘルパーライブラリー

ライブラリからコール


Twilioの3つの機能


Twilio Client


3つのSDKs


JavaScript

WEBRTC


Native SDKs

iOS & Android SDKs


ハンズオン（作業）の流れ

・電話アプリのサンプルダウンロード・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フォルダーだけを取り出して、アプリケーションが参照できるようにサーバーに配置


TwiML Apps作成

ツール → TWIML APPS 「TwiMLAppを作成する」クリック

・Application Sidを確認・フレンドリーネーム設定・Request URL設定最後に「保存」クリック


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

Engineering

【Twilio client】twiliox azureハンズオン