Twilio bluemix hands-on 資料

© 2015 IBM Corporation1
【TwilioJP-UG東京×Bluemixハンズオン】
電話のボタン応答はもう古い！？音声認識する自動案
内サービスをサクッと作ろう!!
2015年9月14日
×

本日のHands-onについて
Watson Speech to Text
User
オペレータ
問い合わせ録音・API Call
テキスト化
自動分類・API Call電話転送
「～の方は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最初のデプロイまでに必要となる期間

~ 分単位
PaaS
IaaS
メリット
- アプリケーション環境の
迅速なデプロイと設定
- インフラに加えプラットフォーム層も
サービスプロバイダーが管理
必要な作業
- 環境構築と設定 : 数分
- アプリケーション開発
~ 週単位
IBM Bluemix
~ 日単位
Code
Data
Runtime
Middleware
OS
Virtualization
Servers
Storage
Networking
従来のIT
最初のデプロイまでに必要となる期間

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」
– クラウドベンダーやパブリック/プライベートの
垣根のないポータビリティーがあります

Hands-on 1:
PHP Webアプリケーショ
ンサーバーの構築
2015年9月14日

Hands-on 1: PHP Webアプリケーションサーバーの構築
 ハンズオン概要
• 最終目的は、録音・転送を行うTwiMLを返す、phpプログラムを稼動させる、Webアプ
リケーションサーバーを構築すること
• ハンズオンでは、Bluemixにて、PHP Webアプリケーションサーバーが手軽に構築でき
ることを体感していただきます。
 手順
• BluemixにてPHP Web アプリケーションサーバーを構築
• Local PCで「Hello! Twilio & Bluemix!!」と表示させるphpファイルを作成
• Bluemix環境にcfコマンドツールでデプロイ

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

cf コマンドでBluemixへログイン
Step
1. コマンドプロンプトでルートフォルダへ移動（作成した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

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 アプリケーションの作成
Step
1. カタログから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の受付
Step
1. httpノードをDrag & Drop
2. ダブルクリックし、Methodを「POST」、URLを「/callcenter」に設定
解説
Twilioの<Record>動詞はActionにセットされたURLにHttp Requestを送信しますが、それを
受けつけるURLを設定しています。

Post Parameterの確認
Step
1. Debugノードとhttp responseノードの接続
2. Twilioに電話をかけ、録音を実施
3. Debug ウィンドウの確認
解説
Action URL送信されたPostリクエストの中身を、Debug
ノードを通して確認します。
Json形式で、Postパラメータが取得されていることがわかり
ます。
また、後続処理で使用する、録音ファイルの所在URL（
RecordingUrl）も無事送信されています。

Postパラメータから録音ファイルのURLの取り出し
Step
1. Functionノードを接続
2. JavascriptでRecordingUrlを抽出
解説
ノード間のデータはmsgというキーの値としてやり取りされま
す。また、Postパラメータは、msg.payload配下にセットさ
れます。
この中から、msg.payload.RecordingURLを取り出し、
msg.payloadにセットし直して、次のノードにデータを渡し
ます。
msg.payload = msg.payload.RecordingUrl;
return msg;

Watson Speech to Textのバインド
Step
1. ダッシュボードより「サービスまたはAPIの追加」をクリック
2. Speech to Textを選択し、作成
解説
Speech to Textを使用するためには、サービスをアプリケーションにバインドし、username/passwordといった
Credentialsを取得する必要があります。

Watson Speech to Textでの録音ファイルのテキスト化
Step
1. Speech to Textノードを接続
2. Japanese / Narrowbandを選択
3. msg.transcriptを出力するようにDebugノ
ードを修正
4. 録音し、テキスト化されていることを確認
解説
Speech to Textノードは、音声データそのものか、音
声データのURLをインプットとして、テキスト化し出力しま
す。
ポイント
日本語認識の精度はまだあまり高くありません。ゆっくり、
丁寧に話したりすると、逆に認識精度が落ちますので、
普通のトーン・スピードで話してみてください。

問い合わせ内容の分類 1
方針
• 特定のキーワードが含まれているかどうかで、問い合わせ内
容を分類
• とある製品のコールセンターを想定し、「故障」「使い方」の
二つのキーワードで分類(「故障」が1, 「使い方」が2)
Step
1. 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;

問い合わせ内容の分類 2
Step
1. switchノードを接続
2. msg.payload.numを元に、故障:1 / 使い方:2 /
その他:3で分岐
3. Debugノードをswitchの各出力端子に接続
4. 録音を行い、正しく条件分岐していることを確認。
ポイント
Injectノードを使用して「製品故障」といった言葉をフローに
流し、条件分岐をテストしても良い

電話の転送
方針
• 問い合わせ内容に応じて、電話転送先を変えた
TwiMLを用意し、Twilioへhttp レスポンスを返す
Step
1. Templateノードを3つ接続
2. Twilioの電話転送を行うTwiMLをそれぞれ記載
3. 「none」を指定
4. http responseノードを接続
5. 動作確認
ポイント
近くの方の電話番号を設定してテストしてみましょう。
<Response>
<Dial callerId="+815031595817">+81399998877</Dial>
</Response>

Import用データ
[{"id":"c847afba.0d1398","type":"http
in","name":"","url":"/callcenter","method":"post","swaggerDoc":"","x":101,"y":86,"z":"56afc5ad.18aa4c","wires":[["591e308a.45
0058"]]},{"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","typ
e":"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":"7
da1f949.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":"e
q","v":"2"},{"t":"eq","v":"3"}],"checkall":"true","outputs":3,"x":255,"y":337,"z":"56afc5ad.18aa4c","wires":[["f9cd4589.d3b4c"],["c
e9b00ce.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":[["5064
7340.ae7144"]]},{"id":"ce9b00ce.9a77b8","type":"template","name":"使い方問い合わせ先
7340.ae7144"]]},{"id":"87be0d17.5f84c","type":"template","name":"その他問い合わせ先
7340.ae7144"]]},{"id":"50647340.ae7144","type":"http response","name":"","x":618,"y":355,"z":"56afc5ad.18aa4c","wires":[]}]

Import方法

まとめ
 TwilioとBluemixは非常に親和性が高く、双方のサービスを組
み合わせることで、さまざまな展開が期待できます。
 一例として、TwilioのTwiML/APIとBluemixのSpeech to
Textを組み合わせ、ストレスフリーな自動応答システムをサクッと
作ることができました！

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

Bluemixユーザー主体で、情報交換・ネットワーキング
定期的にミートアップやイベントを開催
現在会員登録受付中！

「グループに参加」をクリック
http://ibm.biz/bmxug-facebook

Twilio bluemix hands-on 資料

More Related Content

What's hot (20)

Similar to Twilio bluemix hands-on 資料 (20)

Twilio bluemix hands-on 資料