Help us understand the problem. What is going on with this article?

Node-RED超入門

More than 1 year has passed since last update.

はじめに

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-beginner-1.png

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

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

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

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

③コンソール
コンソールは、情報を表示する画面ですが、2つのタブを持っていて、それぞれ別の意味があります。
まず、左側の「情報」タブですが、フローエディタ上で選ばれているノードなどオブジェクトの属性、ヘルプ文書などを表示する画面となっています。
右側の「デバッグ」タブはデバッグ情報を表示する画面です。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の基本 -サービスの作成から資格情報の取得まで-を参照して下さい。

ノードの配置

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

node-red-bigginer-2.png

ノードの接続

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

node-red-bigginer-3.png

ノードの属性設定

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

injectノード(timestamp)

ペイロード: 種別を文字列に変更
文字列としては、以下のURLを設定

https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png

名前: URL入力

node-red-bigginer-4.png

参考までにこのリンク先の画像はこんなものです。画像処理でよく使われる有名な?ものとのことです。

Visual Recognitionノード

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

node-red-biggner-5.png

functionノード

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


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

node-red-beginner-6.png

debugノード
名前: 分析結果

node-red-beginner-7.png

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

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

node-red-beginner-8.png

テストの実施

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

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

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

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

node-red-beginner-10.png

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

node-red-beginner-10.png

補足

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

makaishi2
2016年8月よりWatson事業部所属です。 投稿された情報はあくまで個人の見解なので、内容に関して責任を負うものではない事はご了承下さい。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away