More than 5 years have passed since last update.

Node-RED超入門

Last updated at 2018-06-28Posted at 2018-01-21

はじめに

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

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

前提

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

IBM Cloudアカウント登録

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

初期画面と基礎概念

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

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

パレット
フローエディタ
コンソール
デプロイボタン

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

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

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

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

Node-REDでの開発手順

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

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

最初のNode-REDアプリ

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

事前準備

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

ノードの配置

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