Node-RED超入門

## はじめに
Node-REDの基本的な操作ガイドですが、ありそうでなかなかいいものが見つからなかったので、自分で作ってみました。

(2018-06-28 Lena画像のリンクが切れていたので修正)

## 前提
本資料は、IBM Cloudのアカウント登録とIBM Cloud上でNode-REDのサービスを作るところまではすでに終わっていて、下の初期画面が表示されてから先のガイドです。
その前の手順については、他の資料を参考として下さい。
例えば、下記のものがいいのではないかと思います。

[IBM Cloudアカウント登録](https://qiita.com/KenichiSekine/items/249d2ff691b6565fb127)

Node-REDサービスについては、現在はLiteアカウントでボイラーテンプレートから作成できるようになっています。この先の手順については、別記事[IBM LiteアカウントでNode-REDインスタンスを作成する](https://qiita.com/makaishi2/items/ed9d4412331d7d65fde5)を書きましたので、こちらを参考にして下さい。

## 初期画面と基礎概念
下の図が、IBM Cloud上でNode-REDを立ち上げたときの初期画面です。

![node-red-beginner-1.png](https://qiita-image-store.s3.amazonaws.com/0/206130/415012f7-552e-fdaa-8cd5-483fbe844be0.png)

画面は大きく以下の領域に分かれています。

1. パレット
2. フローエディタ
3. コンソール
4. デプロイボタン

①パレット
Node-REDでは、処理の単位それぞれがアイコンになっており、それらは「ノード」という名前で呼ばれています。
「パレット」はNode-REDで利用可能な「ノード」の一覧表です。
Node-REDでは、ノードを追加で増やすこともできます。その場合、パレットに表示されるノードの数も増えることになります。

②フローエディタ
Node-REDのノードは1つないし複数の入力と出力を持ちます。(片方しかないものもあります)ノード間を線で連結することで、「あるノードの出力を別のノードの入力とする」ことが可能です。このようなノード間のつながりを編集するのが、画面中央のフローエディタです。
また、ノードは通常、各ノード固有の属性を持っています。ノードの属性もまた、フローエディタ上で設定する(より正確にいうと、フローエディタ上のノードをダブルクリックして編集・設定する)ことになります。

③コンソール
コンソールは、情報を表示する画面ですが、２つのタブを持っていて、それぞれ別の意味があります。
まず、左側の「情報」タブですが、フローエディタ上で選ばれているノードなどオブジェクトの属性、ヘルプ文書などを表示する画面となっています。
右側の「デバッグ」タブはデバッグ情報を表示する画面です。Node-REDではデバッグ情報の出力も、デバック用のノードを経由して行われます。デバッグノードの送られたメッセージがこの画面から出力されることになります。

④デプロイボタン
画面領域ではないのですが、重要な要素なので説明します。画面上の「デプロイ」の領域をクリックすると、フローエディタ上の変更が保存され、修正が有効になります。


## Node-REDでの開発手順
Node-REDでの開発は、次のような手順で行われることになります。

1. 必要なノードをパレットからフローエディタにドラッグアンドドロップで生成する
2. フローエディタ上で、ノード間を線で結んで処理のつながりを表現する
3. 各ノードの属性を設定する
4. デプロイボタンでデプロイを行い、変更を保存する
5. テストの実施

## 最初のNode-REDアプリ
それでは、以上のことを念頭において、最初の簡単なNode-REDアプリを作ってみたいと思います。
内容としては、
「Web上のイメージデータを入力としてWatson VRで画像認識を行い結果をデバッグ画面に表示する」
ものとします。

## 事前準備
アプリで使うWatson VRのサービスと、そのサービスの資格情報(VRの場合はAPI Key)を事前に作成、入手する必要があります。
具体的な手順については、[IBM Cloudの基本 -サービスの作成から資格情報の取得まで-](https://qiita.com/makaishi2/items/43622db769d6a7e9b560)を参照して下さい。

## ノードの配置
パレットから以下のノードをフローエディタにドラックアンドドロップします。
「入力」から「inject」
「出力」から「debug」
「機能」から「function」
「IBM Watson」から「Visual Recognition」
フローエディタに配置すると、injectノードはtimestampに、debugノードはmsg.payloadに名称が変わりますので、注意して下さい。

![node-red-bigginer-2.png](https://qiita-image-store.s3.amazonaws.com/0/206130/d7a60def-f23a-d0ab-0bd0-7a2fe339d2cf.png)


## ノードの接続

4つのノードの配置を変更し、下の図のようにノード間を接続します。

![node-red-bigginer-3.png](https://qiita-image-store.s3.amazonaws.com/0/206130/3a5d7462-2516-11ec-6738-3bf58ffe0f66.png)

## ノードの属性設定

以下のように各ノードの属性変更を行います。
属性変更は、対象ノードをダブルクリックすると、編集画面がでてくるので、そこで行います。

**injectノード**(timestamp) 

**ペイロード:** 種別を文字列に変更
文字列としては、以下のURLを設定
``
https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png
``

**名前:** URL入力

![node-red-bigginer-4.png](https://qiita-image-store.s3.amazonaws.com/0/206130/2e0d1bb4-b6ca-d372-51fa-fb5bef41be6b.png)

参考までにこのリンク先の画像はこんなものです。画像処理でよく使われる有名な？ものとのことです。
![](http://graphics.stanford.edu/~jowens/223b/lena/lena_color.jpg)
**Visual Recognitionノード**

**API Key:** 事前に作成したもの
**Detect:** Classify an Image
**Name:** VR
**Language:** Japansese

![node-red-biggner-5.png](https://qiita-image-store.s3.amazonaws.com/0/206130/c0a379d5-cc4c-c727-625b-d5f41004bb66.png)

**functionノード**

**名前:** 出力整理
**コード:** 次の2行を追加

``
msg.payload = msg.result.images[0]
    .classifiers[0].classes;
``

![node-red-beginner-6.png](https://qiita-image-store.s3.amazonaws.com/0/206130/ee958f73-856a-d401-c5d5-5b0483398e15.png)

**debugノード**
**名前:** 分析結果

![node-red-beginner-7.png](https://qiita-image-store.s3.amazonaws.com/0/206130/be067b24-2d46-ea78-20d1-6c2eea99ace6.png)


この変更がすべて終わったら画面右上の「デブロイ」ボタンをクリックして修正を有効化します。

完成したフローは下の図のようになるはずです。

![node-red-beginner-8.png](https://qiita-image-store.s3.amazonaws.com/0/206130/796f1d61-1843-bff6-12e1-8bf45f42534a.png)


## テストの実施
①テストを実施するときは、コンソール画面で「デバッグ」タブが表示されるようにします。

②テストの起点は通常、injectノードとなります。injectノードのアイコンの部分をクリックすると、テストが開始されます。

③デバッグノードの後ろについているアイコンは、個々のデバッグノードの出力をコントロールするものです。今回は結果を確認したいので、有効な状態でテストを実施します。

④デバッグ画面にテスト結果が表示されます。▼アイコンの部分をクリックするとより深い階層のオブジェクトの中身が表示されます。

![node-red-beginner-10.png](https://qiita-image-store.s3.amazonaws.com/0/206130/67afb7c7-2eb2-29f5-1972-3af8766cfdda.png)

デバッグ画面で一番深い階層まで表示した結果です。
図のように、画像認識の結果が確信度といっしょに表示されています。

![node-red-beginner-10.png](https://qiita-image-store.s3.amazonaws.com/0/206130/352e4666-0f0b-4c80-cc70-fba245e30459.png)

## 補足
最初のinject nodeの属性で解析元イメージのURLを指定しています。
このURLを変更することで、別のイメージファイルの解析が可能です。