Watson IoT Platform - Node-RED - Watsonに喋らせてみる

初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
[Watson IoT Platformを使ってみる](http://qiita.com/egplnt/items/af867711a7191923b2ff)でIoTアプリを準備しました。

#Node-REDからWatson Text to Speechサービスを用意します
1. [Bluemixのサービスを使えるようにする](http://qiita.com/egplnt/items/0924dd0c31993826d217)を参照してIBM WatsonのText to SpeechサービスをNode-REDから使えるように準備します。
2. Bluemixコンソールの「すべてのカテゴリー」から対象のIoTアプリを選択し、「概要」画面もしくは「接続」画面からWatson Text to Speechサービスが接続されている事を確認します。
3. Node-REDのフローを開き、画面左側のパレットをスクロールして、Watsonセクションの「Text to Speech」をワークスペースへドラッグ＆ドロップします。
![スクリーンショット 2016-05-19 19.24.51.png](https://qiita-image-store.s3.amazonaws.com/0/125842/8b641a1a-636d-66dd-c8c7-ea453bd611e6.png)
4. 「Text to Speech」ノードをダブルクリックで開きます。
5. Name欄には適当なノード名を指定し、言語および声を選択します。 
![スクリーンショット 2016-09-20 13.17.47.png](https://qiita-image-store.s3.amazonaws.com/0/125842/eb5870cb-9cde-152d-8d5f-43b1f93c3e7b.png)
6. 画面左側のパレットのinputセクションから「inject」ノードをドラッグ＆ドロップします。
7. Injectノードをダブルクリックで開き、「Payload」をString(文字列）を設定し、適当な英語文（例："Hello, This is Watson", "こんにちは、ワトソンです。"など）を指定します。「OK」を押して保存します。
![スクリーンショット 2016-05-20 8.03.46.png](https://qiita-image-store.s3.amazonaws.com/0/125842/4eaeb4d6-fe65-e8bb-8508-008da855a805.png)

8. 作成したinjectノードの右端から線を引き出してText to Speechノードの左端へ接続します。
![スクリーンショット 2016-05-20 9.23.31.png](https://qiita-image-store.s3.amazonaws.com/0/125842/b7c3722f-9977-1b0a-5849-addb076483cb.png)

9. 画面左側のパレットのfunctionセクションから「function」ノードをドラッグ＆ドロップします。
10. Functionノードをダブルクリックし、下記のコードをコピペします。「OK」を押して保存します。

```lang:function
msg.payload = msg.speech;
return msg;
```
![スクリーンショット 2016-05-20 9.24.35.png](https://qiita-image-store.s3.amazonaws.com/0/125842/7b1f8d63-ca08-b604-00c3-e3bf4b95dc39.png)

11. Text to Speechノードの右端から線を引き出し、作成したFunctionノードの左端へ接続します。（画像は省略）
12. 画面左側のパレットのoutputセクションの「websocket」をドラッグ＆ドロップします。
13. Websocketノードをダブルクリックで開き、「Path」欄に`/ws/audio`と指定します。「OK」を押して保存します。
![スクリーンショット 2016-05-20 9.28.05.png](https://qiita-image-store.s3.amazonaws.com/0/125842/09e8535b-05fd-bf2c-f17a-d830e86de759.png)

14. Functionノードの右端から線を引き出し、websocketノードの左端に接続します。画面右上の赤い「Deploy」ボタンを押して、クラウド上のIoTアプリへ反映します。
![スクリーンショット 2016-05-20 9.31.05.png](https://qiita-image-store.s3.amazonaws.com/0/125842/ba6a70e7-02e2-30ef-2da0-88f093e7d5a1.png)

#喋るフローを用意します。
1. ワークプレース右上の「＋」ボタンを押して、新しいワークプレースのページを用意します。
2. [フローをコピーする方法](http://qiita.com/egplnt/items/84b244a50d8bdaced324)を参照し、下記のフローをコピペし、「Deploy」します。

```
[{"id":"dd64045a.6fef2","type":"http response","z":"8dffac69.7842b","name":"","x":426.27276611328125,"y":381.6363525390625,"wires":[]},{"id":"cea56159.2238","type":"template","z":"8dffac69.7842b","name":"","field":"","fieldType":"msg","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n  <title>IBM Watson - Text To Speech</title>\n  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>\n  \n  <script type=\"text/javascript\">\n    var socketaddy = \"ws://\" + window.location.host + \"/ws/audio\";\n\n    $(document).ready(function(){\n      var output = document.getElementById('output')\n      $('#output').on('playing', function () {\n          $('#text').text('Playing audio.')\n          \n      });\n      $('#output').on('ended', function () {\n          $('#text').text('Waiting for audio...')\n          \n      });\n      sock = new WebSocket(socketaddy);\n      sock.onopen = function(){\n          $('#text').text('Waiting for audio...');\n          console.log(\"Connected websocket\");\n      };\n      sock.onerror = function(){ \n          console.log(\"Websocket error\"); \n      };\n      sock.onclose = function () {\n          $('#text').text('Not connected. Refresh the page?')\n      }\n      sock.onmessage = function(evt){\n        console.log(\"Websocket message\", evt); \n        output.src = window.URL.createObjectURL(evt.data);\n        output.play();\n      };\n    });\n  </script>\n  \n</head>\n<body style=\"font-size: 56px; font-family: helvetica; text-align: center; margin-top: 100px;\">\n  <div id=\"text\">Connecting...</div>\n  <audio id=\"output\"></audio>\n</body>\n</html>","x":267.7272720336914,"y":381.36363220214844,"wires":[["dd64045a.6fef2"]]},{"id":"2bc3743b.34ff84","type":"http in","z":"8dffac69.7842b","name":"","url":"/audio","method":"get","swaggerDoc":"","x":95.7272720336914,"y":381.36363220214844,"wires":[["cea56159.2238"]]}]

```

#喋らせてみます
1. ブラウザの別のタブを開き、URLとして `xxx.mybluemix.net/audio` を開きます。
2. 上のブラウザ（websocket）が接続されると、Node-REDのフローの「websocket」ノードの下に緑色の小さい四角が現れ"connected 1"が表示されます。赤に白抜きの四角で"disconnected"と表示される場合には、上のブラウザのページ（URLは`xxx.mybluemix.net/audio`）でも「Not connected. Refresh this page?」と表示されているので、[Cntl]+[R]でリロードしましょう。表示が「Waiting for audio...」に変わります。
3. 端末の音量（ボリューム）設定にご注意ください。
4. IoTフローのinjectノードの左側のボタンを押してメッセージ（例："Hello, This is Watson"）を送ってみましょう。
![スクリーンショット 2016-05-20 9.42.02.png](https://qiita-image-store.s3.amazonaws.com/0/125842/defdecf9-2d83-6b27-0660-b58e486579df.png)

#IoTフローから接続します
1. IoTフローの「danger」と書かれているオレンジ色のtemplateノードの右端から線を引き出し、前節までに用意したText to Speech（例：「ワトソン喋って」）の左側へ接続します。
![スクリーンショット 2016-05-20 14.05.15.png](https://qiita-image-store.s3.amazonaws.com/0/125842/0084a8e7-71bb-86b9-e00a-9827a98fb435.png)

2. 必要に応じてfunctionセクションの「delay」ノードを挿入して、５秒間隔などで送付されるようにして、温湿度計シミュレーターの温度を変化させて、「Dangerous」のメッセージを出力してみましょう。