Node-RED事始め

[Node-RED](http://nodered.org/)の基本的な事をまとめます。

## 概要
Node-REDはIBM英国Hursley研究所のメンバーを中心に開発されていますので~~Bluemix~~ IBM Cloud（IBM社が提供するPaaS）でしか動かないものだと勘違いされている方もいらっしゃいますが、Node-RED自体はオープンソースソフトウェアであり、Node.jsが動く環境であればどこでも動かせます。

~~Bluemix~~ IBM Cloudなどのクラウド上で動かすこともできれば、ローカルのPCやRaspberry Piでも動作させることが可能です。後述しますがNode-REDはBLE（Bluetooth Low Energy）や各種センサープロトコルに対応したプラグインが豊富で、よりエッジ側（IoT的に言うとThings、つまりモノに近い方）で動作させるのも面白いです。

## インストール

### npm install

前述の通りNode.jsが動く環境であれば動作しますので以下のようにインストールして起動できます。

```
$ npm i node-red
$ node node_modules/node-red/red.js
```

### ~~Bluemix~~ IBM Cloud

Node-REDを生み出したIBMのクラウドサービスであるIBM CloudではNode-REDスターターを利用することで簡単に始められます。
[Node-RED を使用してリアルタイムのチャット・アプリケーションを 5 分で作成する](http://www.ibm.com/developerworks/jp/cloud/library/cl-rtchat-app/)

### enebular Editor

[enebular](https://enebular.com)はIoTデバイスやクラウドのVMやコンテナに任意のファイルをリモートデプロイできるサービスですが、Node-REDのフローもリモートデプロイできます。

そのため、enebularではNode-REDのフローを開発しやすくするためにデスクトップ版のNode-REDフローエディタを開発・メンテナンスしています。
[ウフル、Node-REDフローの作成・デプロイを一層簡便にする「enebular editor」の無償提供を開始](https://uhuru.co.jp/news/press-releases/20181205/)

enebular Editor は[こちら](https://docs.enebular.com/ja/EnebularEditor/)の "How to install" からWindows版とMac版をダウンロードできます。後は、それぞれのOSのインストーラで簡単にインストールできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/fac1ee2e-921c-21e1-adf8-1ff26a337466.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21109/fe27e17d-276d-634e-2f64-44b7a26873cf.png)


### Heroku Button

Heroku Buttonもあります。詳細は[README](https://github.com/joeartsea/node-red-heroku/blob/master/README.md)にありますが、NODE_RED_USERNAMEとNODE_RED_PASSWORDに任意のユーザ名とパスワードを入力してDeploy to Freeボタンをクリックすると使えます。

[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy?template=https://github.com/joeartsea/node-red-heroku)

## 動かす前に知っておくこと

### データの流れ

Node-REDをインストールした環境の外側からINPUTされるデータや環境内や周辺で発生するデータ（ログやセンサーデータなど）と、その環境から外側へのOUTPUTまでのデータの流れをビジュアル的にNode-RED上に表すことができます。

![ nodered_overview.png](https://qiita-image-store.s3.amazonaws.com/0/21109/601571fd-75af-94e6-aef7-d11189c7b17d.png)

### データの処理

データの流れに条件分岐や繰り返しなどの処理を加えることもできます。

<img width="1197" alt="スクリーンショット 2015-10-30 13.48.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/18805be5-3f6b-c6f1-38a2-d9232fa7d063.png">

## HTTPで遊んでみる

まずはHTTPリクエストを受け付けるエンドポイントを作ってみましょう。以下のようにhttp in nodeをドラッグ&ドロップしてワークスペースに配置します。

<img width="1201" alt="スクリーンショット 2015-10-30 14.32.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/8692d7fb-b146-a4af-b22e-ec3261343b8b.png">

配置したhttp in nodeをダブルクリックするとnodeの設定ダイアログが開きます。

<img width="1196" alt="スクリーンショット 2015-10-30 14.37.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/3ce7ece9-0c58-65a6-b815-6cc13832c083.png">

URLを設定します。

<img width="1198" alt="スクリーンショット 2015-10-30 14.44.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/ed5cbb53-5574-3533-33e8-ac2f4137a4b5.png">

同じ要領でHTTPレスポンスを配置します。

<img width="1196" alt="スクリーンショット 2015-10-30 14.52.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/a99ba45c-77f7-d6fb-831a-fbd2f1f67bf1.png">

配置した2つのnodeをつなぎます。

<img width="1197" alt="スクリーンショット 2015-10-30 14.54.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/1e68c05f-27dc-8c2f-9a30-097164f44868.png">

最後にデータを受け取れるかどうか確認するため同じ要領でdebug nodeを配置してhttp in nodeと接続してDeployボタンをクリックします。

<img width="1198" alt="スクリーンショット 2015-10-30 14.59.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/597c5c61-e119-2895-11fc-9f18616a8ccb.png">

これで、Node-REDをインストールしたホストに`/test`というエンドポイントが作られましたのでブラウザの別ウィンドウ（タブ）などでアクセスしてみましょう。

<img width="293" alt="スクリーンショット 2015-10-30 15.19.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/451a918c-3b79-8244-a509-653d453656af.png">

HTTPレスポンスで何も返してないので空のJSONが返ってきます。

では、`/test?aaa=111`というようにパラメータを渡してみましょう。

<img width="365" alt="スクリーンショット 2015-10-30 15.22.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/0a4075b5-fe6f-31ce-b0b7-94e716b7ed86.png">

渡したパラメータがレスポンスとしてJSONで返ってきました。

エディタ画面に戻るとdebug nodeによってデバッグ欄に受け取ったパラメータがJSONに変換されて表示されています。

<img width="1197" alt="スクリーンショット 2015-10-30 15.24.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/44f57096-c02e-d8d3-59bd-712abaac7a0f.png">

つまりhttp in nodeで受け取った`aaa=111`というパラメータが`{ "aaa": "111" }`というJSONに変換されて、http out nodeとdebug nodeの両方へ流れていったということです。

以上、今後も面白い遊び方をこちらに追加していきたいと思います。

## Node-REDについてさらに知りたい

[Node-RED User Group Japan](https://www.facebook.com/groups/noderedjp/) では本家の英語ドキュメントを @ryoichi_obara を筆頭に鋭意翻訳中です。知りたいことは以下から飛んでみてください。様々な使い方の事例を知りたい場合は [Cookbook](https://cookbook.nodered.jp/) がオススメ！

* [Getting Started](https://nodered.jp/docs/getting-started/)
* [チュートリアル](https://nodered.jp/docs/tutorials/)
* [ユーザガイド](https://nodered.jp/docs/user-guide/)
* [Cookbook](https://cookbook.nodered.jp/)
* [ノードの開発](https://nodered.jp/docs/creating-nodes/)
* [APIリファレンス](https://nodered.jp/docs/api/)
* [Node-REDの開発](https://nodered.jp/docs/developing/)
* [よくある質問](https://nodered.jp/docs/faq/)

## 最後に

コミュニティの活動に貢献したい方は是非 [Node-RED User Group Japan](https://www.facebook.com/groups/noderedjp/) へお越しください！また、コミュニティ活動に寄付したい方は [Node-REDのCommunity Bridge](https://funding.communitybridge.org/details/7a1d7e1b-9d6f-4e68-abff-49a02dee7a4d) で寄付できます。