Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Twilio x AITalk 勉強会資料

934 views

Published on

2015-10-28に開催された、Twilio-UG主催の「Twilio x AITalk」勉強会で使用した資料です。

Published in: Technology

Twilio x AITalk 勉強会資料

  1. 1. Twilio+AITalk+Node.js+Socket.ioで、 リアルタイム音声変換チャットを作ろう! TwilioJP ユーザグループ東京 髙橋克己
  2. 2. 自己紹介 髙橋克己(たかはしかつみ) facebook: http://fb.com/katsumi.takahashi グローバル・インターネット・ジャパン株式会社 代表取締役 独立系ソフトハウスに勤務後、1994年に独立。
 主に、通信事業者向けの研修の企画・運営と、Webサービスの開発を 中心に事業を展開。
 フルスタックエンジニア。
 Twilio-UG 東京メンバー。
  3. 3.  Smart Communication Award 2014応募作品 留守電メッセージが文字で届く、国内初の留守番電話サービス TRANSREC
  4. 4.  Smart Communication Award 2015 最優秀賞受賞作品 あなたの代わりに電話をかけます 自動電話リレーサービス
  5. 5. I m DOer
  6. 6. アジェンダ • Twilioをもっと活用するために • node.js+socket.io+twilio • ハンズオン
  7. 7. Twilioをもっと活用 するために
  8. 8. Twilioの素晴らしいところ • 電話とWebが統合されている • 電話屋さん以外でも電話を扱える • 本社(SF)がイケイケ 7月のシリーズE投資ラウンド で1億3000万ドルを調達!
 時価総額は10億ドル超!
  9. 9. 「Twilioは簡単です」(100回以上は聞いたフレーズw) <?php header("content-type: text/xml"); echo "<?xml version="1.0" encoding="UTF-8"?>n"; ?> <Response> <Say>こんにちは</Say> </Response> わずか数行で電話とWebが連携します
  10. 10. でもね、電話って色々面倒くさい • 受信はともかく、発信時は相手の状況に合わせないといけ ない • 電話に出ない • 話中 • 留守電 • ガチャ切り
  11. 11. Twilioあるあるネタ • 今どういう状況かを知りたい • 相手を呼び出している? • 相手は応答したの? • 話中じゃないの? • 何分話したの? • 通話料はいくらかかったの?
  12. 12. そんなときは、人見知りな Status Callback
  13. 13. スターはいつも、Request URL でも、脇役のStatus Callbackが実は渋い。
  14. 14. • いつ発火する? • 着信時は「Completed」のみ • 発信時は色々設定可能(詳しくは次ページ) Status Callbackとは
  15. 15. Status Callbackのトリガー(発信時) • Initiated:Twilioが発信した時 • Ringing:相手側を呼び出している時 • Answered:相手が応答した時 • Completed (デフォルト):切断された時 • Completed以外は有料です($0.0001/event)
  16. 16. • 何を通知してくれるのか(これ以外の情報が付加されるこ ともあります) Status Callbackの内容 CallSid 通話の識別子 AccountSid ユーザのTwilioアカウントID From 発信者番号(E.164フォーマット) To 宛先番号(E.164フォーマット) CallStatus 通話の状態(後ページ) ApiVersion Twilio APIのバージョン Direction 着信 or 発信(inbound/outbound-api/outbound-dial) ForwardedFrom 転送されたかどうか(日本では通知されない) CallerName 発信者IDの検索結果(オプション、1.5円/回) +26696687は
 非通知発信です
  17. 17. Callback Statusリクエストで通知されるCallStatus値
  18. 18. 無敵なAPI、「Update」も覚えておくと良いよ
  19. 19. Updateって? • 現在通話中の通話を変更する必殺技 • /2010-04-01/Accounts/{AccountSid}/Calls/{CallSid} にPOST Helperライブラリ(Node.js)での利用例
  20. 20. どんな時に使うの? • 相手の反応を待たずに、次の動作を行いたい • 準備ができるまで待たせて、準備ができたら対応する。 • 強制的に切断する。 • 途中で別の通話先にリダイレクトする。 <Gather>ではできない操作はupdateで
  21. 21. 今回のハンズオンでも利用します • 相手に<Play>で音声を流す。 • 次に伝えたい文章を作成する。 • 相手の反応を待たずに、次の<Play>を実行する。 Twilio 相手先サーバ Call() ダイヤリング 応答Request URL TwiML wav再生 Update() Request URL TwiML wav再生 <Gather>は 入らない
  22. 22. Status Callbackとupdateが使うと、 Twilioの世界がもっと広がる
  23. 23. Node.js+socket.io +twilio
  24. 24. Node.jsって? • JavaScriptを用いた、Non-blocking I/O環境 • 実質シングルスレッド(イベントループ型) • 内部にGoogle V8(高速なJavaScript実行環境)を採用 • パッケージ管理(npm) もちろんTwilioのライブラリもある • Webサーバー自身をNode.jsで作成可能 • ExpressやSocket.ioなど、有用なフレームワークがある • io.js(Node.jsのFork)と和解し、Node.jsは4.xへ
  25. 25. Socket.ioって? • リアルタイムWebを実現するNode.js用のサーバライブラリ とブラウザ用のJavaScriptライブラリ • WebSocket以外に、ポーリングなどをサポートすることで、 ブラウザ依存せずにリアルタイムWebが可能 • 0.9系と1.0系で仕様がだいぶ変わった点に注意 • socket.emit(event, data)でイベントを送信 • socket.on(event, callback)でイベントを受信
  26. 26. Twilioとの相性は? • 電話はそもそも、相手とつながった後は双方向通信。 • 音声通話と連動させたWebアプリでは、リアルタイムWeb が必要になる。 • 例えば、 • 音声を電話で聞かせながらスライドを表示させるよう なサービス。 • チャットと連動して音声を流すサービス(今回のハン ズオン)。
  27. 27. Twilio用にSocket Clientを用意 Socket server ブラウザ
 Socket Client Twilio 通話先 TwilioはSocket非対応 Twilio用 Socket Client emit() emit() emit() emit() RestAPI 詳しくは後ほどハンズオンで RestAPI
  28. 28. ハンズオン
  29. 29. どんなアプリケーションなのか • ブラウザから電話をかける(話者も選べる) • 電話が応答する(しばらく待てとガイダンス) • ブラウザで文字を入力する • エンターキーをトリガーにして、音声に変換(AITalk) • 音声データを再生(必殺技の「Update」を使う!) • 続けてブラウザで文字を入力する(以後繰り返し) • ブラウザから通話を切断する(再び「Update」炸裂!)
  30. 30. 全体イメージ Twilio Socket
 サーバ Twilio
 Socket
 クライアント Socket
 クライアント 電話機 Twilio
 制御 UserToCenter CenterToUser CenterToTwilio TwilioToCeter Socket.io
 のイベント名 PSTN ブラウザ heroku AITalk
 制御 AITalk Web
 API sio.js twilioClient.js twi.js ai.js user.js Single Page Application
  31. 31. Let s Enjoy !

×