クラウド型 ワークフロー

Twilio で電話の無いコールセンター!? (ブラウザで電話を受ける編)

「受電で業務プロセスを自動開始編」の続編。コールセンターに一歩前進!

せっかく CTO なので、やっぱり技術の話題を…

前回 (記事はこちら) は問い合わせ電話を受けて、自動的にプロセスを起動することを実現しました。ただ問い合わせを電話機で受ける仕組みでした。どうせなら電話を PC、それもブラウザで受電するように改良したいと思います。その方が本格的なコールセンターシステムっぽくて、格好いいですよね。これも Twilio で実現することができます。

全体の仕組みは以下の通りです。大きな流れは前回と変わりませんが、3 のステップだけ異なります。

0. 予め Twilio で電話番号を取得し、問い合わせ電話番号として公開する

1. ユーザは問い合わせ電話番号に電話をかける

2. Twilio から Google App Engine へHTTPリクエスト

Twilio は電話を受けると、Google App Engine へ HTTP リクエストを送信します。
この時、どこに HTTP リクエストを送信するかも、予め Twilio に登録しておきます。
Twilio の管理画面では、「取得した電話番号に電話があったら、このURLにHTTPリクエストを送信する」という登録を行うことができます。

3. HTTPリクエストに対して、Google App Engine から 指定のアプリケーションに電話を転送するように応答する

このステップが前回と異なります。前回は電話で問い合わせを受けたので、転送先は電話番号でした。今回は特定のPCのブラウザに転送したいので、転送先の指定が変わります。Google App Engine では、Twilio から HTTPリクエストを受けると、以下のXMLを返すようにします。

<Response>
  <Say>Please wait for few seconds.</Say>
  <Dial record="true" action="http://questetra-twilio.appspot.com/callend" method="GET">
    <Client>support</Client>
  </Dial>
</Response>

