Category: PHP

Twilioコールセンターアプリ「Runa-CCA」バージョン2.0をリリースしました！
簡易CRMとお客様情報ポップアップ機能追加という、大きな変更だったので、メジャーバージョンを上げました。

簡易CRMはその名の通り簡易な顧客情報管理機能です。
応対履歴も登録可能です。
顧客情報・応対履歴のカラムは今後増やしていきたいと思います。
ソフトフォンからも顧客情報・応対履歴の閲覧・編集を可能にしました。JQueryでAjaxを使って、画面を更新させています。ソースコードに無駄があるような気がするので、これもブラッシュアップしたいところです。

お客様情報のポップアップ画面です。

残念ながらTwilioは、お客様がQueueから出たとき（オペレータがお客様をQueueから出したとき）にイベントを送りません。以下のような作りにして無理くりポップアップさせています。

・オペレータのCallSidを取得。オペレータはQueueに発信します。発信するとその発信呼のCallSidを取得できます。TwilioのConnectionのオブジェクトのプロパティ（connection.parameters.CallSid）として取得可能です。
・Twilioでは、お客様とオペレータがそれぞれ別のTwiML動詞を使って同じQueueに入ります。そうすることで、オペレータはお客様をQueueから出すことができます。オペレータがQueue動詞を使ってQueueに入るとき、urlを指定します。urlには、お客様がQueueから出るときに実行させるTwiML文書のURLを指定します。このURLで指定されるPHPプログラムで、コールの情報を取得し、DBに格納します。ここで、お客様の電話番号である「From」と、「DequeingCallSid」という値がDBに格納されることになります。「DequeingCallSid」というのは、発信者をキューから外した通話のCallSid、すなわち、オペレータのCallSidになります。
・オペレータとお客様との通話が確立した後に、オペレータが「お客様情報ポップアップ」ボタンを押すと、オペレータのCallSid（DequeingCallSid）を検索キーにして、お客様の電話番号（From）を見つけて、それをもとにお客様の情報を表示します。関連して、お客様が入っていたキューの情報と、お客様が電話した電話番号（To）も取得して表示させます。これにより、
　・お客様はどなたなのか？
　・お客様はどの電話番号とどのキューに電話をかけてきたのか？
　をオペレータがすぐわかるようにしています。
・お客様の電話番号は一意ではありません。例えば、お父さんとお母さんが居て、家の電話からコールセンタに電話してきたとすると、1つの電話番号で2人が検索されます。そのため、ポップアップ表示ではお客様のリストを表示する仕様となっています。
・お客様が電話番号を通知してくるとは限りません。その場合は、お客様のお名前や電話番号、お客様IDをお伺いし、検索します。登録されていないお客様の場合は新規に登録を行います。

うーん、無理くりだな。
手動なのをポップアップとは言わない気もしますが、まあ許してくださいませ。

追加した機能の一覧は以下の通りです。

• 簡易CRMとお客様情報ポップアップ
  • お客様情報の検索・追加・変更・削除機能を追加。
  • 応対履歴登録機能を追加。
  • お客様情報ポップアップ機能を追加。Twilioはキューから出るときにイベントを送らないので、手動でボタンを押して情報を取得する必要があります。
• その他
  • twilio.jsを1.2に変更。
  • デザイン統一（シンプル化）。

ソースコードは以下から。

https://github.com/rutoru/Runa-CCA

Twilioコールセンターアプリ「Runa-CCA」バージョン1.2リリースしました。

ソフトフォンにミュート/ミュート解除・DTMF信号送信用ダイヤルパッド機能を搭載しました。
以下のイメージになります。

コールセンターには他にも、保留・転送・会議・モニタ機能が必要になります。
JavaScriptライブラリ「twilio.js」の充実に期待！というところでしょうか。

README.mdにも書いてありますが、他にも変更していて、変更点をまとめると以下の通りです。

• ソフトフォン
  • ミュート/ミュート解除、ダイヤルパッド（DTMF送信用）ボタンを追加。
  • ボタンの表示・非表示を追加（通話設立前はHangUpボタン非表示等）。
  • ソフトフォン小型化。
  • ソフトフォン起動前に、オペレータが持っているキュー情報を更新する仕様に変更。
