【Twilio勉強会 with Bluemix in 福岡】　電話のボタン応答無しで！？音声認識による自動回答サービスを作ろう！

© 2015 IBM Corporation1

【 Twilio 勉強会 with Bluemix in 福岡】

〜電話のボタン応答無しで！？音声認識による自動回答サービスを作ろう！〜

2015 年 10 月 29 日

×


本日の Hands-on について「～の方は 1 を、～の方は 2 を…」　これ待つのホント面倒ですよね !?Twilio の録音・転送機能と、 Bluemix の音声テキスト化サービスを使って、ストレスフリーな応答サービスを、サクッと作っちゃいましょう！！


Hands-on の進め方

1. Bluemix 概要説明 & PHP Web アプリケーションサーバーの構築

2. Twilio 様 Hands-on

3. Node-Red を使った音声認識 & 自動回答システムの構築


講師紹介 : Bluemix

藤田昌也Masaya Fujita

Bluemix エバンジェリストとして、 Bluemix を世の中に広めるための活動に従事

基幹システムの開発・運用 Project の PM から、クラウドの世界へ転身

好きな Bluemix のサービスは Node-Red


IBM Bluemix 概説

2015 年 9 月 14 日


IBM Bluemix とはアプリケーションを、構築・管理・実行するための、 SoftLayer を基盤とし、オープン・スタンダード（ Cloud Foundry ）を活用した、新しいクラウド・プラットフォーム（ PaaS ）です

スピーディーな環境構築

豊富な「 API 」と「サービス」の提供 DevOps の実現

既存システムとのインテグレーション

堅牢なセキュリティ

柔軟な価格体系お支払い方法


従来の ITメリット- 自由にカスタマイズが可能（コスト面の制約は残る）- 基幹業務など特定のソリューションで有用- 投資済みの既存インフラの活用

必要な作業- 環境の初期構築と設定 : 数週間- ハードウェアとミドルウェアのメンテナンス、アップグレード

~ 週単位 ~ 日単位

Code

Data

Runtime

Middleware

OS

Virtualization

Servers

Storage

Networking

~ 分単位

最初のデプロイまでに必要となる期間

アプリケーション開発における時間軸の変化 - 1/3アプリケーションを開発・改良するスピードの加速化が必要お客様による管理サービスプロバイダーによる管理


メリット- 大半のレイヤーをクラウド上で管理- インフラストラクチャーは、クラウドのプロバイダーが管理

IaaS お客様による管理サービスプロバイダーによる管理

~ 日単位

必要な作業- プロビジョニング : 数分- ソフトウェアとアプリケーションの変更- OS 、ミドルウェア、ランタイムのメンテナンス、アップグレード

IBM SoftLayer

~ 分単位

Code

Data

Runtime

Middleware

OS

Virtualization

Servers

Storage

Networking

~ 週単位

従来の IT最初のデプロイまでに必要となる期間

アプリケーション開発における時間軸の変化 - 2/3アプリケーションを開発・改良するスピードの加速化が必要

© 2015 IBM Corporation9 ~ 分単位

PaaS

IaaS

メリット- アプリケーション環境の迅速なデプロイと設定- インフラに加えプラット

フォーム層もサービスプロバイダーが管理

必要な作業- 環境構築と設定 : 数分- アプリケーション開発

~ 週単位

IBM Bluemix

~ 日単位

Code

Data

Runtime

Middleware

OS

Virtualization

Servers

Storage

Networking

従来の IT

アプリケーション開発における時間軸の変化 - 3/3

最初のデプロイまでに必要となる期間

アプリケーションを開発・改良するスピードの加速化が必要お客様による管理サービスプロバイダーによる管理


IBM Bluemix がご提供するもの

「ランタイム」と「サービス」を

クラウドで　迅速にご提供します。

超( アプリケーションの実行環境 ) ( DB 等の機能拡張コンポーネント )

( 30 秒！ )


ランタイムとは

アプリケーションの実行環境

ランタイム

アプリコード

アプリコード

開発者

Bluemix のビルドパック

わずか 30 秒　でコードを動かす環境を準備

- 任意の開発言語を使用可能


ビルドパックとは

buildpack テクノロジーにより、 Bluemix 上に任意のランタイムを構築できます

標準で用意されている環境の他、 Cloud Foundry のコミュニティで作成・公開されているビルドパックも利用可能です。

GitHub に様々な buildpack が公開されています

