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