XML (TwiML) の意味は、以下の通りです。

  • “Please wait for few seconds.” と自動応答する (<Say>…</Say>)
  • その上で、”support” で識別されるアプリケーション(問い合わせ担当者のブラウザ)に電話を転送する(<Client>support</Client>)
  • 転送した電話の内容を、録音する (record=”true”)
  • 電話が完了したら、指定のURLにHTTPリクエストをGETで送信する (action=”http://questetra-twilio.appspot.com/callend” method=”GET”)

4. ユーザと問い合わせ担当者が通話

Twilio は ユーザの電話は、”support” で識別されるアプリケーション(問い合わせ担当者のブラウザ)に転送します。かつその通話内容を録音します。

5. 通話終了時に、Google App Engine へHTTPリクエスト

ユーザと問い合わせ担当者の通話が終了すると、Twilio は TwiML で指定されたURL にHTTPリクエストを行います。この際、録音した通話内容をダウンロードできる URL がHTTPパラメータに含まれます。

6. Google App Engine は Twilio からの HTTP リクエストを解析し、Questetra BPM Suite へ HTTP リクエスト

Google App Engine は Twilio から HTTP リクエストを受け取ると、その内容を解析します。
その上で、Questetra BPM Suite のメッセージ開始イベントを呼び出して、プロセスを開始します。そのプログラムを添付します。(拡張子がtxtになっていますが、このサイトの都合です。java のプログラムです。)

大きな流れは前回と変わらず、上記の通りです。ただ電話と異なり、転送先のアプリケーションには、世界共通の ID がありません。上記では “support” に転送していますが、このままでは 「”support” ってなんだ?」となってしまいます。そこでステップ1の「ユーザは問い合わせ電話番号に電話をかける」の前に、予め問い合わせ担当者が自分のブラウザを、”support” という名前で twilio に登録しておきます。その流れは以下のとおりです。

Webプログラムを添付します。拡張子がtxt になっていますが、JSP のプログラムです。プログラムはサーバサイドで処理されるJSPのスクリプト部分と、ブラウザで処理される javascript 部分に分かれています。ユーザがWebプログラムにアクセスすると(1)、まずは JSP スクリプトの部分が、サーバサイドで実行されます(2)。ここで Twilio とやり取りをし、ブラウザが Twilio に接続するための事前準備を行なっています。

<%@ page contentType="text/html; charset=UTF-web_client8"
	import="com.twilio.sdk.client.TwilioCapability,com.twilio.sdk.client.TwilioCapability.DomainException" %>
<%
String ACCOUNT_SID = "..."; /* Twilio アカウントを識別する ID */
String AUTH_TOKEN = "..."; /* Twilio の API にアクセスする際のキー */

TwilioCapability capability = new TwilioCapability(ACCOUNT_SID, AUTH_TOKEN);
capability.allowClientIncoming("support"); /* "support" という名前で登録することを指定 */

String token = null;
try {
  token = capability.generateToken(); /* 一時トークンを指定。Javascript に渡す */
} catch (DomainException e) {
  throw new ServletException(e);
}
pageContext.setAttribute("token", token);
%>

 

サーバサイドでTwilioとやり取りし、ここで “support” という名前で登録を行なっています。あくまでこの名前は、指定した Twilio アカウントの中でのみ有効です。Twilio 全体で有効なわけではありません。登録に成功すると、一時的なトークンが Twilio より渡されるので、これを Javascript に渡します(3)。Javascript ではこのトークンを用いて Twilio とやり取りを行います。Twilio アカウント等の情報を Javascript で取り扱わないので、セキュリティは確保されています。ブラウザがWebプログラムから応答を受け取ると、ブラウザ上で Javascript プログラムが実行されます(4)。

 

<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function(){
  /* Twilio のセットアップ */
  Twilio.Device.setup("${token}", {debug: true});
  /* 受電可能な状態になった時に呼ばれる関数 */
  Twilio.Device.ready(function (device) {
    jQuery("#log").text("Ready");
  });
  /* 電話がかかってきた時に呼ばれる関数 */
  Twilio.Device.incoming(function (conn) {
    jQuery("#log").text("Incoming connection from " + conn.parameters.From);
    jQuery('button.call').one('click', function(){
      /* 受電する */
      conn.accept();
      jQuery("#log").text(conn.status);

ポイントは3箇所、最初のscriptタグ、Twilio.Deveice.setup() と Twilio.Device.incoming() です。script タグで Twilio が提供している Javascript を読み込んでいます。Twilio が提供している Javascript ですので、この Javascript は提供元であるTwilio 自身と通信可能です。2つ目のポイントが Twilio.Device.incoming() です。このメソッドで Twilio との通信を確立し、ブラウザで受電可能な状態にしています。setup() メソッドには、サーバサイドで生成した一時トークンを引数に指定します。

最後のポイントが Twilio.Device.incoming() です。電話がかかってくると、Twilio.Device.incoming() で指定した関数が呼ばれます。指定した関数の引数に渡されてくる Twilio.Connection オブジェクトの accept() メソッドを呼ぶことで、通話を開始することができます。サンプルプログラムでは、かかってきた電話を拒否することもできるようにしています。

 

このプログラムは javascript ですが、マイクやスピーカとのやり取りは Flash が行なっています。実際に通話する際には、Flash からマイク/スピーカーの使用許可を求められるので、許可する必要があります。受電可能な状態で、実際に電話がかかってくると以下のような画面になります。

 

いかがでしたでしょうか。前回からブラウザで着電できるようにしただけですが、ちょっと本格的なコールセンターシステムになった気がします。更に作りこめば、PCで通話しながら、データを入力するということができるでしょう。続編にご期待ください。

 

★関連ブログ投稿

あわせて読みたい
15.野望・展望・志 の前の記事 学生起業家へのエール
15.野望・展望・志 の次の記事 社内 SNS、強化シマス!
Hatanaka Akihiro の他の記事 電光掲示板で業務の状況をモニタリングする ~とりあえず1桁~

アーカイブ

 RSS