Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Twilio bluemix hands-on 資料

1,825 views

Published on

Twilio × Bluemix hands on の資料です。

Published in: Technology

Twilio bluemix hands-on 資料

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

×