« 【場所めも】福島 喜多方 | トップページ | wikiをTwilioのCMSに使用した事例の説明の続き:wikiの機能とTwilioが拓く可能性 »

2013年6月12日 (水)

wikiをTwilioのCMSに使用した事例の説明。

今回は、Twilioに関する先日のブログの続きとして、wikiがTwikiML.phpと連携してどのようにTwilioのCMSとして動作するか、説明します。

より正確には、

”Twilioを利用したIVR(自動音声応答システム)の一例として、自動音声の元となるテキスト群を格納するwikiと、wikiとTwilioの間の橋渡しを担うTwikiML.phpから成るものを作成したので、ここで一連の動きを説明します。”

となります(長い、B'zのあの曲よりも長い、、、)。


<説明の準備1/2:wiki内のテキストコンテンツ>

説明の為、wiki内に以下のような居酒屋のIVR風の簡単なテキストコンテンツを3つ用意しました。

最初のコンテンツ:はじめのご案内(C1)
1 (お電話ありがとうございます。居酒屋○○です。今日のおすすめは1を、当店への道案内は2を押して下さい。)

ひとつめのリンクの先のコンテンツ:今日のおすすめ(C1-1)
2 (きょうのおすすめは、刺身盛り合わせ800円、地鶏焼き鳥セット500円、野菜天ぷら700円です。はじめのご案内に戻る場合は1を押して下さい。終了する場合はこのまま電話をお切り下さい。)

ふたつめのリンクの先のコンテンツ:当店への道案内(C1-2)
3 (○○駅を降りて交差点に向かい右側の赤い看板が目印です。はじめのご案内に戻る場合は1を押して下さい。終了する場合はこのまま電話をお切り下さい。)

これらのテキストコンテンツが電話の自動音声としてどのように再生されていくか、説明します。


<説明の準備2/2:電話シュミレーション&TwiML閲覧ツール>

実際に電話をかけるとお金がかかるので、お金がかからずブラウザで確認できるツールを用意しました。

(TwiMLビューワー for TwikiML.php)
4 ページの右側が電話機を再現している部分です。電話機のボタンを模した数字ボタンを押すと、下に対応する音声テキストが表示されます。
実際の電話機では音声が流れますが、このツールでは代わりにテキストを表示します(以下の説明で「音声」と言う場合、ツールではこのテキストを指す事にします)。

左側がTwikiML.phpにより生成されるTwiMLを表示する部分です。

ページを開いた直後は電話をかけた事に対応しており、最初の音声と対応するTwiMLが表示されます。

その後、数字ボタンを押すたびに逐次対応する音声とTwiMLが表示されます。

ちなみに、ウェブページを閉じる事が電話を切る動作に対応しています。

ツール右下に表示される音声(テキスト)は、元を辿ればwiki内に格納されているテキストコンテンツです。なので、wiki内のテキストコンテンツを書き換えればツールに表示される音声も変わります。

本番環境では、電話の数字ボタンを押すとTwilio経由でTwikiML.phpが番号を受け取りwikiのDBにアクセスし、最終的に対応するテキストコンテンツを抜き出しTwiMLをTwilioに返します(実際にはもう少し複雑なプロセスがあります)。
TwilioはそのTwiMLを音声に変換して電話に返します。

今回のツール(TwiMLビューワー for TwikiML.php)はTwilioと電話の動きをブラウザ上で再現しているのでここでの動作において実際にはTwilioは関与していません。しかし、wikiとTwikiML.phpはTwilioと連携する本番環境でもそのまま動きます。

Twilioのアカウントをお持ちの方ならTwilio番号とTwikiML.phpを紐付けしTwilio番号に電話をかけてみれば今回のツール(TwiMLビューワー for TwikiML.php)通りに自動音声が聞こえる事を実際に確認できます(電話代とTwilioの利用料がかかってしまう事にご注意)。

TwikiML.phpのURLは、
です。

なお、Twilioでは無料トライアルアカウントがありますので、興味のある方は利用してみるという手もあります。

では、説明に入ります。


<動作の説明>

説明の準備2/2で説明した通り、wiki内のテキストは変換され電話のスピーカーから音声として出力されます。

では、どの数字ボタンを押せばどの音声が返ってくるのでしょう?

ヒント(というか答え)は、

「電話のボタン番号は、直前に聞いた音声に対応するwiki内のテキスト中のリンクの出現順番に対応していて、ボタンを押すとその番号に対応するリンク先のテキストを音声として返す。」
 
です。TwikiML.phpはこの対応関係の通りに電話ボタンの番号を受け取りTwiMLを出力するよう作られています。

ここで注目して欲しいのは、

ボタンの番号と音声の対応関係は、直前に聞いた音声ごとに決められている。

という点です(同じボタンを押しても、直前に聞いた音声によって次に聞こえる音声は変わってきます)。

具体例で説明します。

(1)第1階層(初期状態)

電話をかけた直後に流れる音声はひとつに決まっており、対応するwiki内のテキストコンテンツは「はじめのご案内(説明の準備1/2のC1)」です。

wiki内のテキストコンテンツC1を眺めると、リンクが2箇所ある事が見て取れます。

ひとつめのリンクが「今日のおすすめ(C1-1)」、次のリンクが「当店への道案内(C1-2)」のページを指しています。

先ほど説明したボタンとリンクの対応関係を当てはめると、番号1のボタンがひとつめのリンク「今日のおすすめ(C1-1)」、番号2のボタンが次のリンク「当店への道案内(C1-2)」に対応している、ということになります。

つまり、例えば電話をかけた直後の音声が流れた後に1のボタンを押すと、ひとつめのリンク先のテキストコンテンツ「今日のおすすめ(C1-1)」が音声に変換され電話機から流れてきます。

ここで、第1階層(初期状態)での音声とボタンの関係をまとめます。
 
直前に流れた音声:はじめのご案内(C1)
ボタン番号1の音声:今日のおすすめ(C1-1)
ボタン番号2の音声:当店への道案内(C1-2)
 
(2)第2階層

(1)で1のボタンを押し「今日のおすすめ(C1-1)」を聞いた後に、1のボタンを押すと「はじめのご案内(C1)」が流れます。

wikiで「今日のおすすめ(C1-1)」を見ると、リンクは一つ「はじめのご案内(C1)」のみとなっている事が分かります(番号1のボタンが「はじめのご案内(C1)」に対応している)。

第二階層での音声とボタンの関係をまとめます。

直前に流れた音声:今日のおすすめ(C1-1)
ボタン番号1の音声:はじめのご案内(C1)
ボタン番号2の音声:(無し)


第一階層と第二階層ではボタン番号1、ボタン番号2に対応する音声の組み合わせが変わっている事に注目してください。

ここまでの説明で、

・ボタンの番号と音声の対応関係
・特に、同じ番号のボタンを押しても直前に流れた音声によって次に流れる音声は変わる

という事をご理解いただけたらうれしいです。

今回の例では、選択肢も最大2つで深さが2階層までと簡単なものでしたが、wikiの内容を更新することで階層をいくらでも深くする事ができますし、各階層での選択肢も実質9つまで広げる事ができます(電話の数字ボタンは0~9の10個ありますが、今回のIVRでは割り当て可能な番号を1~9の9つにしています)。

言葉で説明するとややこしいのですが、実際にツールでボタンを押して動きを見れば感覚的にお分かり頂けると思います。

ボタンの番号と音声の対応関係がwiki内のテキスト中のリンクの張り方によって決まるのは分かったけど、じゃあリンクはどのように張るの?というところを含め、wikiの機能まわりについて次回のブログで説明します。

« 【場所めも】福島 喜多方 | トップページ | wikiをTwilioのCMSに使用した事例の説明の続き:wikiの機能とTwilioが拓く可能性 »

Twilio」カテゴリの記事

よもやま話」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/533352/57576329

この記事へのトラックバック一覧です: wikiをTwilioのCMSに使用した事例の説明。:

« 【場所めも】福島 喜多方 | トップページ | wikiをTwilioのCMSに使用した事例の説明の続き:wikiの機能とTwilioが拓く可能性 »

最近の作品

つぶやき

ウェブページ

無料ブログはココログ