こんにちは！katsu.tです。
この記事はTwilio Advent Calendar 2019の9日の記事です。
（もうクリスマス当日やん！とか言わないでください。）
（高橋さんにせっつかれました。。。遅くなってすみません。。。。）
この記事を読んでわかること
Twilio ClientからStudioのフローを呼び出すやり方がわかります。
この方法を使うと、複雑なIVRフローもStudioを使って簡単に実装できたり
現在、電話回線で使用しているFlowをClientからも使用できるようになります。
背景
昨今ICT教育や非プログラマーでもプログラミングできる、ビジュアルプログラミングが密かなブームになっていると思います。
そんな中TwilioにもTwiMLを書かずにビジュアルプログラミングでTwiML生成できる機能（Studio）があります。
ハッカソンをやっている時、別の人が作ったフローを流用してClientから呼び出したいことがありました。
Studioのフローのトリガーとなるのは電話回線からの着信、メッセージ受信、発信のみのため普通に使うとClientから直接Studioのフローを呼ぶことはできません。
なので、無理やりClientからStudioフローを呼び出す方法を考えました。
やり方
Twilio Clientを使うまでの準備とTwilio Clientからの呼び出し方法を説明します。
Twilio側の設定
大まかに説明すると以下順序で作成していきます。
※Flowはすでに作られているものとします。
①Flowを電話番号に設定する
②Flowが割り振られた電話番号に転送するTwiMLをTwiML Binsを使って作る
③TwiML APPにTwiML BinsのURLを設定する
④FunctionsにTwiML APPのtokenを返却するFunctionを作成する
図にするとこんな感じです。
①Flowを電話番号に設定する
それでは一つずつ手順をみていこうと思います。
まずは電話番号にStudio Flowを設定します。
②Flowが割り振られた電話番号に転送するTwiMLをTwiML Binsを使って作る
以下内容でTwiML Binsを作成する
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Dial>+8150xxxxxxxx</Dial>
</Response>
③TwiML APPにTwiML BinsのURLを設定する
②で作ったTwiML BinsのURLをコピーします。
コピーした内容をTwiML APPに設定します。
④FunctionsにTwiML APPのtokenを返却するFunctionを作成する
③で作ったTwiML APPからSIDを取得します。
次に以下内容でFunctionを作成し、取得したSID（赤文字になっている部分）を設定します。
exports.handler = function(context, event, callback) {
let response = new Twilio.Response();
// Add CORS Headers
let headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET",
"Content-Type": "application/json"
};
// Set headers in response
response.setHeaders(headers);
response.setStatusCode(200);
let ClientCapability = require('twilio').jwt.ClientCapability;
const identity = 'the_user_id'
const capability = new ClientCapability({
accountSid: context.ACCOUNT_SID,
authToken: context.AUTH_TOKEN,
});
capability.addScope(new ClientCapability.IncomingClientScope(identity));
capability.addScope(new ClientCapability.OutgoingClientScope({
applicationSid: SET_YOUR_SID
clientName: identity,
}));
// Include identity and token in a JSON response
response.setBody({
'identity': identity,
'token': capability.toJwt()
});
callback(null, response);
};
これで、Twilio側の設定は終了です
Clientからの呼び出し
あとは普段通りClientから呼び出すだけです。
JS Sample
$.getJSON('https://cobalt-gull-9197.twil.io/capability-token')
.then(function (data) {
console.log('Got a token.');
console.log('Token: ' + data.token);
// Setup Twilio.Device
......
});
if (device) {
var outgoingConnection = device.connect();
outgoingConnection.on('ringing', function () {
console.log('Ringing...');
});
まとめ
うまく、二つを組み合わせることで、IVRの利便性やハッカソンでコードをかけない人でもプログラミングできたりと用途は色々あるかも？と思いこの記事書いてみましたー
誰かのやくに立てたら何よりです。