Node-REDの基本所作 - Ritsumeikan Univ. SSES platform

Node-REDの基本所作（起動、終了、文字表示、フローの書出し/読込み）

1.概要

ここでは、Node-REDを初めて使うという方のために、以下の様なNode-REDの基本説明を行います。
1)Node-REDの起動/終了
2)フローのエディタ画面の説明
3)Node-REDのプログラミングの基本の考え方
4)“Hello World!”のデバッグ画面への表示

2.Node-REDの起動/終了

ここでは、Node-REDの起動、フローエディタの起動、フローエディタでのデプロイ(フローファイルのコンパイルと保存)、フローエディタの終了、Node-REDの終了について説明します。

2-1. Node-REDの起動

1) フローファイル名の指定無し

Node-REDは、端末画面を開いて、以下のコマンドを入力すれば起動します。

node-red

この場合、フローファイル名(jsonファイル)を引数としてして指定ませんので、フローファイルは、Node-REDのデフォルトになります。

以下の例①の場合は、
ユーザーディレクトリ：\User\hayak\.node-red
フローファイル名：flows_LAPTOP-DOSJ3DE2.json
というユーザーディレクトリとフローファイル名になっています。

また、例②の場合は、
ユーザーディレクトリ：/home/hayakawa/.node-red
フローファイル名：flows.json
というユーザーディレクトリとフローファイル名になっています。

なお、デフォルトのフローファイル名は、ユーザーディレクトリの下のsettings.jsで指定できます(詳細はこちらをご覧ください）

2) フローファイルの指定有り

フローファイル名を指定して起動します。

a) ファイル名のみ

node-red test1.json

ユーザーディレクトリの下に、test1.jsonというファイル名でフローファイルが作られます。

b) 相対ディレクトリ付きのファイル名

node-red .\test\test2.json

ユーザーディレクトリの下に\testというディレクトリが作られて、そこにtest2.jsonというファイル名でフローファイルが作られます。

c) 絶対ディレクトリ付きのファイル名

node-red c:\Users\hayak\test\test3.json

指定したディレクトリにtest3.jsonというファイル名でフローファイルが作られます。

2-2. フローエディタの起動

1) 起動したPCでブラウザを開く場合

Node-REDを端末で起動したPCで、ブラウザを開いた場合には、ブラウザのURL入力枠に、以下の様に入力してみてください。

http://localhost:1880/

フローエディタが開きます。

2) 他のPCからブラウザで開く場合

Node-REDを端末で起動したPCと異なるPCでブラウザを開く場合、2台のPCがネットワークでつながっていれば、ブラウザのURL入力画面に、Node-REDを起動しているPCのIPアドレスを入力してみてください。

http://192.168.11.29:1880/
(IPアドレスは各自の起動しているPCのアドレスを使ってください)

同じく、相手のPCのNode-REDのフローエディタが開き、相手のPCのNode-REDのフローをこちらのPCのブラウザで編集できます。

2-3. フローエディタでのデプロイ（フローファイルのコンパイルと保存）

フローエディタでフローを作成もしくは修正した場合には、フロー右上の「デプロイ」ボタンが赤くなっています。ボタンを押してデプロイすることで、コンパイルされ、実行可能状態になります。そして、フローがフローファイルに保存されます。

デプロイしてエラー等の問題が無ければ、「デプロイが成功しました」と表示され、デプロイが完了します。そして、デプロイボタンが灰色に変わります。

デプロイしてエラー等の問題がある場合には、メッセージが表示されて、デプロイするか確認してきます。デプロイを中止して修正するか、そのままデプロイするかを選びます。デプロイするとエラーのある状態でフローファイルは保存されます。

2-4. フローエディタの終了

デプロイを完了して、フローファイルを保存したら、ブラウザを閉じれば、フローエディタの終了は完了です。
デプロイが終わっていない状態で、ブラウザを閉じようとすると、「このページから移動する」か「このページに留まる」かの問い合わせ画面が表示されます。
終了する場合は、「このページから移動する」を押します。フローファイルを保存する場合は、「このページに留まる」を押して、デプロイしてください。

