Suche senden
Hochladen
Twilio入門 -Web アプリ編-
•
9 gefällt mir
•
4,798 views
Masashi Shinbara
Folgen
2015/09/30 TwilioJP-UG 大阪 第0回
Weniger lesen
Mehr lesen
Technologie
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 45
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
日本語消えたスライド
日本語消えたスライド
Masashi Shinbara
Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
Masashi Shinbara
【Twilio client】twiliox azureハンズオン
【Twilio client】twiliox azureハンズオン
twilioforkwc
Twilio + OpenWeatherMap APIで天気モーニングコール
Twilio + OpenWeatherMap APIで天気モーニングコール
Mitsuhiro Yamashita
若手Webエンジニア勉強会公開用
若手Webエンジニア勉強会公開用
Hiroki Nigorinuma
いまどきのPHP開発現場 -2015年秋-
いまどきのPHP開発現場 -2015年秋-
Masashi Shinbara
認証機能で学ぶ Laravel 5 アプリケーション
認証機能で学ぶ Laravel 5 アプリケーション
Masashi Shinbara
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
Masashi Shinbara
Empfohlen
日本語消えたスライド
日本語消えたスライド
Masashi Shinbara
Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
Twilio を使えば簡単にできる アプリケーションと電話/SMS連携
Masashi Shinbara
【Twilio client】twiliox azureハンズオン
【Twilio client】twiliox azureハンズオン
twilioforkwc
Twilio + OpenWeatherMap APIで天気モーニングコール
Twilio + OpenWeatherMap APIで天気モーニングコール
Mitsuhiro Yamashita
若手Webエンジニア勉強会公開用
若手Webエンジニア勉強会公開用
Hiroki Nigorinuma
いまどきのPHP開発現場 -2015年秋-
いまどきのPHP開発現場 -2015年秋-
Masashi Shinbara
認証機能で学ぶ Laravel 5 アプリケーション
認証機能で学ぶ Laravel 5 アプリケーション
Masashi Shinbara
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
Masashi Shinbara
レイヤードアーキテクチャを意識した PHPアプリケーションの構築 ver2
レイヤードアーキテクチャを意識した PHPアプリケーションの構築 ver2
Masashi Shinbara
Azure Websites で作るスケーラブルな PHP アプリケーション
Azure Websites で作るスケーラブルな PHP アプリケーション
Masashi Shinbara
先取り!PHP 7 と WordPress
先取り!PHP 7 と WordPress
Masashi Shinbara
リモートチームでうまくいく 〜 これから訪れる働き方の変革
リモートチームでうまくいく 〜 これから訪れる働き方の変革
Yoshihito Kuranuki
PHP Codeception テスト -- 日本語
PHP Codeception テスト -- 日本語
Florent Batard
Vagrant で作る PHP 開発環境 [実践編]
Vagrant で作る PHP 開発環境 [実践編]
Masashi Shinbara
開発現場で活用するVagrant
開発現場で活用するVagrant
Masashi Shinbara
PhpStormを使おう --高槻からは快速急行が早くなります #jbugj
PhpStormを使おう --高槻からは快速急行が早くなります #jbugj
Hisateru Tanaka
それPhpStormで出来るよ #phpstudy
それPhpStormで出来るよ #phpstudy
晃 遠山
新標準PSRに学ぶきれいなPHP
新標準PSRに学ぶきれいなPHP
Yusuke Ando
Twilio API を PHP で触ってみよう
Twilio API を PHP で触ってみよう
Masashi Shinbara
Kintone hands on
Kintone hands on
twilioforkwc
Twilioと山下と学び
Twilioと山下と学び
Mitsuhiro Yamashita
Twilioハンズオン資料 鹿児島
Twilioハンズオン資料 鹿児島
Joohoun Song
Twilioと.NET
Twilioと.NET
Takaaki Suzuki
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Yossy Taka
Typesafe Reactive Platformで作るReactive System
Typesafe Reactive Platformで作るReactive System
TIS Inc.
SoftLayer Bluemix Summit 2015: BluemixでWatsonをつかいたおせ!
SoftLayer Bluemix Summit 2015: BluemixでWatsonをつかいたおせ!
Miki Yutani
ぼっけもんデザイナーへの道
ぼっけもんデザイナーへの道
Hideki Akiba
How to learn Laravel5 application from Authentication
How to learn Laravel5 application from Authentication
Masashi Shinbara
わかってるフレームワーク Laravel
わかってるフレームワーク Laravel
Masashi Shinbara
ビルドサーバで使うDocker
ビルドサーバで使うDocker
Masashi Shinbara
Weitere ähnliche Inhalte
Andere mochten auch
レイヤードアーキテクチャを意識した PHPアプリケーションの構築 ver2
レイヤードアーキテクチャを意識した PHPアプリケーションの構築 ver2
Masashi Shinbara
Azure Websites で作るスケーラブルな PHP アプリケーション
Azure Websites で作るスケーラブルな PHP アプリケーション
Masashi Shinbara
先取り!PHP 7 と WordPress
先取り!PHP 7 と WordPress
Masashi Shinbara
リモートチームでうまくいく 〜 これから訪れる働き方の変革
リモートチームでうまくいく 〜 これから訪れる働き方の変革
Yoshihito Kuranuki
PHP Codeception テスト -- 日本語
PHP Codeception テスト -- 日本語
Florent Batard
Vagrant で作る PHP 開発環境 [実践編]
Vagrant で作る PHP 開発環境 [実践編]
Masashi Shinbara
開発現場で活用するVagrant
開発現場で活用するVagrant
Masashi Shinbara
PhpStormを使おう --高槻からは快速急行が早くなります #jbugj
PhpStormを使おう --高槻からは快速急行が早くなります #jbugj
Hisateru Tanaka
それPhpStormで出来るよ #phpstudy
それPhpStormで出来るよ #phpstudy
晃 遠山
新標準PSRに学ぶきれいなPHP
新標準PSRに学ぶきれいなPHP
Yusuke Ando
Andere mochten auch
(10)
レイヤードアーキテクチャを意識した PHPアプリケーションの構築 ver2
レイヤードアーキテクチャを意識した PHPアプリケーションの構築 ver2
Azure Websites で作るスケーラブルな PHP アプリケーション
Azure Websites で作るスケーラブルな PHP アプリケーション
先取り!PHP 7 と WordPress
先取り!PHP 7 と WordPress
リモートチームでうまくいく 〜 これから訪れる働き方の変革
リモートチームでうまくいく 〜 これから訪れる働き方の変革
PHP Codeception テスト -- 日本語
PHP Codeception テスト -- 日本語
Vagrant で作る PHP 開発環境 [実践編]
Vagrant で作る PHP 開発環境 [実践編]
開発現場で活用するVagrant
開発現場で活用するVagrant
PhpStormを使おう --高槻からは快速急行が早くなります #jbugj
PhpStormを使おう --高槻からは快速急行が早くなります #jbugj
それPhpStormで出来るよ #phpstudy
それPhpStormで出来るよ #phpstudy
新標準PSRに学ぶきれいなPHP
新標準PSRに学ぶきれいなPHP
Ähnlich wie Twilio入門 -Web アプリ編-
Twilio API を PHP で触ってみよう
Twilio API を PHP で触ってみよう
Masashi Shinbara
Kintone hands on
Kintone hands on
twilioforkwc
Twilioと山下と学び
Twilioと山下と学び
Mitsuhiro Yamashita
Twilioハンズオン資料 鹿児島
Twilioハンズオン資料 鹿児島
Joohoun Song
Twilioと.NET
Twilioと.NET
Takaaki Suzuki
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Yossy Taka
Typesafe Reactive Platformで作るReactive System
Typesafe Reactive Platformで作るReactive System
TIS Inc.
SoftLayer Bluemix Summit 2015: BluemixでWatsonをつかいたおせ!
SoftLayer Bluemix Summit 2015: BluemixでWatsonをつかいたおせ!
Miki Yutani
ぼっけもんデザイナーへの道
ぼっけもんデザイナーへの道
Hideki Akiba
Ähnlich wie Twilio入門 -Web アプリ編-
(9)
Twilio API を PHP で触ってみよう
Twilio API を PHP で触ってみよう
Kintone hands on
Kintone hands on
Twilioと山下と学び
Twilioと山下と学び
Twilioハンズオン資料 鹿児島
Twilioハンズオン資料 鹿児島
Twilioと.NET
Twilioと.NET
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Typesafe Reactive Platformで作るReactive System
Typesafe Reactive Platformで作るReactive System
SoftLayer Bluemix Summit 2015: BluemixでWatsonをつかいたおせ!
SoftLayer Bluemix Summit 2015: BluemixでWatsonをつかいたおせ!
ぼっけもんデザイナーへの道
ぼっけもんデザイナーへの道
Mehr von Masashi Shinbara
How to learn Laravel5 application from Authentication
How to learn Laravel5 application from Authentication
Masashi Shinbara
わかってるフレームワーク Laravel
わかってるフレームワーク Laravel
Masashi Shinbara
ビルドサーバで使うDocker
ビルドサーバで使うDocker
Masashi Shinbara
Ansible ではじめるサーバ作業の自動化
Ansible ではじめるサーバ作業の自動化
Masashi Shinbara
PHPコードではなく PHPコードの「書き方」を知る
PHPコードではなく PHPコードの「書き方」を知る
Masashi Shinbara
Heroku で作る スケーラブルな PHP アプリケーション
Heroku で作る スケーラブルな PHP アプリケーション
Masashi Shinbara
Vagrant体験入門
Vagrant体験入門
Masashi Shinbara
VagrantユーザのためのDocker入門
VagrantユーザのためのDocker入門
Masashi Shinbara
Laravel ユーザなら知っておくべきAuthオートログイン
Laravel ユーザなら知っておくべきAuthオートログイン
Masashi Shinbara
キャラ立ちしたエンジニアになる!
キャラ立ちしたエンジニアになる!
Masashi Shinbara
Composer 再入門
Composer 再入門
Masashi Shinbara
Vagrant で PHP 開発環境を作る ハンズオン
Vagrant で PHP 開発環境を作る ハンズオン
Masashi Shinbara
いまどきのPHP
いまどきのPHP
Masashi Shinbara
もう XAMPP / MAMP はいらない! Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない! Vagrant で作る PHP 開発環境
Masashi Shinbara
Vagrant を Web開発環境に使う
Vagrant を Web開発環境に使う
Masashi Shinbara
PHP 5.5 Zend OPcache
PHP 5.5 Zend OPcache
Masashi Shinbara
サーバの防災訓練
サーバの防災訓練
Masashi Shinbara
Kansai PHP Users Group 2012年活動報告
Kansai PHP Users Group 2012年活動報告
Masashi Shinbara
10分で分かる最近のCakePHP
10分で分かる最近のCakePHP
Masashi Shinbara
Mehr von Masashi Shinbara
(19)
How to learn Laravel5 application from Authentication
How to learn Laravel5 application from Authentication
わかってるフレームワーク Laravel
わかってるフレームワーク Laravel
ビルドサーバで使うDocker
ビルドサーバで使うDocker
Ansible ではじめるサーバ作業の自動化
Ansible ではじめるサーバ作業の自動化
PHPコードではなく PHPコードの「書き方」を知る
PHPコードではなく PHPコードの「書き方」を知る
Heroku で作る スケーラブルな PHP アプリケーション
Heroku で作る スケーラブルな PHP アプリケーション
Vagrant体験入門
Vagrant体験入門
VagrantユーザのためのDocker入門
VagrantユーザのためのDocker入門
Laravel ユーザなら知っておくべきAuthオートログイン
Laravel ユーザなら知っておくべきAuthオートログイン
キャラ立ちしたエンジニアになる!
キャラ立ちしたエンジニアになる!
Composer 再入門
Composer 再入門
Vagrant で PHP 開発環境を作る ハンズオン
Vagrant で PHP 開発環境を作る ハンズオン
いまどきのPHP
いまどきのPHP
もう XAMPP / MAMP はいらない! Vagrant で作る PHP 開発環境
もう XAMPP / MAMP はいらない! Vagrant で作る PHP 開発環境
Vagrant を Web開発環境に使う
Vagrant を Web開発環境に使う
PHP 5.5 Zend OPcache
PHP 5.5 Zend OPcache
サーバの防災訓練
サーバの防災訓練
Kansai PHP Users Group 2012年活動報告
Kansai PHP Users Group 2012年活動報告
10分で分かる最近のCakePHP
10分で分かる最近のCakePHP
Kürzlich hochgeladen
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Kürzlich hochgeladen
(7)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Twilio入門 -Web アプリ編-
1.
@shin1x1 2015/09/30 TwilioJP-UG 大阪
第0回 Twilio 入門 - Webアプリ編 -
2.
TwilioとWebアプリの連携
3.
TwilioとWebアプリ (c) 2015 Masashi
Shinbara @shin1x1 • TwilioとWebアプリの関係性 • 電話との接続は、Twilio • TwilioとWebアプリが通信して、動作を決定
4.
(c) 2015 Masashi
Shinbara @shin1x1 電話を受ける
5.
(c) 2015 Masashi
Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio Twilio Webサーバ 050-xxxx-xxxx
6.
(c) 2015 Masashi
Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio HTTPリクエスト
7.
(c) 2015 Masashi
Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio 処理を実行 TwiML生成
8.
(c) 2015 Masashi
Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio TwiMLを返す
9.
(c) 2015 Masashi
Shinbara @shin1x1 電話を受ける 図図 - twilio 図図 - twilio 音声再生 電話を転送 入力受付等々
10.
TwiML (c) 2015 Masashi
Shinbara @shin1x1 • Twilio独自拡張のXML • Twilioへ命令を指示する • 音声再生、録音、入力受付、SMS送信等々
11.
TwiML <?xml version="1.0" encoding="UTF-8"?> <Response> <Say
voice="woman" language="ja-JP">メッセージ</Say> <Record maxLength="20" /> </Response>
12.
TwiML <?xml version="1.0" encoding="UTF-8"?> <Response> <Say
voice="woman" language="ja-JP">メッセージ</Say> <Record maxLength="20" /> </Response> Sayタグ(音声再生)
13.
TwiML <?xml version="1.0" encoding="UTF-8"?> <Response> <Say
voice="woman" language="ja-JP">メッセージ</Say> <Record maxLength="20" /> </Response> Recordタグ(録音)
14.
(c) 2015 Masashi
Shinbara @shin1x1 電話をかける
15.
(c) 2015 Masashi
Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ REST API 電話番号を指示 電話
16.
(c) 2015 Masashi
Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 電話をかける!
17.
(c) 2015 Masashi
Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 通話に利用する TwiML取得
18.
(c) 2015 Masashi
Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 TwiMLに 書かれた処理を行う 音声再生 入力受付 録音など TwiMLを返す
19.
TwilioとWebアプリ (c) 2015 Masashi
Shinbara @shin1x1 • TwilioとWebアプリとの間は、HTTPの世界 • HTTPで受けて、TwiMLを返す • 通常のWebアプリと同じ
20.
サンプルアプリケーション
21.
伝言アプリ (c) 2015 Masashi
Shinbara @shin1x1 • 電話がかかってくる • メッセージを聞く • プッシュフォンを押す => 1なら終了、それ以外なら、もう一度再生 • 誰が聞いたかを記録
22.
(c) 2015 Masashi
Shinbara @shin1x1 • PHP + Laravel + Heroku • twilio-php (PHP版SDK) • コードは、GitHub で公開してます。 伝言アプリ https://github.com/shin1x1/twiliojp-osaka-demo
23.
(c) 2015 Masashi
Shinbara @shin1x1 伝言アプリ DEMO
24.
(c) 2015 Masashi
Shinbara @shin1x1 電話をかける 図図 - twilio 図図 - twilio Twilio Webサーバ REST API実行 電話
25.
(c) 2015 Masashi
Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 電話をかける! 電話をかける
26.
(c) 2015 Masashi
Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 音声再生 入力受付 電話 電話をかける TwiML取得
27.
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>
28.
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>
29.
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>
30.
(c) 2015 Masashi
Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 自動音声が流れる 音声再生
31.
(c) 2015 Masashi
Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 入力待ち プッシュフォン入力
32.
(c) 2015 Masashi
Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 プッシュフォンを押す プッシュフォン入力
33.
(c) 2015 Masashi
Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 入力された番号を通知 プッシュフォン入力
34.
(c) 2015 Masashi
Shinbara @shin1x1 • Twilioサーバから、POSTリクエスト • Digits = 入力した値 • To = 入力した電話の電話番号 プッシュフォン入力
35.
(c) 2015 Masashi
Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 DBに記録 1を入力(終了) 終了音声を流す TwiML
36.
TwiML <?xml version="1.0" encoding="UTF-8"?> <Response> <Say
voice="women" language="ja-JP"> 完了しました。電話を切って下さい。 </Say> </Response>
37.
(c) 2015 Masashi
Shinbara @shin1x1 図図 - twilio 図図 - twilio Twilio Webサーバ 電話 終了音声が流れる 1を入力(終了)
38.
Webアプリ連携の注意点
39.
開発での注意点 (c) 2015 Masashi
Shinbara @shin1x1 • 外部サービスとの連携である • 連携前に検証しておく(自動テストなど) • 自動テストでは、モックを利用 • 連携箇所ではログの記録
40.
Twilioからのリクエストを検証 (c) 2015 Masashi
Shinbara @shin1x1 • HTTPS(自己証明書はNG) • Basic / Digest認証 • リクエストのバリデーション (HMAC-SHA1署名検証) (SDKで対応可)
41.
困ったら (c) 2015 Masashi
Shinbara @shin1x1 http://twilio.kddi-web.com/document/
42.
困ったら (c) 2015 Masashi
Shinbara @shin1x1 https://jp.twilio.com/user/account/log/calls
43.
困ったら (c) 2015 Masashi
Shinbara @shin1x1 https://twiliojp-ug.doorkeeper.jp
44.
まとめ (c) 2015 Masashi
Shinbara @shin1x1 • HTTPとTwiMLで連携 • Webアプリ、Twilio、電話の関係性を把握 • 外部システム連携を意識して開発
45.
@shin1x1 (c) 2015 Masashi
Shinbara @shin1x1
Jetzt herunterladen