View
1.461
Download
0
Category
Preview:
Citation preview
© 2015 IBM Corporation1
【 TwilioJP-UG 東京 ×Bluemix ハンズオン】
電話のボタン応答はもう古い!?音声認識する自動案内サービスをサクッと作ろう !!
2015 年 9 月 14 日
×
© 2015 IBM Corporation2
本日の Hands-on について
Watson Speech to Text
User
オペレータ
問い合わせ 録音・ API Call
テキスト化
自動分類・ API Call
電話転送
「~の方は 1 を、~の方は 2 を…」 これ待つのホント面倒ですよね !?Twilio の録音・転送機能と、 Bluemix の音声テキスト化サービスを使って、ストレスフリーな応答サービスを、サクッと作っちゃいましょう!!
© 2015 IBM Corporation3
Hands-on の進め方
1. Bluemix 概要説明 & PHP Web アプリケーションサーバーの構築
2. Twilio 様 Hands-on
3. Node-Red を使った音声認識 & 自動応答システムの構築
© 2015 IBM Corporation4
講師紹介 : Bluemix
藤田 昌也Masaya Fujita
Bluemix エバンジェリストとして、 Bluemix を世の中に広めるための活動に従事
基幹システムの開発・運用 Project の PM から、クラウドの世界へ転身
好きな Bluemix のサービスは Node-Red
© 2015 IBM Corporation5
IBM Bluemix 概説
2015 年 9 月 14 日
© 2015 IBM Corporation6
IBM Bluemix とはアプリケーションを、構築・管理・実行するための、 SoftLayer を基盤とし、オープン・スタンダード( Cloud Foundry )を活用した、新しいクラウド・プラットフォーム( PaaS )です
スピーディーな環境構築
豊富な「 API 」と「サービス」の提供 DevOps の実現
既存システムとのインテグレーション
堅牢なセキュリティ
柔軟な価格体系お支払い方法
© 2015 IBM Corporation7
従来の ITメリット- 自由にカスタマイズが可能(コスト面の制約は残る)- 基幹業務など特定のソリューションで有用- 投資済みの既存インフラの活用
必要な作業- 環境の初期構築と設定 : 数週間- ハードウェアとミドルウェアのメンテナンス、アップグレード
~ 週単位 ~ 日単位
Code
Data
Runtime
Middleware
OS
Virtualization
Servers
Storage
Networking
~ 分単位
最初のデプロイまでに必要となる期間
アプリケーション開発における時間軸の変化 - 1/3アプリケーションを開発・改良するスピードの加速化が必要 お客様による管理 サービスプロバイダーによる管理
© 2015 IBM Corporation8
メリット- 大半のレイヤーをクラウド上で管理- インフラストラクチャーは、クラウドのプロバイダーが管理
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
最初のデプロイまでに必要となる期間
アプリケーションを開発・改良するスピードの加速化が必要 お客様による管理 サービスプロバイダーによる管理
© 2015 IBM Corporation1010
IBM Bluemix がご提供するもの
「ランタイム」 と 「サービス」 を
クラウドで 迅速にご提供します。
超( アプリケーションの実行環境 ) ( DB 等の機能拡張 コンポーネント )
( 30 秒! )
© 2015 IBM Corporation1111
ランタイムとは
アプリケーションの実行環境
ランタイム
アプリコード
アプリコード
開発者
Bluemix のビルドパック
わずか 30 秒 でコードを動かす環境を準備
- 任意の開発言語を使用可能
© 2015 IBM Corporation1212
ビルドパックとは
buildpack テクノロジーにより、 Bluemix 上に任意のランタイムを構築できます
標準で用意されている環境の他、 Cloud Foundry のコミュニティで作成・公開されている ビルドパックも利用可能です。
GitHub に様々な buildpack が公開されています
GitHub とは、 Git バージョン管理システムを使用した、開発プロジェクトのためのホスティング・サービス
https://github.com/cloudfoundry-community/cf-docs-contrib/wiki/Buildpacks
© 2015 IBM Corporation1313
サービスとは
ランタイムの機能を拡張するコンポーネント
ランタイム
アプリコード
アプリコード
開発者
サービス
サービス
サービスインスタンス
バインド
RDB
わずか 30 秒 でランタイムと連携 ( バインド )
- ランタイムが必要とする機能を提供するサービスを選択し、自由に組み合せ可能
© 2015 IBM Corporation1414
IBM Bluemix は“コンポーザブル”な環境
OSやミドルウェア構成が隠蔽された各種コンポーネントを利用者が自由に組み合わせて環境を構築します
バインド
アプリケーション
バインド
バインド
サービス
サービス
サービス
アプリ開発者
ランタイム
© 2015 IBM Corporation15
Bluemix 上で何が使えるか?
100 を超えるサービスを利用可能
ボイラープレート: 14種類 ランタイム: 6種類 サービス: 85種類 ( 2015 年 4
月時点) モバイル Web アプリケー
ション インテグレーション ビジネス・アナリ
ティクス Internet of Things
Watson DevOps データベー
ス ビッグデー
タ セキュリ
ティー
© 2015 IBM Corporation1616
デベロッパー様にとって最も効率的な環境でコーディングしていただけます
IBM DevOps Services との連携
IBM Rational Team Concert をベースとした統合開発環境の SaaS Eclipse Orion による Web 上の IDE
Eclipse との連携
連携のための Plug-in が提供されています
開発環境 /ツールに制限はありません
© 2015 IBM Corporation1717
Cloud Foundry とは
特定の環境に縛られないオープンなPaaS
Cloud Foundry はオープンソースとして公開されている、特定のインフラや独自の言語、フレームワークに依存しないオープンな PaaS です。
他社の Cloud FoundryベースのPaaS 環境はもちろん、ローカルに構築された環境に対しても高いポータビリティがあります。
© 2015 IBM Corporation1818
Bluemix の価値 ~ まとめ
クイックに手軽に環境をセットアップします– 開発者が開発に専念できる環境を提供します
多様なサービスとの容易な連携が可能です– IBM の High Value Solution もご利用いただけます– OSSやパートナー様提供のサービスもあります
オープン PaaS 「 Cloud Foundry 」– クラウドベンダーやパブリック / プライベートの垣根のないポータビリティーがあります
© 2015 IBM Corporation1919
End
© 2015 IBM Corporation20
Hands-on 1: PHP Web アプリケーションサーバーの構築
2015 年 9 月 14 日
© 2015 IBM Corporation21
Hands-on 1: PHP Web アプリケーションサーバーの構築 ハンズオン概要
• 最終目的は、録音・転送を行う TwiML を返す、 php プログラムを稼動させる、 Web アプリケーションサーバーを構築すること
• ハンズオンでは、 Bluemix にて、 PHP Web アプリケーションサーバーが手軽に構築できることを体感していただきます。
手順• Bluemix にて PHP Web アプリケーションサーバーを構築• Local PC で「 Hello! Twilio & Bluemix!! 」と表示させる php ファイルを作成
• Bluemix 環境に cf コマンドツールでデプロイ
© 2015 IBM Corporation22
PHP Web アプリケーション・サーバー作成Step
1. PHP ランタイムの選択( Bluemix のカタログより)2. アプリケーション名を決め、サーバーの作成3. テストページの確認
1. PHP を選択
3. テストページへアクセス
2. アプリ名を指定して「 Create 」※Bluemix 上でユニークな名前とする
米国南部の Bluemix に接続していることを確
認
© 2015 IBM Corporation23
PHP ファイルの作成Step
1. ドキュメントルートフォルダの作成(どこでも良いです!)2. php ファイルの作成( test.php)
© 2015 IBM Corporation24
cf コマンドのインストールStep
1. Githubにアクセス( https://github.com/cloudfoundry/cli )し、ダウンロード
2. コマンドプロンプト( OS X ではターミナル)で動作確認: cf -v解説
cf コマンドは、コマンドラインで Bluemix 環境にアクセスし、 Local で開発したソースコードを Bluemix 環境にデプロイするためのツールです。
バージョンが無事表示されれば OK
※ Mac で、「開発元が未確認のため開けません」と表示される場合は、「システム環境設定」 >> セキュリティーとプライバシーにて、「ダウンロードしたアプリケーションの実行許可」にて、「すべてのアプリケーションを許可」するように設定を変更して下さい
© 2015 IBM Corporation25
cf コマンドで Bluemix へログイン
Step1. コマンドプロンプトでルートフォルダへ移動(作成した php ファイルが
存在するフォルダ)2. cf login コマンドで Bluemix 環境へログイン
> cf login -a https://api.ng.bluemix.net
Bluemix ID と Pass
© 2015 IBM Corporation26
Bluemix に php ファイルをデプロイStep
1. cf push コマンドで Bluemix にアプリケーションを Push > cf push ( アプリケーション名)
アプリの Base URL/test.php
© 2015 IBM Corporation27
Twilio 様 Hands-on
2015 年 9 月 14 日
© 2015 IBM Corporation28
Node-Red 概要
2015 年 9 月 14 日
© 2015 IBM Corporation29
Node-RED の特徴
ブラウザベース UI node.js で動作・軽量 機能をカプセル化して
Node として利用独自 Node を作成・追加可
能 Bluemix の様々なサービス
を簡単に利用可能
ブラウザベースの UI で、データフローを書きアプリを作成IoT Foundation からのストリームデータを容易に加工可能
Bluemix でなくても使用可能
です
© 2015 IBM Corporation30
①ノードを選択しドラッグ & ドロップ
Node-RED 実装方法
②ノード間を接続
④Deploy を選択Node-RED画面
③ノードプロパティ設定
© 2015 IBM Corporation31
Node 分類 機能
Input イベントの起動条件の設定
Output 外部アプリへの送信
Function イベント分岐、受信データの変換、一時停止 等
Social Twitter/Mail/irc の送受信
Storage DB への保存、 DB検索Analysis 分析
Advanced RSS/atom の更新受信時にイベント起動
コネクタが右側に存在⇒①イベントの起動イベント起動条件を満たしたとき、その情報を送信する
コネクタが左右に存在⇒②データ変換 / 分岐左からデータ受信。それを変換 / 分岐させ、右側に結果を返す
コネクタが左側に存在⇒③外部アプリ起動 /DB保存左からデータを受信し、それを送信 /保存
Node-RED搭載ノードの紹介 (代表的なもの )
© 2015 IBM Corporation32
プログラミングJavaScript で記述します
• 簡易エディターが付属• 非同期処理も可能
※より複雑な処理は node の作成をお勧めします。
詳細ドキュメント:http://nodered.org/docs/writing-functions.html
function は最後に return msg; をいれると次の node に送信してくれます。
© 2015 IBM Corporation33
Hands-on 3音声認識 & 自動応答システムの構築
2015 年 9 月 14 日
© 2015 IBM Corporation34
音声認識 & 自動応答システムの概要① Record 動詞で指定した Action URL への POST Request受け取り
② 録音 File の URL を抽出
③ Watson で、音声を Text化
④ 含まれているキーワードを元に、問い合わせ内容を分類
⑤ 問い合わせ内容ごとに処理を条件分岐
⑥ 電話転送 TwiML のセット
⑦ Twilio サーバーに TwiMLとともに http Responseを返答
© 2015 IBM Corporation35
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 上でユニークな名前とする
© 2015 IBM Corporation36
Node-RED の起動Step
1. Bluemix のダッシュボードに記載されている Link より、 Node-RED を起動
© 2015 IBM Corporation37
HTTP Post Request の受付Step1. httpノードを Drag & Drop2. ダブルクリックし、 Method を「 POST 」、 URL を「 /callcenter 」に設定
解説Twilio の <Record> 動詞は Action にセットされた URL に Http Request を送信しますが、それを受けつける URL を設定しています。
© 2015 IBM Corporation38
Post Parameter の確認Step1. Debugノードと http responseノード
の接続2. Twilio に電話をかけ、録音を実施3. Debug ウィンドウの確認
解説Action URL 送信された Post リクエストの中身を、 Debugノードを通して確認します。Json形式で、 Post パラメータが取得されていることがわかります。また、後続処理で使用する、録音ファイルの所在URL ( RecordingUrl )も無事送信されています。
© 2015 IBM Corporation39
Post パラメータから録音ファイルの URL の取り出し
Step1. Functionノードを接続2. Javascript で RecordingUrl を抽出
解説ノード間のデータは msg というキーの値としてやり取りされます。また、 Post パラメータは、 msg.payload配下にセットされます。この中から、 msg.payload.RecordingURL を取り出し、 msg.payload にセットし直して、次のノードにデータを渡します。
msg.payload = msg.payload.RecordingUrl;return msg;
© 2015 IBM Corporation40
Watson Speech to Text のバインドStep1. ダッシュボードより「サービスまたは API の追加」をクリック2. Speech to Text を選択し、作成
解説Speech to Text を使用するためには、サービスをアプリケーションにバインドし、 username/password といった Credentials を取得する必要があります。
© 2015 IBM Corporation41
Watson Speech to Text での録音ファイルのテキスト化Step1. Speech to Textノードを接続2. Japanese / Narrowband を選択3. msg.transcript を出力するように
Debugノードを修正4. 録音し、テキスト化されていることを確認
解説Speech to Textノードは、音声データそのものか、音声データの URL をインプットとして、テキスト化し出力します。
ポイント日本語認識の精度はまだあまり高くありません。ゆっくり、丁寧に話したりすると、逆に認識精度が落ちますので、普通のトーン・スピードで話してみてください。
© 2015 IBM Corporation42
問い合わせ内容の分類 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;
© 2015 IBM Corporation43
問い合わせ内容の分類 2Step1. switchノードを接続2. msg.payload.num を元に、故障 :1 / 使い
方 :2 / その他 :3 で分岐3. Debugノードを switch の各出力端子に接続4. 録音を行い、正しく条件分岐していることを確
認。
ポイントInjectノードを使用して「製品故障」といった言葉をフローに流し、条件分岐をテストしても良い
© 2015 IBM Corporation44
電話の転送方針• 問い合わせ内容に応じて、電話転送先を変えた
TwiML を用意し、 Twilio へ http レスポンスを返す
Step1. Templateノードを 3 つ接続2. Twilio の電話転送を行う TwiML をそれぞれ記載
3. 「 none 」を指定
4. http responseノードを接続5. 動作確認
ポイント近くの方の電話番号を設定してテストしてみましょう。
<Response> <Dial callerId="+815031595817">+81399998877</Dial></Response>
© 2015 IBM Corporation45
Import 用データ
[{"id":"c847afba.0d1398","type":"http in","name":"","url":"/callcenter","method":"post","swaggerDoc":"","x":101,"y":86,"z":"56afc5ad.18aa4c","wires":[["591e308a.450058"]]},{"id":"c93c119f.59058","type":"debug","name":"","active":true,"console":"false","complete":"transcription","x":371,"y":170,"z":"56afc5ad.18aa4c","wires":[]},{"id":"591e308a.450058","type":"function","name":"","func":"msg.payload = msg.payload.RecordingUrl;\nreturn msg;","outputs":1,"noerr":0,"x":265,"y":86,"z":"56afc5ad.18aa4c","wires":[["249464a8.7fa46c"]]},{"id":"249464a8.7fa46c","type":"watson-speech-to-text","name":"","lang":"ja-JP","band":"NarrowbandModel","x":159,"y":170,"z":"56afc5ad.18aa4c","wires":[["c93c119f.59058","cdbcf6f7.b7ad58"]]},{"id":"cdbcf6f7.b7ad58","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":206,"y":260,"z":"56afc5ad.18aa4c","wires":[["7da1f949.0140e8","67898745.7d97a"]]},{"id":"7da1f949.0140e8","type":"debug","name":"","active":true,"console":"false","complete":"payload","x":381,"y":259,"z":"56afc5ad.18aa4c","wires":[]},{"id":"67898745.7d97a","type":"switch","name":"","property":"payload.num","rules":[{"t":"eq","v":"1"},{"t":"eq","v":"2"},{"t":"eq","v":"3"}],"checkall":"true","outputs":3,"x":255,"y":337,"z":"56afc5ad.18aa4c","wires":[["f9cd4589.d3b4c"],["ce9b00ce.9a77b8"],["87be0d17.5f84c"]]},{"id":"f9cd4589.d3b4c","type":"template","name":"故障問い合わせ先 ","field":"payload","format":"text","template":"<Response>\n <Dial callerId=\"+815031595817\">+81399998877</Dial>\n</Response>","x":426,"y":314,"z":"56afc5ad.18aa4c","wires":[["50647340.ae7144"]]},{"id":"ce9b00ce.9a77b8","type":"template","name":" 使い方問い合わせ先 ","field":"payload","format":"text","template":"<Response>\n <Dial callerId=\"+815031595817\">+81399998877</Dial>\n</Response>","x":430,"y":359,"z":"56afc5ad.18aa4c","wires":[["50647340.ae7144"]]},{"id":"87be0d17.5f84c","type":"template","name":"その他問い合わせ先 ","field":"payload","format":"text","template":"<Response>\n <Dial callerId=\"+815031595817\">+81399998877</Dial>\n</Response>","x":431,"y":405,"z":"56afc5ad.18aa4c","wires":[["50647340.ae7144"]]},{"id":"50647340.ae7144","type":"http response","name":"","x":618,"y":355,"z":"56afc5ad.18aa4c","wires":[]}]
© 2015 IBM Corporation46
Import 方法
© 2015 IBM Corporation47
まとめ
Twilio と Bluemix は非常に親和性が高く、双方のサービスを組み合わせることで、さまざまな展開が期待できます。
一例として、 Twilio の TwiML/API と Bluemix のSpeech to Text を組み合わせ、ストレスフリーな自動応答システムをサクッと作ることができました!
© 2015 IBM Corporation48
以上でハンズオンは終了です。お疲れ様でした。
×
© 2015 IBM Corporation49
Bluemixユーザー主体で、情報交換・ネットワーキング定期的にミートアップやイベントを開催
現在 会員登録受付中!
© 2015 IBM Corporation50
「グループに参加」をクリック
http://ibm.biz/bmxug-facebook
Recommended