Node-RED フローエディターの使い方

Taiji
7 min readSep 15, 2018

これは、Node-REDをこれから使う方向けに、フローエディターの基本的な操作方法をまとめた記事です。私を含めNode-REDを既に使っている方は、その簡単な操作性のおかげか、初心者向けにも「分かっている前提」で話をしてしまうきらいがあります。そこで、あらためて基本的な操作方法を解説したいと思います。

1.フロー配置

一番基本となる部分です。Node-REDは個別の処理ごとの箱(ノード)を線でつないで組み立てるプログラミングツールです。その、箱と線の配置方法です。

パレットと呼ばれる左側のペインから、ワークスペースと呼ばれる中央のペインへドラッグドロップするだけです。

2.フロー処理パラメーター設定

Node-REDでは基本的にノードと呼ばれる箱それぞれが、特化した処理を内部に持っているのでコーディングする必要はありません。(一部のノードを除く)ですが、当然その処理の中でユーザー依存する部分は設定値(外部パラメーター)として設定が必要です。

ノードをダブルクリックすると設定パネルが開くので、そこで設定を行います。設定内容や設定項目はノードごとに異なるのでここでの個別解説はいたしません。

参考までに動画では、インジェクションノードという”固有の値を入力(次のノードへ出力)する”ノードを設定しています。デフォルトでタイムスタンプ値を入力するのですが、説明のために文字列に変更し、値に「こんにちは!!」を設定しています。

3.フローデプロイ

Node-REDはフローベースのプログラミングツールですが、実態はサーバーサイドJavaScriptのNode.jsで作られています。つまり、ここでフローを構築して作ったアプリケーションはNode.jsのWebアプリケーションなのです。と、いうことは、処理を実行するためにプログラムをデプロイする必要がありますね。

簡単です。画面右上の「デプロイ」ボタンをクリックするだけです。
デプロイされていない状態だと、編集済みノードの右肩に青丸が表示されます。デプロイが成功するとこの青丸が消えるので、フローを見ればデプロイ済みかどうかが分かるということです。

4.ノードのオン・オフ

これは使うノードによって異なりますが、ノードを実行するために(またはノードの機能を有効化するために)オン・オフのスイッチを操作することがあります。
例えば、HTTPリクエストを実現するノードでは、このフローエディタ上から操作することはありませんが(ブラウザからHTTPリクエスト送るとノードが実行されるため)、スタンドアローンで実行されるノードなどはフローエディタ上から手動で動かすことがあります。

この類のノードについては、そのノードの左か右にボタンのようなオン・オフスイッチがあります。これをクリックするだけです。

参考までに動画では、インジェクションノードを実行するためのオン・オフスイッチをクリックして設定した値が次のノード(処理)へ流れることを試しています。また、デバッグノードのオン・オフを切り替えて、デバッグウィンドウへログが出力されたりされなくなったりする様子を説明しています。

5.フローのインポート・エクスポート

さて、ここで説明しているフローはノード2つの非常に単純なものですが、凝ったアプリケーションを作成するとフローも膨大になってきます。また、誰かが作成したフローを参考に構築したいこともあるでしょう。そんなときに、フローをエクスポートでバックアップしたり、誰かがエクスポートしたフローを自分の環境へインポートして復元できたらとても便利ですよね。Node-REDにはちゃんとそのような機能があります。

画面右上にハンバーガーメニューがありますが、その中に「読み込み」「書き出し」メニューがあります。これがいわゆるインポート・エクスポートです。データ形式はJSONですが、クリップボードコピーで行うのが特徴的です。

説明の動画では、次の手順で行っています。
・フロー内のすべてのノードを選択(Ctrl+A)
・ハンバーガーメニューから書き出し→クリップボード
・クリップボードへコピーされたJSONをテキストへ一時保存
・フロー内のすべてのノードを削除(復元デモのため)
・ハンバーガーメニューから読み込み→クリップボード
・一時保存したJSONをフローエディタの読み込み画面へ貼り付け
・ワークスペースへフローが復元される
・デプロイしてちゃんと動くことを確認

6.外部公開ノードの追加

Node-REDはオープンソース・ソフトウェアなので、世の中の色々な技術者の方がツールそのものをカスタマイズしたり、デフォルトでは用意されていない必要なノードを自作して公開したりしています。
そんな公開ノードを自分の環境へ追加する方法です。

ハンバーガーメニューから、パレットの管理をクリックします。「ノードを追加」タブを選択し、キーワードを入力し検索します。お目当てのノードが見つかったら「ノードを追加」ボタンをクリックすればOKです。
ここでは試しにMicrosoft AzureのIoTハブに関するノードを検索し追加してみています。

7.HTTPノードの使い方

Node-REDが活用されるシナリオの一つにUIを伴うWebアプリケーションの構築、というのがあります。これにはHTTPリクエストノードとHTTPレスポンスノードというものを使います。
・HTTPリクエストノード:WebアプリケーションのURLを設定しブラウザなどからHTTPリクエストを受ける役目
・HTTPレスポンスノード:Node-RED上の処理結果を同じセッションのブラウザへ返す役目

ここではHTTPのパスを設定し、そこへリクエストされた処理の中で画面表示を行う内容を設定し、それをHTTPレスポンスする、というシンプルな処理を行っています。
HTTPリクエストノードを使用した際のWebアプリケーションのURLは以下の法則でケッテします。

<Node-REDのURLルート>/<HTTPリクエストノードで指定したパス>ローカルホストの例)
127.0.0.1:1880/noderedtest

いかがでしたでしょうか。思ったより簡単だったのではないでしょうか。ここで紹介している操作方法は、基本的な部分ですので他にも色々な機能を持っています。解説をご希望の機能などありましたら、お気軽にコメント頂ければと思います。

それでは楽しいNode-REDライフを!!

――――――――――――――――――――――――――――――――――――――

Information

IBM Code Patterns
http://developer.ibm.com/jp/

IBM だチャンネルPodcast
https://ibm.biz/BdjthM

IBM Developer Advocate Profile
https://developer.ibm.com/code/community/advocates/taijih

Cloud Developers Circle
(ベンダー依存しないクラウドデベロッパーのためのコミュニティ)
https://cdevc.connpass.com/

Node-RED ユーザーグループ
https://node-red.connpass.com/

IBM Cloud ユーザーグループ
https://bmxug.connpass.com/

--

--

Taiji
Taiji

Written by Taiji

Datadog Senior Developer Advocate | Ex-OutSystems Dev Community Advocate | Ex-IBM Dev Advocate | Microsoft MVP | 筑波大学、名城大学非常勤講師 | 記事は個人の見解であり、所属する組織とは関係ありません。

No responses yet