Node-REDでMySQLに格納されたデータを検索し、ブラウザ表示する。


#0.はじめに
[省略語を表示するサイトを作ってみる](https://qiita.com/egplnt/items/927701fe6efac7dedbd8)(@egplntさん)
を一通りやってください。

#1.データベースを用意する
このようなデータベースをMySQLで作成してください。
<img width="941" alt="スクリーンショット 2018-01-31 18.46.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/04620087-5792-2166-0413-1842dad0893f.png">

データベース名：`db01`
テーブル名：`table01`
表のタイトル：`ID`、`NAME`、`C1`…(この後は使わないので適当でいいです)



#2.こぴぺる

```
[{"id":"101244a.14a6b3b","type":"mysql","z":"d9034166.46b908","mydb":"c84755b6.ca03f8","name":"","x":450,"y":180,"wires":[["98a2f9b3.57801"]]},{"id":"53e7cee1.b82eb","type":"http in","z":"d9034166.46b908","name":"","url":"/test1218b","method":"get","upload":false,"swaggerDoc":"","x":140,"y":180,"wires":[["1632b28c.0ea44d","9bb906f6.24d9e8"]]},{"id":"1632b28c.0ea44d","type":"function","z":"d9034166.46b908","name":"select*from","func":"msg.data1 = msg.payload.msg;\nmsg.topic = \"select * from table01 where c1 = \\u0027\";\nmsg.topic += msg.payload.msg;\nmsg.topic += \"\\u0027;\";\n\n//msg.topic = \"select name from table01 where c1 = 'http';\";\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":180,"wires":[["101244a.14a6b3b"]]},{"id":"50c91b8b.452bdc","type":"debug","z":"d9034166.46b908","name":"","active":true,"console":"false","complete":"payload","x":950,"y":240,"wires":[]},{"id":"7521f0bc.829fb8","type":"http response","z":"d9034166.46b908","name":"","statusCode":"","headers":{},"x":1130,"y":180,"wires":[]},{"id":"dd787de7.87d9e8","type":"template","z":"d9034166.46b908","name":"css","field":"payload.css","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"#basic {\n  font-family: meiryo;\n}\n#a1 {\n  background-color:  #fffafa;\n  padding: 20px;\n  height: 100px;\n}\n#b1 {\n  background-color:  #f8f8ff;\n  padding: 20px;\n  height: 100px;\n  text-align: center;\n  font-size: 18pt\n}\n#c1 {\n  background-color:  #fffaf0;\n  padding: 20px;\n  height: 100px;\n  text-align: left;\n  font-size: 18pt\n}\n","x":310,"y":120,"wires":[["c8c89ccc.78ec78"]]},{"id":"c8c89ccc.78ec78","type":"template","z":"d9034166.46b908","name":"test1218a.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: #fffafa\">\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></br>\n      <b>IDか製品名を入れてください。</b>\n      <form action=\"http://127.0.0.1:1880/test1218b\" method=\"get\">\n        <textarea name=\"msg\" cols=20 rows=1 style=\"font-size:24pt;\">おは</textarea></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":500,"y":120,"wires":[["89eaa987.62ee68","f67ff05a.e56ab8"]]},{"id":"e825a2a9.2e4268","type":"http in","z":"d9034166.46b908","name":"","url":"/test1218a","method":"get","upload":false,"swaggerDoc":"","x":140,"y":120,"wires":[["dd787de7.87d9e8"]]},{"id":"89eaa987.62ee68","type":"http response","z":"d9034166.46b908","name":"","x":690,"y":120,"wires":[]},{"id":"f67ff05a.e56ab8","type":"debug","z":"d9034166.46b908","name":"","active":false,"console":"false","complete":"false","x":710,"y":60,"wires":[]},{"id":"98a2f9b3.57801","type":"template","z":"d9034166.46b908","name":"css","field":"payload.css","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"#basic {\n  font-family: meiryo;\n}\n#a1 {\n  background-color:  #fffafa;\n  padding: 20px;\n  height: 100px;\n}\n#b1 {\n  background-color:  #f8f8ff;\n  padding: 20px;\n  height: 100px;\n  text-align: center;\n  font-size: 18pt\n}\n#c1 {\n  background-color:  #fffaf0;\n  padding: 20px;\n  height: 100px;\n  text-align: left;\n  font-size: 18pt\n}\n","x":570,"y":180,"wires":[["35ae5669.b80ac2"]]},{"id":"35ae5669.b80ac2","type":"function","z":"d9034166.46b908","name":"返却値をセット","func":"msg.data2 = msg.payload[0].NAME;\nmsg.data1 = msg.payload[0].ID;\n\nreturn msg;\n","outputs":1,"noerr":0,"x":720,"y":180,"wires":[["50c91b8b.452bdc","65083ffa.9f396","602b5dd.8555d24","68ab1506.1a6eec"]]},{"id":"65083ffa.9f396","type":"template","z":"d9034166.46b908","name":"test1218b.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: #fffafa\">\n    <div id='basic'>\n      <div id='a1'>\n        <h1>\n          製品情報検索\n        </h1>\n      </div>\n    <div id='b1'>\n      DBからの情報：ID『<b><font color=\"blue\">{{ data1 }}</font></b>』入力された文字の正式名称は『<b><font color=\"red\">{{ data2 }}</font></b>』です。\n    </div>\n    <div id='c1'>\n      <b>検索する情報を入力します</b></br>\n      <b>IDか製品名を入れてください。</b>\n      <form action=\"http://127.0.0.1:1880/test1218b\" method=\"get\">\n        <textarea name=\"msg\" cols=20 rows=1 style=\"font-size:24pt;\">おは</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":940,"y":180,"wires":[["7521f0bc.829fb8"]]},{"id":"602b5dd.8555d24","type":"debug","z":"d9034166.46b908","name":"","active":true,"console":"false","complete":"data2","x":950,"y":300,"wires":[]},{"id":"68ab1506.1a6eec","type":"debug","z":"d9034166.46b908","name":"","active":true,"console":"false","complete":"data1","x":950,"y":360,"wires":[]},{"id":"2fc31d2.492cd62","type":"comment","z":"d9034166.46b908","name":"わかりにくいかもしれない解説","info":"大前提\nNode-REDのノード間で、文字や数字を受けわたす時は\nmsg.〇〇\nという形(先頭にmsg.がつく形)で渡される。\n\n―――――――――――――――――――\n【select*fromのノード】\nmsg.data1にtest1218aから渡ってきた\nテキストボックスのテキストが入る。\n\nmsg.topic の3行で\n「msg.topic = \"select * from table01 where c1 = '〇〇';\"」\nという１文をつくる。\nmsg.topicという形は、MySQLに指示を出す形である。\nここでは、table01の中でc1が〇〇という横の列を探す\nという作業をしている\n\n―――――――――――――――――――\n【db01】\nMySQLに繋がっているだけ\n前のノードから\nselect * from table01 where c1 = '〇〇';\nという指示を受け取って\n該当した一文を排出する。\n\n―――――――――――――――――――\n【返却値をセット】\nMySQLから排出された一行の中から、\n該当するものをセットする。\n\nmsg.data2 = msg.payload[0].NAME;\nmsg.data1 = msg.payload[0].ID;\n\n―――――――――――――――――――\n【出力用】\n\n{{ data1 }} = msg.data1\n{{ data2 }} = msg.data2\n\nということ。","x":170,"y":60,"wires":[]},{"id":"9bb906f6.24d9e8","type":"function","z":"d9034166.46b908","name":"select*from","func":"msg.data1 = msg.payload.msg;\nmsg.topic = \"select * from table01 where ID = \\u0027\";\nmsg.topic += msg.payload.msg;\nmsg.topic += \"\\u0027;\";\n//msg.topic = \"select name from table01 where c1 = 'http';\";\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":320,"wires":[["7edc5dc7.ba9c04"]]},{"id":"bb9941e4.fc8c4","type":"comment","z":"d9034166.46b908","name":"入力の種類ごとにselect*from以降のフローが必要かも","info":"入力種類\n・id\n・name\n・c1\nなど、カラム名\n\n\n―――――――――――――――――――\nselect*from\nの中でif分岐を使いたいけど、今の知識じゃ無理そうです。\n\n代替案\n入力htmlに、チェックボックス(var checkbox)を用意して\nid→1\nname→2\nc1→3\nが出力されるようにする（できるかわからんけど）\n\nselect*fromのノードの中で\nif (checkbox = 1) {\n    msg.topic = ウンタラカンタラ\n} else if (checkbox = 2) {\n    msg.topic = ウンタラカンタラ\n} else if (checkbox = 3) {\n    msg.topic = ウンタラカンタラ\n}","x":440.40000915527344,"y":271.90000915527344,"wires":[]},{"id":"7edc5dc7.ba9c04","type":"mysql","z":"d9034166.46b908","mydb":"c84755b6.ca03f8","name":"","x":450,"y":320,"wires":[["98a2f9b3.57801"]]},{"id":"c84755b6.ca03f8","type":"MySQLdatabase","z":"","host":"127.0.0.1","port":"3306","db":"db01","tz":""}]
```
<img width="1095" alt="スクリーンショット 2018-01-31 19.29.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/3c02dfa2-90c2-6b20-4c98-fef82d73aa9e.png">


#3.MySQLを接続
<img width="108" alt="スクリーンショット 2018-01-31 19.22.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/2c2df447-b0fa-8327-6c14-26cd0c933805.png">

db01のMySQLノードを接続してください。

#4.検索ワードをMySQLにぶつける
<img width="143" alt="スクリーンショット 2018-01-31 19.24.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/416bcb89-d98e-4e81-63e6-a260ff9a550a.png">
これの中身
<img width="428" alt="スクリーンショット 2018-01-31 19.24.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/a2196148-f199-583d-d9ca-a34ebd1c25ea.png">
ここを、検索ワードに対応する表のタイトルにします。
この場合は、`ID`か`NAME`か`c1`です。検索ワードと対応させてください。

<details><summary>クリックでわかりにくい解説</summary>
MySQLのノードに情報を渡すときは`msg.topic = 〇〇`という形でないといけない。
msg.data1にtest1218aから渡ってきたテキストボックスのテキストが入る。
msg.topic の3行で
「msg.topic = "select * from table01 where c1 = '〇〇';"」
という１文をつくる。
「ここでは、table01の中でc1が〇〇という横の列を探す」
という作業をしている</details>

#5.返却値をセットする
<img width="163" alt="スクリーンショット 2018-01-31 19.30.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/1db0cc8d-9664-f48c-f893-8b0e5dd48a34.png">
これの中身
<img width="439" alt="スクリーンショット 2018-01-31 19.31.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/affb5594-e61c-69c6-404d-0a934b4ebc9c.png">

`msg.任意の名前 = msg.payload[0].表のタイトル;`
という形にする。
任意の名前とはいいつつ、次で使うので気をつけてください。

#6.`任意の名前`を表示する
<img width="198" alt="スクリーンショット 2018-01-31 19.39.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/50ada9d9-ece3-1814-84f8-c5a2a8585a86.png">
これの中身
<img width="1047" alt="スクリーンショット 2018-01-31 19.38.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/3e3f74d8-a393-b0f4-8cee-9d2304a3b05c.png">
の、`data1`と`data2`は、前項\#5 で作った`任意の名前`。

<details><summary>クリックでわかりにくい解説</summary>
htmlの中身でnode-redのmsg.hogeを表示するには、{{}}で括って、`{{hoge}}`とする。
</details>


#7.Intの数字を計算させる
<img width="163" alt="スクリーンショット 2018-01-31 19.30.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/cf56f4bd-48b7-39df-783f-70712206822d.png">
の中身を以下のようにアップデートします。
<img width="441" alt="スクリーンショット 2018-01-31 19.55.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/192887/8fc6af72-580c-593c-a068-d23df06ac5a1.png">

<details><summary>クリックでわかりにくい解説</summary>
IDが1のとき……実際にはこう動いています。
6行目：price = 1
7行目：price = 1 + 1
8行目：msg.data1 = 2
(priceはお好きな名前で大丈夫です。)
</details>

多分これでいいかんじになる…