Node-RED入門

Node-RED入門です
- Node-REDはいろいろな部品をドラッグ＆ドロップで連結させてウェブサイトやデータベースアプリなどさまざまな機能を簡単に実現できるけっこう便利な道具です


#1. Node-REDをインストールします
[Node-REDをインストールする](https://qiita.com/egplnt/items/cf79f49660f2df1c54cc)を参照し、NodeーREDをインストールします

#2. Node-RED入門
- Node-REDの編集は（特に日本語を使う場合）、FireFoxで編集したほうがうまくいきます。Chromeは日本語入力で編集箇所がズレます。IEはヒサンです（debug出力が表示されないとか）。Safariは私はあまり使わないのでよく知りません。すみません。
- Node-REDを起動し、`http://localhost:1880`でアクセスします

<img width="1680" alt="スクリーンショット 2018-03-06 22.14.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/4b3c81e4-892c-1856-59cb-de43ea00d669.png">

- Node-RED画面の左側にさまざまな部品（ノード）が並んだパレットがあります

<img width="180" alt="スクリーンショット 2018-03-06 22.17.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/832e795b-838e-b940-709a-aceaa9889e80.png">

- 上記のパレットの部品をドラッグ＆ドロップして中央のフローエディターに持ってきて使用します

<img width="715" alt="スクリーンショット 2018-03-06 22.18.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/4093012a-1c20-693c-bbe4-53b64363ff76.png">

- 例えば、「入力」セクションの一番上の灰色（薄青？）の「inject」ノードを持ってきて、さらに次の「出力」セクションの先頭の緑色の「debug」ノードをもってきます

<img width="699" alt="スクリーンショット 2018-03-06 22.20.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/07015489-cfa3-7602-09d2-eb470be9973b.png">

- 「inject」ノードの右端にある端点（白い四角）からドラッグして線を引き出し「debug」ノードの左端にある端点（白い四角）へ接続します

<img width="690" alt="スクリーンショット 2018-03-06 22.21.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/ff264029-eab6-83ee-827f-524b608e21e5.png">

- 左側の灰色（薄青？）の「inject」ノードをダブルクリックして「injectノードを編集」画面を開きます

<img width="1366" alt="スクリーンショット 2018-03-06 22.22.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/7df04b01-69b4-b5aa-c32f-ddbceb32f5dc.png">

- 「ペイロード」のプルダウンメニューを開き、「文字列」を選択します

<img width="531" alt="スクリーンショット 2018-03-06 22.23.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/75343525-7561-b5ad-2d53-beac9e43e310.png">

- 「ペイロード」欄に何か文字列（ここでは例として「こんにちは」）を入力します

<img width="527" alt="スクリーンショット 2018-03-06 22.24.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/dc802c00-0ee5-17de-fc4e-6da49ed3193f.png">

- 画面右上の赤い「完了」を押します
- 画面右端の「デバッグ」タブを選択します（タブを開きます）

<img width="327" alt="スクリーンショット 2018-03-06 22.25.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/3ffb3511-16f9-3fa0-80e0-f9caa80fff00.png">

- 画面右上の赤い「デプロイ」ボタンを押して変更を確定します
- 「inject」ノードの左端のボタンを押すと、「inject」ノードから入力した文字列が送出され、それが後続の「debug」ノードへ伝達され、　「debug」ノードから画面右端の「デバッグ」タブへ出力されます

<img width="1680" alt="スクリーンショット 2018-03-06 22.28.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/8838c7c5-814a-118c-517a-e49574cc3a03.png">

- で？だからなんなのよ？というかたのために、ではウェブサーバーを作ってみましょう

#3. 超シンプルなウェブサーバーを作ってみます
- 「入力」セクションの「http」ノードをフローエディターへドラッグ＆ドロップで持ってきます

<img width="481" alt="スクリーンショット 2018-03-06 22.34.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/eebe22dd-2a64-295e-e5cd-e6bca9edf9e9.png">

- 「http」ノードをダブルクリックして「http inノードを編集」画面を開きます

<img width="1362" alt="スクリーンショット 2018-03-06 22.34.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/739e30f0-d146-09d1-30d1-c271e25f2410.png">

- 「URL」欄に適当なパス名を入力します。ここでは例として「/test」を指定しています

<img width="510" alt="スクリーンショット 2018-03-06 22.36.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/d345540f-ebe8-ce81-844d-82ed154ef53d.png">

- 「http inノードを編集」画面右上の赤い「完了」を押して編集作業を完了します。フローエディター上で「http」ノードに指定したURLが表示されるようになります

- 「出力」セクションの「http response」ノードをドラッグ＆ドロップでフローエディターへ持ってきます

<img width="639" alt="スクリーンショット 2018-03-06 22.39.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/55ad93c9-433b-8ed7-d29e-94cad48165ef.png">

- 「http」ノード右端から「http response」ノード左端へドラッグして線で結びます

<img width="643" alt="スクリーンショット 2018-03-06 22.39.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/d60d099e-41b8-177f-b2f8-480e8a1489e7.png">

- 画面右上の赤い「デプロイ」ボタンを押して編集作業を確定します
- 必要に応じ「デバッグ」タブ出力欄の右側にある「ゴミ箱」アイコンを押してデバッグ出力をクリアします
- この状態で、Node-REDは`http://localhost:1880`の指定したURL（上記の例では`/test`)の入力を受け付けるウェブサーバーとなっています。ブラウザを立ち上げアクセスしてみます。（この例では`http://localhost:1880/test`）