2-5. Node-REDの終了

Node-REDの終了は、起動した端末画面で、[Ctrl-C]を入力して終了させてください。

注意事項は、フローエディタで保存されていない内容があっても、問い合わせはありません。強制的に終了してしまいますので、あらかじめフローエディタでデプロイしてフローファイルに保存が終わっているか確認してから、[Ctrl-C]で終了させてください。

3.フローエディタ画面の説明

ここでは、Node-REDのフローエディタ画面の説明を行います。グラフを描いたりするダッシュボード画面の説明する際に、標準では装備されていないdashboardノードの追加に関しても説明します。

3-1.フローエディタ画面の説明

フローエディタの画面は、大きく以下の4つの領域に分かれています。

① ワークプレース：メインワークスペースは、パレットからノードをドラッグし、ノード同士をワイヤーで繋ぐことによってフローを開発する場所です。
② パレット：パレットには、インストール済みで利用可能なすべてのノードが含まれます。
③ サイドバー：サイトバーには、エディタ内のたくさんの便利なツールを提供しているパネルが含まれています。デバッグ画面が一番よく使います。
④ ヘッダー：デプロイボタンとその横の“三”のポップアップメニューが配置されています。

以下よく使う機能を説明していきます。より詳しく知りたい方は、公式HPのNode-RED エディタを利用するを参照してください。

3-2.ワークスペース

ワークスペースは、ノードを配置し接続することで機能を実現する(プログラミング)するスペースです。フローはタブとして複数枚持つことができます。

■タブの追加と削除
① ワークスペース右上の「＋」ボタンを押すことでタブを追加できます。
② タブの耳の部分をクリックするとプロパティ画面がポップアップします。
③ プロパティ画面では、タブの名前を変更できます。
④ タブの有効/無効を切り替えられます。タブに書かれたフローの機能を止めたいときには、「無効」にします。
⑤ タブを削除する際にはこのボタンを押します（押した瞬間に消えるので要注意です）。[Ctrl-Z]もしくはヘッダのポップアップメニューの[編集]→[変更操作を戻す]で戻せます。
⑥ ワークスペースの拡大/縮小ができます。

3-3.パレット

パレットには、使用することができるノードが並んでいます。
① ノードにカーソルを合わせると簡単なノードの説明が表示されます。
② さらに、説明の右下のメモ帳マークをクリックすると、サイドバーにヘルプ画面が表示されます。

3-4.パレット管理(パレットマネージャ)

Node-REDのエディタ画面には、ノードを新たに追加したり、削除したりする「パレット管理(パレットマネージャ)」の機能が装備されています。
③ パレット管理は、ヘッダーの「三」マークをクリックすると出てくるポップアップメニューの中にあります
④ パレットの管理をクリックするとパレット管理(パレットマネージャ)が起動します。

ここでは、次のページ(ダッシュボードノードの追加)に従って、グラフ等を表示するために必要な“dashboardノード”をパレットに追加してみてください。

このページには、他にも追加しておくと便利なノードの追加方法を紹介していますので、今後の学習で活用して下さい。

3-5.サイドバー

① 情報 – フローに関する情報を表示します。
② ヘルプ – ノードのヘルプを表示します。
③ デバッグ – Debugノードに受け渡されたメッセージを表示します
④ ノードの設定 – 配置されたノードを未使用も含めて管理します
⑤ ドロップダウンリスト：①～④に加えて、Contextデータの表示とdashboard情報
⑥ ワークスペースとサイドバーの境界にカーソルを持って行くとサイドバーの表示/非表示切替タブが出てきます。これをドラッグすることで表示スペースを変えられます。

3-6.ヘッダー

ヘッダーで一番よく使うのは「デプロイ」ボタンです。その次は、「三」ボタンのポップアップメニューです。
ポップアップメニューの「パレットの管理」に関しては、「3-4.パレット管理(パレットマネージャ)」ですでに説明しましたのでそちらを参照ください。