GitHub とは、 Git バージョン管理システムを使用した、開発プロジェクトのためのホスティング・サービス

https://github.com/cloudfoundry-community/cf-docs-contrib/wiki/Buildpacks


サービスとは

ランタイムの機能を拡張するコンポーネント

ランタイム

アプリコード

アプリコード

開発者

サービス

サービス

サービスインスタンス

バインド

RDB

わずか 30 秒　でランタイムと連携 ( バインド )　

- ランタイムが必要とする機能を提供するサービスを選択し、自由に組み合せ可能


IBM Bluemix は“コンポーザブル”な環境

OSやミドルウェア構成が隠蔽された各種コンポーネントを利用者が自由に組み合わせて環境を構築します

バインド

アプリケーション

バインド

バインド

サービス

サービス

サービス

アプリ開発者

ランタイム


Bluemix 上で何が使えるか？

100 を超えるサービスを利用可能

　ボイラープレート： 14種類　ランタイム： 6種類　サービス： 85種類　　（ 2015 年 4

月時点）モバイル Web アプリケー

ションインテグレーションビジネス・アナリ

ティクス Internet of Things

Watson DevOps データベー

スビッグデー

タセキュリ

ティー


デベロッパー様にとって最も効率的な環境でコーディングしていただけます

IBM DevOps Services との連携

IBM Rational Team Concert をベースとした統合開発環境の SaaS Eclipse Orion による Web 上の IDE

Eclipse との連携

連携のための Plug-in が提供されています

開発環境 /ツールに制限はありません


Cloud Foundry とは

特定の環境に縛られないオープンなPaaS

Cloud Foundry はオープンソースとして公開されている、特定のインフラや独自の言語、フレームワークに依存しないオープンな PaaS です。

他社の Cloud FoundryベースのPaaS 環境はもちろん、ローカルに構築された環境に対しても高いポータビリティがあります。


Bluemix の価値～まとめ

クイックに手軽に環境をセットアップします– 開発者が開発に専念できる環境を提供します

多様なサービスとの容易な連携が可能です– IBM の High Value Solution もご利用いただけます– OSSやパートナー様提供のサービスもあります

オープン PaaS 「 Cloud Foundry 」– クラウドベンダーやパブリック / プライベートの垣根のないポータビリティーがあります


End


Hands-on 1: PHP Web アプリケーションサーバーの構築

2015 年 10 月 29 日


Hands-on 1: PHP Web アプリケーションサーバーの構築ハンズオン概要

• 最終目的は、録音・転送を行う TwiML を返す、 php プログラムを稼動させる、 Web アプリケーションサーバーを構築すること

• ハンズオンでは、 Bluemix にて、 PHP 　 Web アプリケーションサーバーが手軽に構築できることを体感していただきます。

• また、最後に php のサーバーとは別に、自動回答システムを構築する、Node-RED Application も作成します。

手順• Bluemix にて PHP Web アプリケーションサーバーを構築• Local PC で「 Hello! Twilio & Bluemix!! 」と表示させる php ファイルを作成

• Bluemix 環境に cf コマンドツールでデプロイ• Node-RED アプリケーションの作成


PHP Web アプリケーション・サーバー作成Step

1. PHP ランタイムの選択（ Bluemix のカタログより）2. アプリケーション名を決め、サーバーの作成3. テストページの確認

1. PHP を選択

3. テストページへアクセス

2. アプリ名を指定して「 Create 」※Bluemix 上でユニークな名前とする

米国南部の Bluemix に接続していることを確

認


PHP ファイルの作成Step

1. ドキュメントルートフォルダの作成（どこでも良いです！）2. php ファイルの作成（ test.php)


cf コマンドのインストールStep

1. Githubにアクセス（ https://github.com/cloudfoundry/cli ）し、ダウンロード

2. コマンドプロンプト（ OS X ではターミナル）で動作確認： cf -v解説

cf コマンドは、コマンドラインで Bluemix 環境にアクセスし、 Local で開発したソースコードを Bluemix 環境にデプロイするためのツールです。

バージョンが無事表示されれば OK

※ Mac で、「開発元が未確認のため開けません」と表示される場合は、「システム環境設定」 >> セキュリティーとプライバシーにて、「ダウンロードしたアプリケーションの実行許可」にて、「すべてのアプリケーションを許可」するように設定を変更して下さい

https://github.com/cloudfoundry/cli

https://github.com/cloudfoundry/cli


cf コマンドで Bluemix へログイン

