50
© 2015 IBM Corporation 1 TwilioJP-UG 東東 ×Bluemix 東東東東東東東東東東東東東東東東東東 東東東東東東東東東東東東東東東東東東東東東 !? 東 !! 2015 年 9 年 14 年 ×

Twilio bluemix hands-on 資料

Embed Size (px)

Citation preview

Page 1: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1

【 TwilioJP-UG 東京 ×Bluemix ハンズオン】

電話のボタン応答はもう古い!?音声認識する自動案内サービスをサクッと作ろう !!

2015 年 9 月 14 日

×

Page 2: Twilio bluemix hands-on 資料

© 2015 IBM Corporation2

本日の Hands-on について

Watson Speech to Text

User

オペレータ

問い合わせ 録音・ API Call

テキスト化

自動分類・ API Call

電話転送

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

Page 3: Twilio bluemix hands-on 資料

© 2015 IBM Corporation3

Hands-on の進め方

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

2. Twilio 様 Hands-on

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

Page 4: Twilio bluemix hands-on 資料

© 2015 IBM Corporation4

講師紹介 : Bluemix

藤田 昌也Masaya Fujita

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

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

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

Page 5: Twilio bluemix hands-on 資料

© 2015 IBM Corporation5

IBM Bluemix 概説

2015 年 9 月 14 日

Page 6: Twilio bluemix hands-on 資料

© 2015 IBM Corporation6

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

スピーディーな環境構築

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

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

堅牢なセキュリティ

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

Page 7: Twilio bluemix hands-on 資料

© 2015 IBM Corporation7

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

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

~ 週単位 ~ 日単位

Code

Data

Runtime

Middleware

OS

Virtualization

Servers

Storage

Networking

~ 分単位

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

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

Page 8: Twilio bluemix hands-on 資料

© 2015 IBM Corporation8

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

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

~ 日単位

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

IBM SoftLayer

~ 分単位

Code

Data

Runtime

Middleware

OS

Virtualization

Servers

Storage

Networking

~ 週単位

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

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

Page 9: Twilio bluemix hands-on 資料

© 2015 IBM Corporation9 ~ 分単位

PaaS

IaaS

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

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

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

~ 週単位

IBM Bluemix

~ 日単位

Code

Data

Runtime

Middleware

OS

Virtualization

Servers

Storage

Networking

従来の IT

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

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

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

Page 10: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1010

IBM Bluemix がご提供するもの

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

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

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

( 30 秒! )

Page 11: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1111

ランタイムとは

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

ランタイム

アプリコード

アプリコード

開発者

Bluemix のビルドパック

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

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

Page 12: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1212

ビルドパックとは

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

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

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

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

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

Page 13: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1313

サービスとは

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

ランタイム

アプリコード

アプリコード

開発者

サービス

サービス

サービスインスタンス

バインド

RDB

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

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

Page 14: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1414

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

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

バインド

アプリケーション

バインド

バインド

サービス

サービス

サービス

アプリ開発者

ランタイム

Page 15: Twilio bluemix hands-on 資料

© 2015 IBM Corporation15

Bluemix 上で何が使えるか?

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

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

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

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

ティクス Internet of Things

Watson DevOps データベー

ス ビッグデー

タ セキュリ

ティー

Page 16: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1616

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

IBM DevOps Services との連携

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

Eclipse との連携

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

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

Page 17: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1717

Cloud Foundry とは

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

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

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

Page 18: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1818

Bluemix の価値 ~ まとめ

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

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

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

Page 19: Twilio bluemix hands-on 資料

© 2015 IBM Corporation1919

End

Page 20: Twilio bluemix hands-on 資料

© 2015 IBM Corporation20

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

2015 年 9 月 14 日

Page 21: Twilio bluemix hands-on 資料

© 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 コマンドツールでデプロイ

Page 22: Twilio bluemix hands-on 資料

© 2015 IBM Corporation22

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

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

1. PHP を選択

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

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

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

Page 23: Twilio bluemix hands-on 資料

© 2015 IBM Corporation23

PHP ファイルの作成Step

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

Page 24: Twilio bluemix hands-on 資料

© 2015 IBM Corporation24

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

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

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

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

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

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

Page 25: Twilio bluemix hands-on 資料

© 2015 IBM Corporation25

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

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

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

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

Bluemix ID と Pass

Page 26: Twilio bluemix hands-on 資料

© 2015 IBM Corporation26

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

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

アプリの Base URL/test.php

Page 27: Twilio bluemix hands-on 資料

© 2015 IBM Corporation27

Twilio 様 Hands-on

2015 年 9 月 14 日

Page 28: Twilio bluemix hands-on 資料

© 2015 IBM Corporation28

Node-Red 概要

2015 年 9 月 14 日

Page 29: Twilio bluemix hands-on 資料

© 2015 IBM Corporation29

Node-RED の特徴

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

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

能 Bluemix の様々なサービス

を簡単に利用可能

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

Bluemix でなくても使用可能

です

Page 30: Twilio bluemix hands-on 資料

© 2015 IBM Corporation30

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

Node-RED 実装方法

②ノード間を接続

④Deploy を選択Node-RED画面

③ノードプロパティ設定

Page 31: Twilio bluemix hands-on 資料

© 2015 IBM Corporation31

Node 分類 機能

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

Output 外部アプリへの送信

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

Social Twitter/Mail/irc の送受信

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

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

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

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

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

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

Page 32: Twilio bluemix hands-on 資料

© 2015 IBM Corporation32

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

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

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

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

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

Page 33: Twilio bluemix hands-on 資料

© 2015 IBM Corporation33

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

2015 年 9 月 14 日

Page 34: Twilio bluemix hands-on 資料

© 2015 IBM Corporation34

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

② 録音 File の URL を抽出

③ Watson で、音声を Text化

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

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

⑥ 電話転送 TwiML のセット

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

Page 35: Twilio bluemix hands-on 資料

© 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 上でユニークな名前とする

Page 36: Twilio bluemix hands-on 資料

© 2015 IBM Corporation36

Node-RED の起動Step

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

Page 37: Twilio bluemix hands-on 資料

© 2015 IBM Corporation37

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

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

Page 38: Twilio bluemix hands-on 資料

© 2015 IBM Corporation38

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

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

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

Page 39: Twilio bluemix hands-on 資料

© 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;

Page 40: Twilio bluemix hands-on 資料

© 2015 IBM Corporation40

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

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

Page 41: Twilio bluemix hands-on 資料

© 2015 IBM Corporation41

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

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

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

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

Page 42: Twilio bluemix hands-on 資料

© 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;

Page 43: Twilio bluemix hands-on 資料

© 2015 IBM Corporation43

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

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

認。

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

Page 44: Twilio bluemix hands-on 資料

© 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>

Page 45: Twilio bluemix hands-on 資料

© 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":[]}]

Page 46: Twilio bluemix hands-on 資料

© 2015 IBM Corporation46

Import 方法

Page 47: Twilio bluemix hands-on 資料

© 2015 IBM Corporation47

まとめ

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

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

Page 48: Twilio bluemix hands-on 資料

© 2015 IBM Corporation48

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

×

Page 49: Twilio bluemix hands-on 資料

© 2015 IBM Corporation49

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

現在 会員登録受付中!

Page 50: Twilio bluemix hands-on 資料

© 2015 IBM Corporation50

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

  http://ibm.biz/bmxug-facebook