ここでは、フローの読込みと書出しを行うためのメニューを説明します。
① 読み込み：json形式のフローファイルを読み込む際に使用します(②)。クリップボード経由でも読み込めます(③)。
④ 書き出し：json形式のフローファイルを書き出せます。ダウンロードする(⑤)こともできますし、クリップボードにコピー(⑥)することもできます。

4. Node-REDのプログラミングの基本の考え方

Node-REDのプログラミングは、ノードと呼ばれる基本的な構成要素を、フローに配置し、ワイヤーで配線することで行います。
ノードはフロー中の前方のノードからメッセージを受け取ることで起動します(一部例外もあります）。ノードは起動すると受け取ったメッセージまたはイベントを処理し、フロー中の次のノードにメッセージを送出します。ノードには、メッセージの様々な処理内容が割り振られています。そのため、パレットに様々なノードが準備されています。配線されたノードをメッセージが流れることで、メッセージが処理されていきます。

4-1.ノードの入出力

例えば、わかりやすいところでdelayノードを例にとって説明したいと思います。delayノードは受け取ったメッセージを設定された時間遅延(defaultでは5秒遅延)させて出力するという処理を行います。

このdelayノードは、両側にポートを持っています。左側が入力ポートで右側が出力ポートです。したがって、信号は左側から右側に流れます。この信号が左から右に流れるのは、他のノードも同じです。

4-2.ノードのプロパティ設定

ノードはパレットからドラッグしてワークブレースに配置します。各ノードには、処理内容を設定するためのプロパティと呼ばれる画面があります。配置したノードをダブルクリックするとプロパティ画面がポップアップされてきます。このプロパティ画面に設定することで、処理内容を変えます。
ここでは、遅延時間を5sから100msに変えてみます。数値を変えて、完了を押すと簡単に変更できます。

4-3.メッセージ

Node-REDはノード間でメッセージを受け渡すことで機能します。メッセージは、プロパティセットを持つことができる単純なJavaScriptオブジェクトです。

1) メッセージ・プロパティ

メッセージは通常payloadプロパティを持っています。これはほとんどのノードが利用するデフォルトのプロパティです。msg.payloadのように表示されます。他にもtopicプロパティ(msg.topic)もよく使用されます。

プロパティは、以下の様なjavascriptの型のデータを持たせられます。
    Boolean – true, false
    Number – 例 0, 123.4
    String – “hello”
    Array – [1,2,3,4]
    Object – { “a”: 1, “b”: 2}
    Null

2) JSON(JavaScript Object Notation)

JSONは、JavaScriptオブジェクトを文字列で表現する標準的な手法です。これはWeb APIでデータを返すために一般的に利用されています。JSONは文字列ですが、プロパティは、オブジェクトを処理します。そのため、ノードでJSON文字列を処理するためには、JSONノードを使って、オブジェクトに変換する必要があります。

JSON形式の例(MSMのBMX160センサの出力)：

{"device":"R-MSM","id":"314A","sensor":"BMX160","timestamp":2039225.77,"acc":{"val":[5.002,-2.466,-7.878],"units":"m/s2"},"gyro":{"val":[-1.829,-8.445,-3.994],"units":"deg/s"}

最低覚えておく必要があるのは、Node-REDのノード間は、一般的にmsg.payloadというプロパティが使用され、オブジェクト形式で扱われます。そのため、Node-REDへのデータの受け渡しや受け取りは、JSON形式の文字列が使用されるということです。

5. “Hello World!”のデバッグ画面への表示

Node-REDの一番簡単なフローとして、injectノードとdebugノードを用いて、デバッグ・サイドバーに“Hello World!”と文字を出してみます。
① injectノードをドラッグして、ワークプレースに配置します。
② debugノードをドラッグして、ワークプレースに配置します。
③ injectノードの出力ポートとdebugノードの入力ポートをドラッグして配線で繋ぎます。