Step1. コマンドプロンプトでルートフォルダへ移動（作成した php ファイルが

存在するフォルダ）2. cf login コマンドで Bluemix 環境へログイン

> cf login -a https://api.ng.bluemix.net

Bluemix ID と Pass


Bluemix に php ファイルをデプロイStep

1. cf push コマンドで Bluemix にアプリケーションを Push > cf push ( アプリケーション名）

アプリの Base URL/test.php


Node-RED アプリケーションの作成Step1. カタログから Node-RED Starter を選択2. アプリケーション名を指定し、 Node-RED アプリケーションを作成

※Node-RED は Node.js で作成された Web アプリケーションであり、 Node-RED Starter Kit を使うことにより、 Node.js の Web アプリケーションサーバー上にNode-RED がデプロイされた状態となる。

①カタログから、 Node-RED Starter を選択

②アプリ名を指定して「 Create 」※Bluemix 上でユニークな名前とする


Node-RED の起動Step

1. Bluemix のダッシュボードに記載されている Link より、 Node-RED を起動


Twilio 様 Hands-on

2015 年 9 月 14 日


Node-Red 概要

2015 年 9 月 14 日


Node-RED の特徴

ブラウザベース UI node.js で動作・軽量機能をカプセル化して

Node として利用独自 Node を作成・追加可

能 Bluemix の様々なサービス

を簡単に利用可能

ブラウザベースの UI で、データフローを書きアプリを作成IoT Foundation からのストリームデータを容易に加工可能

Bluemix でなくても使用可能

です


①ノードを選択しドラッグ & ドロップ

Node-RED 実装方法

②ノード間を接続

④Deploy を選択Node-RED画面

③ノードプロパティ設定


Node 分類機能

Input イベントの起動条件の設定

Output 外部アプリへの送信

Function イベント分岐、受信データの変換、一時停止等

Social Twitter/Mail/irc の送受信

Storage DB への保存、 DB検索Analysis 分析

Advanced RSS/atom の更新受信時にイベント起動

コネクタが右側に存在⇒①イベントの起動イベント起動条件を満たしたとき、その情報を送信する

コネクタが左右に存在⇒②データ変換 / 分岐左からデータ受信。それを変換 / 分岐させ、右側に結果を返す

コネクタが左側に存在⇒③外部アプリ起動 /DB保存左からデータを受信し、それを送信 /保存

Node-RED搭載ノードの紹介 (代表的なもの )


プログラミングJavaScript で記述します

• 簡易エディターが付属• 非同期処理も可能

※より複雑な処理は node の作成をお勧めします。

詳細ドキュメント：http://nodered.org/docs/writing-functions.html

function は最後に return msg; をいれると次の node に送信してくれます。


Hands-on 3音声認識 & 自動応答システムの構築

2015 年 9 月 14 日


音声認識＆自動応答システムの概要① Record 動詞で指定した Action URL への POST Request受け取り

② 録音 File の URL を抽出

③ Watson で、音声を Text化

④ 含まれているキーワードを元に、問い合わせ内容を分類

⑤ 問い合わせ内容ごとに処理を条件分岐

回答の TwiML を準備

⑦ Twilio サーバーに TwiMLとともに http Responseを返答


Node-RED アプリケーションの作成Step1. カタログから Node-RED Starter を選択2. アプリケーション名を指定し、 Node-RED アプリケーションを作成

※Node-RED は Node.js で作成された Web アプリケーションであり、 Node-RED Starter Kit を使うことにより、 Node.js の Web アプリケーションサーバー上にNode-RED がデプロイされた状態となる。

①カタログから、 Node-RED Starter を選択

②アプリ名を指定して「 Create 」※Bluemix 上でユニークな名前とする


Node-RED の起動Step

1. Bluemix のダッシュボードに記載されている Link より、 Node-RED を起動


HTTP Post Request の受付Step1. http ノードを Drag & Drop2. ダブルクリックし、 Method を「 POST 」、 URL を「 /callcenter 」に設定

解説Twilio の <Record> 動詞は Action にセットされた URL に Http Request を送信しますが、それを受けつける URL を設定しています。


Post Parameter の確認Step1. Debug ノードと http response ノード

の接続2. Twilio に電話をかけ、録音を実施3. Debug ウィンドウの確認

解説Action URL 送信された Post リクエストの中身を、 Debug ノードを通して確認します。Json形式で、 Post パラメータが取得されていることがわかります。また、後続処理で使用する、録音ファイルの所在URL （ RecordingUrl ）も無事送信されています。


Post パラメータから録音ファイルの URL の取り出し

Step1. Function ノードを接続2. Javascript で RecordingUrl を抽出

解説ノード間のデータは msg というキーの値としてやり取りされます。また、 Post パラメータは、 msg.payload配下にセットされます。この中から、 msg.payload.RecordingURL を取り出し、 msg.payload にセットし直して、次のノードにデータを渡します。

msg.payload = msg.payload.RecordingUrl;return msg;


Watson Speech to Text のバインドStep1. ダッシュボードより「サービスまたは API の追加」をクリック2. Speech to Text を選択し、作成

解説Speech to Text を使用するためには、サービスをアプリケーションにバインドし、 username/password といった Credentials を取得する必要があります。


Watson Speech to Text での録音ファイルのテキスト化Step1. Speech to Text ノードを接続2. Japanese / Narrowband を選択3. msg.transcript を出力するように

Debug ノードを修正4. 録音し、テキスト化されていることを確認

解説Speech to Text ノードは、音声データそのものか、音声データの URL をインプットとして、テキスト化し出力します。

ポイント日本語認識の精度はまだあまり高くありません。ゆっくり、丁寧に話したりすると、逆に認識精度が落ちますので、普通のトーン・スピードで話してみてください。


問い合わせ内容の分類 1方針• 特定のキーワードが含まれているかどうかで、問

い合わせ内容を分類• とある製品のコールセンターを想定し、「故障」

「使い方」の二つのキーワードで分類 ( 「故障」が1, 「使い方」が 2)

Step1. Function ノードを接続2. Javascript でキーワードが含まれているかで分類3. msg.payload.num に分類番号をセット

var transcript = msg.transcription;var category, num;if(transcript.indexOf("故障 ") != -1){ category = "故障についての質問です。 "; num = 1;} else if (transcript.indexOf(" 使い方 ") != -1){ category = " 使い方についての質問です "; num = 2;} else { category = " 認識できない質問です。 "; num = 3;}msg.payload = {"category": category, "num": num};return msg;


問い合わせ内容の分類 2Step1. switch ノードを接続2. msg.payload.num を元に、故障 :1 / 使い

方 :2 / その他 :3 で分岐3. Debug ノードを switch の各出力端子に接続4. 録音を行い、正しく条件分岐していることを確

認。

ポイントInject ノードを使用して「製品故障」といった言葉をフローに流し、条件分岐をテストしても良い


自動応答内容のレスポンス方針• 問い合わせ内容に応じて、適切な回答を容易し、内容を再生す

る TwiML を用意し、 Twilio へ http レスポンスを返す

Step1. Template ノードを 3 つ接続2. 指定した文言を音声で再生する TwiML をそれぞれ記載3. 「 none 」を指定

4. http response ノードを接続5. 動作確認

<?xml version="1.0" encoding="UTF-8" ?> <Response> <Say voice="woman" language="ja-JP"> 使い方に関する質問ですね。担当者につなぎます。 </Say></Response>


Import 用データ

[{"id":"b1e88a54.029218","type":"http in","name":"","url":"/callcenter","method":"post","swaggerDoc":"","x":155,"y":108,"z":"241f2623.c4be5a","wires":[["41073ab3.ed4fbc"]]},{"id":"3d782ef1.33c0e2","type":"debug","name":"","active":true,"console":"false","complete":"transcription","x":448,"y":191,"z":"241f2623.c4be5a","wires":[]},{"id":"41073ab3.ed4fbc","type":"function","name":"","func":"msg.payload = msg.payload.RecordingUrl;\nreturn msg;","outputs":1,"noerr":0,"x":342,"y":107,"z":"241f2623.c4be5a","wires":[["775413ca.a45904"]]},{"id":"775413ca.a45904","type":"watson-speech-to-text","name":"","lang":"ja-JP","band":"NarrowbandModel","x":236,"y":191,"z":"241f2623.c4be5a","wires":[["3d782ef1.33c0e2","f82a83d3.b22918"]]},{"id":"f82a83d3.b22918","type":"function","name":" 分類 ","func":"var transcript = msg.transcription;\nvar category, num;\nif(transcript.indexOf(\"故障 \") != -1){\n category = \"故障についての質問です。 \";\n num = 1;\n} else if (transcript.indexOf(\" 使い方 \") != -1){\n category = \" 使い方についての質問です \";\n num = 2;\n} else {\n category = \" 認識できない質問です。 \";\n num = 3;\n}\nmsg.payload = {\"category\": category, \"num\": num};\nreturn msg;","outputs":"1","noerr":0,"x":283,"y":281,"z":"241f2623.c4be5a","wires":[["353c79da.d22d6e","270dba92.9f908e"]]},{"id":"353c79da.d22d6e","type":"debug","name":"","active":true,"console":"false","complete":"payload","x":458,"y":280,"z":"241f2623.c4be5a","wires":[]},{"id":"270dba92.9f908e","type":"switch","name":"","property":"payload.num","rules":[{"t":"eq","v":"1"},{"t":"eq","v":"2"},{"t":"eq","v":"3"}],"checkall":"true","outputs":3,"x":332,"y":358,"z":"241f2623.c4be5a","wires":[["52bdcef6.e3028"],["28632fb2.a3b46"],["2336c4c7.9a906c"]]},{"id":"52bdcef6.e3028","type":"template","name":"故障に対する回答 ","field":"payload","format":"text","template":"<?xml version=\"1.0\" encoding=\"UTF-8\" ?> \n<Response> \n <Say voice=\"woman\" language=\"ja-JP\"> 故障ですね。担当者につなぎます。 </Say>\n</Response>","x":503,"y":335,"z":"241f2623.c4be5a","wires":[["d041a513.e3fd18","ec753cf2.3d4bd8"]]},{"id":"28632fb2.a3b46","type":"template","name":" 使い方質問への回答 ","field":"payload","format":"text","template":"<?xml version=\"1.0\" encoding=\"UTF-8\" ?> \n<Response> \n <Say voice=\"woman\" language=\"ja-JP\"> 使い方に関する質問ですね。担当者につなぎます。 </Say>\n</Response>","x":507,"y":380,"z":"241f2623.c4be5a","wires":[["d041a513.e3fd18","ec753cf2.3d4bd8"]]},{"id":"2336c4c7.9a906c","type":"template","name":"その他への回答 ","field":"payload","format":"text","template":"<?xml version=\"1.0\" encoding=\"UTF-8\" ?> \n<Response> \n <Say>Your question is categoriesed by other question.</Say>\n</Response>","x":508,"y":426,"z":"241f2623.c4be5a","wires":[["d041a513.e3fd18","ec753cf2.3d4bd8"]]},{"id":"d041a513.e3fd18","type":"http response","name":"","x":695,"y":376,"z":"241f2623.c4be5a","wires":[]},{"id":"ec753cf2.3d4bd8","type":"debug","name":"TwiML","active":true,"console":"false","complete":"payload","x":695,"y":436,"z":"241f2623.c4be5a","wires":[]}]


Import 方法


まとめ

Twilio と Bluemix は非常に親和性が高く、双方のサービスを組み合わせることで、さまざまな展開が期待できます。

一例として、 Twilio の TwiML/API と Bluemix のSpeech to Text を組み合わせ、ストレスフリーな自動応答システムをサクッと作ることができました！


以上でハンズオンは終了です。お疲れ様でした。

×


Bluemixユーザー主体で、情報交換・ネットワーキング定期的にミートアップやイベントを開催

現在会員登録受付中！


　「グループに参加」をクリック

　 http://ibm.biz/bmxug-facebook

Qiita x Bluemix コンテスト～ Bluemix に関する記事を Qiita に投稿し、豪華賞品をゲットしよう！～

[ コンテストの期間 ] 第一期 : 11/1( 日 ) ~ 11/30( 月 ) / 第二期 : 12/1(火 ) ~ 12/31(木 )※表彰は、 12 月、 1 月の BMXUG Meetup にて！！

[ 表彰 ] ■ 最優秀ノウハウ賞（最もストック数が多かった記事、副賞： 1万円相

当）

■ 最優秀ポスト賞（最も投稿数が多い BMXUG メンバー、副賞： 1万円相当）

[ 参加条件 ] 1. FB の BMXUG メンバーであること2. 「 Bluemix 」のタグをつけて Qiita に投稿3. 記事を BMXUG FB Group でシェアすること

Technology

【Twilio勉強会 with Bluemix in 福岡】 電話のボタン応答無しで！？音声認識による自動回答サービスを作ろう！

【Twilio勉強会 with Bluemix in 福岡】　電話のボタン応答無しで！？音声認識による自動回答サービスを作ろう！