• Webクライアント
  • キューID（TwilioのFriendly Name）の空白を非許容に変更（CSSと相性悪いので）。a-Z0-9に加えて#_-を許容。
  • キューを持っていないオペレータの表示がエラーになっていたので、エラーにならないように修正。
• その他
  • サンプルSQLのキュー作成部分を削除（Webクライアントからキューを作成してください）。

ソースコードは以下から。

https://github.com/rutoru/Runa-CCA

PHPマイクロフレームワークSlimで作るTwilioコールセンターシステム
1.アプリ紹介編
2.環境設定
　1.ライブラリインストール編
　2.Apache mod_rewrite設定編
　3.CSSとJavaScript編
3.“Twilioコールフローフレームワーク”編

の続きです。

コールフローを作ります。
Twilioからリクエストされることで、コールフローが起動します。以下のような流れ。

1. お客様が050番号に電話する。
2. Twilioによって、050番号の「音声通話」に登録されているRequest URLが、サーバーアプリ（Runa-CCA）にリクエストされる。
3. Runa-CCAでリクエストを処理する。

「050番号の「音声通話」に登録されているRequest URL」ですが、Runa-CCAでは新サービス・製品窓口のコールフロー（NewService）をサンプルとして用意していて、「http://ドメイン名/runa-cca/twilio/callflow/newservice/main」になります。このURLは、Apache mod_rewrite設定の通り、index.phpで処理されることになります。

「“Twilioコールフローフレームワーク”編」に書いた通り、index.phpは、Slimのオブジェクトを作って、ルータ（\Runa_CCA\Route.php）に処理を渡す役割を負います。具体的にはindex.phpの中の、

[php title=”index.php”]
\Runa_CCA\Route::registration($app);
[/php]

によって、ルータに処理が渡されます。
なお、index.phpでsession_start()とかしているのはWebアプリケーション機能用でして、コールフローのみであれば不要になります。

ルータ（\Runa_CCA\Route.php）のregistrationメソッドには以下のように書いてあります。
Request URLに従って、コントローラ（\Runa_CCA\Controller\CallFlow\NewService.php）のstart(“main”)メソッドを呼びます。
GETとPOSTの両方に対応するようにしているのはテスト用です。テスト終わったらPOSTで統一するべきだと思います。
main以外は別途Twilioからリクエストされるものになります。

[php title=”Route.php”]
// CallFlow
// "NewService"
$app->map (‘/twilio/callflow/newservice/main’,
function () {
\Runa_CCA\Controller\CallFlow\NewService::start("main");
})->via(‘GET’, ‘POST’);
$app->map (‘/twilio/callflow/newservice/wait’,
function () {
\Runa_CCA\Controller\CallFlow\NewService::start("wait");
})->via(‘GET’, ‘POST’);
$app->map (‘/twilio/callflow/newservice/info’,
function () {
\Runa_CCA\Controller\CallFlow\NewService::start("info");
})->via(‘GET’, ‘POST’);
$app->map (‘/twilio/callflow/newservice/enqueaction’,
function () {
\Runa_CCA\Controller\CallFlow\NewService::start("enqueaction");
})->via(‘GET’, ‘POST’);
$app->map (‘/twilio/callflow/newservice/guidance’,
function () {
\Runa_CCA\Controller\CallFlow\NewService::start("guidance");
})->via(‘GET’, ‘POST’);
$app->map (‘/twilio/callflow/newservice/statuscallback’,
function () {
\Runa_CCA\Controller\CallFlow\NewService::start("statuscallback");
})->via(‘GET’, ‘POST’);
[/php]

コントローラ（\Runa_CCA\Controller\CallFlow\NewService.php）では、まず、Slimのインスタンスを取得し、Requestで送られてきたパラメータを全て取得します。

[php title=”NewService.php”]
// Get Parameters
$app = \Slim\Slim::getInstance();
$params = $app->request->params();
[/php]

続いて、RequestがTwilioから来たものなのかどうかを検証します。
検証処理については、別記事「Twilioにおける認証（TwilioからのRequestデータ検証）について」に記載の通りです。