<img width="284" alt="スクリーンショット 2018-03-06 22.43.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/45242368-2365-2f49-edc4-11a95f6a39b6.png">

- エラーにはなっていませんが、ちっとも面白くないので、上記の超シンプルウェブサーバーから超シンプルなウェブページが返されるようにします
- 「http」ノードと「http response」ノードを接続している線をいったん切断したいと思います。両者をつなぐ線を選択するとオレンジ色に変化します

<img width="632" alt="スクリーンショット 2018-03-06 22.44.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/891b6f73-83b4-7bc9-71bf-4daff98c9f3c.png">

- この状態で「削除」キーを押すとこの「http」ノードと「http response」ノードを接続する線は削除（つまり「http」ノードと「http response」ノードは切断）されます

<img width="668" alt="スクリーンショット 2018-03-06 22.46.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/94dc82f7-f4f7-c8ee-e843-24210d242dbd.png">

- このあと、この両者の間に別のノードを入れるので、右側の「http response」ノードを少し右の方へずらしておきます。まあどっちでもいいですけど。

<img width="739" alt="スクリーンショット 2018-03-06 22.46.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/7bd381f3-340a-8772-83af-81f79f8e5eea.png">

- パレットの「機能」セクションからオレンジ色の「template」ノードをドラッグ＆ドロップして「http」ノードと　「http response」ノードの間に置きます

<img width="752" alt="スクリーンショット 2018-03-06 22.50.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/f17727b2-f5ec-735b-0624-4cd5bbd90e84.png">

- 「template」ノードをダブルクリックし「templateノードを編集」画面を開きます

<img width="1366" alt="スクリーンショット 2018-03-06 22.50.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/58ef71aa-ad48-2629-0119-440bb8a12eea.png">


- 「テンプレート」欄に`This is the payload: {{payload}} !`と書かれていますが、今は使わないのでこの行を削除します

<img width="510" alt="スクリーンショット 2018-03-06 22.52.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/fec4742c-a77d-7d62-d97c-c168a6a5ae76.png">

- ここにHTMLを書きます。`<html>`と入力し（自動的に対になる`</html>`が現れますがそのまま続けて）`<html>`の後に`<body>`と入力し（同様に自動的に対になる`</body>`が現れますがそのまま続けて）`<body>`の後に`<h1>`と入力し（同様に自動的に対になる`</h1>`が現れますが）`<h1>`と`</h1>`の間に「こんにちは」などの文字列を入れます。全体として`<html><body><h1>こんにちは</h1></body></html>`となります

<img width="515" alt="スクリーンショット 2018-03-06 22.55.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/e6719734-aa27-7e50-047d-c48ffdbf7c6a.png">

- 「templateノードを編集」画面の右上の「完了」ボタンを押します
- 「http」ノードの右端と「template」ノードの左端、「template」ノードの右端と「http response」ノードの左端を線で結んで

<img width="779" alt="スクリーンショット 2018-03-06 22.56.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/43a445b7-df6d-57f8-4fa6-27d06d18149e.png">

-　画面右上の赤い「デプロイ」を押して変更を確定します
- ブラウザから`http://localhost:1880/test`へアクセスすると上記で指定した文字列が返されることを確認します

<img width="467" alt="スクリーンショット 2018-03-06 22.57.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/60f9fca9-d2d7-796b-8faf-b88d4aac02c6.png">

- 他にもNode-REDとMySQLを使ってデータベースサーバーを作ってみたり、Google翻訳など他社のAPIをNode-REDのフローから呼び出して便利なサービスを作ったり、センサーやビーコンからの情報を受信してIoT可視化の仕組みを作ってみたり、いろいろ可能性が広がるのでぜひ試してみてください。Enjoy :-)