Node-REDでシンプルなウェブサイト - 4. 文字列を送受信してみる

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

- [Node-REDでシンプルなウェブサイトを作ってみる](http://qiita.com/egplnt/items/e8eeed3432900945c084) でNode-REDを使ってシンプルなウェブサイトを作ってみています。
- [Node-REDでシンプルなウェブサイト - 3. 画面を複数のdivに分ける](http://qiita.com/egplnt/items/a42bc6943f93df5a8a9c)で画面を複数のdivに分割して使ってみました。

# 4. 文字列を送信してみます
- [Node-RED - フローをコピーする方法](http://qiita.com/egplnt/items/84b244a50d8bdaced324)を参照し、下記のフローをコピペします。
![スクリーンショット 2017-05-01 16.28.34.png](https://qiita-image-store.s3.amazonaws.com/0/125842/d4ba9965-4f8c-3382-091d-30679053f6be.png)

```:文字列を送信

[{"id":"19627875.f737b","type":"template","z":"75eef29b.360a7c","name":"test16.html 入力用","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n  <head>\n    <style type=\"text/css\">\n      {{{payload.css}}}\n    </style>\n  </head>\n  <body style=\"background-color: #EAE5E3\">\n    <div id='basic'>\n      <div id='a1'>\n        <h1>\n          文字列を入出力するサンプル\n        </h1>\n      </div>\n    <div id='b1'>\n      これは文字列を入出力するサンプルです\n    </div>\n    <div id='c1'>\n      <b>何か文字列を入力します</b>\n      <form action=\"https://このアプリの名前.mybluemix.net/test17\" method=\"get\">\n        <textarea name=\"msg\" cols=20 rows=1 style=\"font-size:24pt;\">あいうえおw</textarea>\n      <button type=\"submit\" name=\"submit\" value=\"送信\">\n        <font size=\"2\">表示要求を</font><font size=\"5\" color=\"red\">送信！</font>\n      </button>\n\n    </div>\n  </div>\n</body>\n</html>\n","x":490,"y":520,"wires":[["bb0e9f4a.d22d58","94005721.a742d8"]]},{"id":"89abdfd0.1787b8","type":"template","z":"75eef29b.360a7c","name":"css","field":"payload.css","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"#basic {\n  font-family: meiryo;\n}\n#a1 {\n  background-color:  #98d98e;\n  padding: 20px;\n  height: 100px;\n}\n#b1 {\n  background-color:  #e4de8a;\n  padding: 20px;\n  height: 100px;\n  text-align: center;\n  font-size: 18pt\n}\n#c1 {\n  background-color:  lightskyblue;\n  padding: 20px;\n  height: 100px;\n  text-align: left;\n  font-size: 18pt\n}\n","x":310,"y":520,"wires":[["19627875.f737b"]]},{"id":"aea3b5df.07fb3","type":"http in","z":"75eef29b.360a7c","name":"","url":"/test16","method":"get","swaggerDoc":"","x":130,"y":520,"wires":[["89abdfd0.1787b8"]]},{"id":"bb0e9f4a.d22d58","type":"http response","z":"75eef29b.360a7c","name":"","x":670,"y":520,"wires":[]},{"id":"9c097b61.983fd","type":"comment","z":"75eef29b.360a7c","name":"文字列を送信してみました","info":"","x":170,"y":480,"wires":[]},{"id":"7fce7b6e.e176fc","type":"template","z":"75eef29b.360a7c","name":"css","field":"payload.css","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"#basic {\n  font-family: meiryo;\n}\n#a1 {\n  background-color:  #98d98e;\n  padding: 20px;\n  height: 100px;\n}\n#b1 {\n  background-color:  #e4de8a;\n  padding: 20px;\n  height: 100px;\n  text-align: center;\n  font-size: 18pt\n}\n#c1 {\n  background-color:  lightskyblue;\n  padding: 20px;\n  height: 100px;\n  text-align: left;\n  font-size: 18pt\n}\n","x":310,"y":640,"wires":[["4945a326.fb4da4"]]},{"id":"8b71171.2bf2b68","type":"http in","z":"75eef29b.360a7c","name":"","url":"/test17","method":"get","swaggerDoc":"","x":130,"y":640,"wires":[["7fce7b6e.e176fc","48a460d8.5bda9"]]},{"id":"bfca72f7.4f0c6","type":"http response","z":"75eef29b.360a7c","name":"","x":670,"y":640,"wires":[]},{"id":"94005721.a742d8","type":"debug","z":"75eef29b.360a7c","name":"","active":false,"console":"false","complete":"false","x":680,"y":480,"wires":[]},{"id":"48a460d8.5bda9","type":"debug","z":"75eef29b.360a7c","name":"","active":true,"console":"false","complete":"false","x":320,"y":700,"wires":[]},{"id":"aa511e05.76ece8","type":"comment","z":"75eef29b.360a7c","name":"送付された文字列を表示してみました","info":"","x":210,"y":600,"wires":[]},{"id":"4945a326.fb4da4","type":"template","z":"75eef29b.360a7c","name":"test17.html 出力用","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n  <head>\n    <style type=\"text/css\">\n      {{{payload.css}}}\n    </style>\n  </head>\n  <body style=\"background-color: #EAE5E3\">\n    <div id='basic'>\n      <div id='a1'>\n        <h1>\n          文字列を入出力するサンプル\n        </h1>\n      </div>\n    <div id='b1'>\n      送付された文字列は『<b><font color=\"blue\">{{payload.msg}}』</font></b>でした。\n    </div>\n    <div id='c1'>\n      <b>何か文字列を入力します</b>\n      <form action=\"https://このアプリの名前.mybluemix.net/test17\" method=\"get\">\n        <textarea name=\"msg\" cols=20 rows=1 style=\"font-size:24pt;\">あいうえおw</textarea>\n      <button type=\"submit\" name=\"submit\" value=\"送信\">\n        <font size=\"2\">表示要求を</font><font size=\"5\" color=\"red\">送信！</font>\n      </button>\n\n    </div>\n  </div>\n</body>\n</html>\n","x":490,"y":640,"wires":[["bfca72f7.4f0c6"]]}]

```
- Node-REDフローの「test16.html 入力用」テンプレートノード（オレンジ色）と「test17.html 出力用」テンプレートノード（オレンジ色）を開き、下記の19行目の「このアプリの名前」の部分をアプリ名（例："test001.eu-gb"）に合わせて修正し、「完了」を押し、画面右上の「デプロイ」ボタンでフローをBluemixへ反映します。

```html:test16.html
<html>
  <head>
    <style type="text/css">
      {{{payload.css}}}
    </style>
  </head>
  <body style="background-color: #EAE5E3">
    <div id='basic'>
      <div id='a1'>
        <h1>
          文字列を入出力するサンプル
        </h1>
      </div>
    <div id='b1'>
      これは文字列を入出力するサンプルです
    </div>
    <div id='c1'>
      <b>何か文字列を入力します</b>
      <form action="https://このアプリの名前.mybluemix.net/test17" method="get">
        <textarea name="msg" cols=20 rows=1 style="font-size:24pt;">あいうえおw</textarea>
```

- div毎に色やフォント、文字の配置などを設定可能なことを確認します。



- ブラウザで`アプリ名/test16`へアクセスし画面を確認します。
![スクリーンショット 2017-05-01 16.27.08.png](https://qiita-image-store.s3.amazonaws.com/0/125842/e28a8ae4-01bb-4b64-2d93-436f88013203.png)
- 送信ボタンを押すと、下記の結果が表示されます。
![スクリーンショット 2017-05-01 16.28.50.png](https://qiita-image-store.s3.amazonaws.com/0/125842/70b2960f-fca9-f387-81a5-b600f3053291.png)


つぎは、、、
[Node-REDでシンプルなウェブサイト - 5. データベースを使ってみる](http://qiita.com/egplnt/items/7f686752649500f43479)でデータベースを使ってみます。