[php title=”NewService.php”]
if((new \Runa_CCA\Model\Twilio())->validateTwilioRequest($app, $params)){
[/php]

Trueが返ってきたら、Switch文で判定して、Modelクラスを呼びます。ここからがコールフローの本体です。コールフローでの処理が終わって、ModelクラスからTwiMLオブジェクト（\Services_Twilio_Twimlオブジェクト）が返ってきたら、それをTwiMLを作るVewクラスに渡します。

[php title=”NewService.php”]
// Go to Main CallFlow
case "main" :

$response = (new \Runa_CCA\Model\CallFlow\NewService\Main())->main($params);
(new \Runa_CCA\View\Twiml($app))->createTwiml($response);
break;
[/php]

実は、ここのエラー処理には問題ありなのです。
Webアプリケーション機能とエラー処理を共有しておりまして、日本語でエラーページを返す仕様にしています。
しかしそうすると、Twilioホームページでログ確認するときに文字化けしてしまうんです。コールフロー用のエラーページを英語で作らないといけません。この点は別記事に書いておきました。
別途修正予定です。

TwiMLを作るTwiMLクラスですが、以下のようにTemplateを呼び出し、Twigでレンダリングさせます。

[php title=”TwiML.php”]
class Twiml {

public function __construct($app){

$this->app = $app;

}

public function createTwiml($twilioObj){

$this->app->render(
‘TwiML/twiml.twig’,
[
‘twiml’ => $twilioObj,
]
);

}
}
[/php]

Twigを使用している場合は、

[html]
{% autoescape true %}
ほげほげ
{% endautoescape %}
[/html]

でエスケープされます。
しかし、TwiMLを出力させるので、オートエスケープをオンにしてしまうと、TwiMLのタグがすべてエスケープされてしまいます。そのため、

[html]
{% autoescape false %}
{{ twiml }}
{% endautoescape %}
[/html]

として、エスケープしないようにしています。

しかし、例えばお客様から電話機で番号入力させて、それをTwilioで読み上げたりするような場合は、エスケープする必要があります。
twilio-phpで自動でエスケープしてくれるのですが、\Services_Twilio_Twimlクラスの__callマジックメソッドのコメントを読むと、「経験ない開発者の中にはアンパサンドをエスケープしない人がいる」といった記載がありました。twilio-phpには頼らずエスケープ処理せい、ということなんでしょう。

Runa-CCAでは、\Base\Conf内にエスケープするメソッドを用意しておりまして、TwiMLを作成するときにはそのメソッドを実行してエスケープするようにしています。

次回はコールフローの中身を見ていく予定です。

Twilioコールセンターアプリ「Runa-CCA」バージョン1.1.1リリースしました。

ウォールボード機能を搭載しました。
以下のイメージになります。

管理画面（Configurator）に「ウォールボード」リンクがあります。
そこをクリックすると、自分が所属しているキューのリアルタイム情報が表示されます。
表示項目は画像をご覧の通り。
画面は10秒更新にしました。

あと、TwiML出力方法の変更。Webクライアント側と合わせてTwigを利用するようにしました。不要ファイルの削除と、細かなバグ修正を実施しています。
アップしたとたんにバグを見つけたので、最新リリースは1.1.1になります。
もっと試験しないとな。

GitHubにアップしております。ソースコードは以下から。

https://github.com/rutoru/Runa-CCA

Twilioコールセンター（コンタクトセンター）用アプリケーションを作っていて、機能や画面イメージはこちらで紹介しています。
修正を行い、GitHubタグを1.0にしました。
0.8から以下を更新しています。

• Webクライアントのキュー管理機能をTwilioと統合。Twilio REST APIを使用し、WebクライアントからTwilioのQueue追加・変更・削除が可能になりました。
• Webクライアントのオペレータ管理・キュー管理において、トランザクション管理を実装。TwilioのREST APIが動作しなかった場合にもDBロールバックを行うようにしました。
• Webクライアントの管理画面（Configurator）権限を以下の通りに整理しました。
  • Operator … 何も出来ない（自分のパスワード変更のみ）
  • Supervisor … オペレータ管理
  • SystemAdmin … キュー管理＋オペレータ管理
• Twilioからリクエストされる部分について、Twilio推奨の認証（検証）方法を導入しました。
• 上記実現のため、ソースコードならびにDB構造の変更を行っています。

ソフトフォン機能の充実に進みたいところなのですが、JQueryとか学ばないといかんかなあ。
まずはその前に今までやってきたことのまとめだ。

https://github.com/rutoru/Runa-CCA

PHPマイクロフレームワークSlimで作るTwilioコールセンターシステム
　1.アプリ紹介編
　2.環境設定
　　1.ライブラリインストール編
　　2.Apache mod_rewrite設定編
　　3.CSSとJavaScript編

の続きです。

前回までで設置と設定が終わったはず。
今回は、Runa-CCAの「Webクライアント」機能と「コールフロー」機能のうちの、「コールフロー」機能の作りについて書きます。

Twilioのコールフロー機能を考えるにあたって、フレームワーク化したいなあと思いました。

お客様がコールセンターの電話番号に電話すると、Twilioの050の電話番号に登録されている「音声通話」のURLに対して、Twilioがリクエストを投げます。そのリクエストを受けて、コールフローが起動します。
Twilioの設定で、ある050番号の音声通話のURLに、例えば「http://Runa-CCAのドメイン名/runa-cca/twilio/callflow/newservice/main」を登録しておきます。そうすると、お客様がその050番号に電話してきたら、Twilioによって音声通話のURLがリクエストされるわけです。「Apache mod_rewrite設定編」で設定した通り、/runa-ccaに来たURLは、Apacheの機能で/runa-cca/index.phpにリライトされ、処理されることになります。

ここからが”Twilioコールフローフレームワーク”になります。
以下のような構成にしました。

• 前提
  1. コールセンターには、コールフローがいくつもある。
  2. コールセンターにおいて、コールフローはビジネスロジックである。

  　コールセンターによってはコールフローはたくさんあります。数十とかあります。そしてコールフローは、コールセンター独自の仕組みであり、電話インタフェースと統計データベースとのやり取りを制御するものでもありますので、ビジネスロジックであろうと思います。ま、ビジネスロジックの定義は色々のようですが。

• “Twilioコールフローフレームワーク”
  1. index.phpは、Slimのオブジェクトを作って、ルータ(\Runa_CCA\Route.php）に登録して、Slimを実行させる。（それだけしかしない）
  2. Route.phpは、URLに応じ、適切なController（コントローラ）にルーティングする。（それだけしかしない）前提1の通り、コールセンターにはコールフローがいくつもある。そのため、Controllerフォルダ配下にコールフロー毎にフォルダを作って、コールフロー毎のコントローラを一括管理する。言うまでもなくnamespaceも別にする。コールフローの場合、Route.phpは\Runa_CCA\Controller\CallFlow配下の適切なコールフローを呼び出す。
  3. コールフロー毎のコントローラが行うのは、Model配下のコールフロービジネスロジックの呼び出しと、Twilio用のTwiML作成Viewクラスの呼び出しだけ。（それだけしかしない）
  4. 前提2の通り、コールフローはビジネスロジック。そのため、コールフロー本体はModel（モデル）として整理。前提1の通り、コールフローはたくさんあるので、Model配下にコールフロー毎のフォルダを作って、そこに一括管理し、コールフローのIVR処理や統計データベースへのデータ保存といった処理を実行する。（ここでがっつりと処理を実施する）
  5. Modelのコールフローが処理を終えたら、Controllerに一度戻し、ControllerからViewが呼ばれて、TwiMLが作成され、TwilioにResponseとして返される。（それだけしかしない）

まあ大した話ではないのですが、そんな構造にしてみたわけです。
フォルダ構造は以下の通りになります。

/var/www/html/runa-cca/
 |-htdocs ... 公開用ディレクトリ
 |   |-index.php ... すべての入り口
 |
 |-lib ... 作成したクラスライブラリ
 |   |-Base ... 設定クラス置き場
 |   |-Runa_CCA ... Runa-CCAクラス置き場
 |       |-Route.php ... いわゆるルータ
 |       |
 |       |-Controller ... コントローラクラス置き場
 |       |   |-CallFlow ... コールフロー毎のコントローラクラス置き場
 |       |       |-NewService ... コールフロー「NewService」のコントローラクラス置き場
 |       |
 |       |-Model ... モデルクラス置き場
 |       |   |-CallFlow ... コールフロー毎のモデルクラス置き場
 |       |       |-NewService ... コールフロー「NewService」のモデルクラス置き場
 |       |
 |       |-Model ... ビュークラス置き場
 |
 |-templates ... テンプレートファイル

次回からはソースを追いかけながらコールフローの流れを書きます。