20160115nodered design patterns

© Hitachi, Ltd. 2016. All rights reserved.

株式会社日立製作所

2015/1/15

横井一仁

Node-RED のデザインパターン


Node-RED 環境構築手順 (Bluemix の場合 )

2

(1) Node-RED のインスタンス作成

(1-1) ダッシュボートの「アプリの作成」をクリック(1-2) ウェブアプリケーションを選択

(1-3) ボイラーテンプレートを選択

(2-1) インスタンスの管理画面から「サービスまたは API の追加」をクリック

(1-4) Node-RED Starter を選択

(2-2) dashDB を選択

※ 「 Bluemix 」、「 dashDB 」は、 International Business Machines Corporation の登録商標、製品名称です。

(2) データベース (dashDB) とバインド


Node-RED とは

3

処理ノードを GUI 上でつなぐ操作で、簡単にアプリケーションを開発できる開発環境

• コーディング未経験者でも、アプリケーション開発が容易 • 複雑な処理を行いたい場合は、 JavaScript で記述も可能 • PC 、タブレットで開発できるため、どこでも開発可能

IoT 端末の異常をメール通知タブレット端末上での編集操作

処理ノード間は、主に変数 msg.payload を用いてJSON 形式のデータが渡される

フリック入力と似た操作で編集できる


デザインパターンとは

4

• ソフトウェア設計者が発見し、編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいようにカタログ化したもの。

• 一般に GoF が提唱したオブジェクト指向言語向け 23 パターンを指す。

ja.wikipedia.org/wiki/ デザインパターン _( ソフトウェア )

引用 : http://

# 分類パターン

1 生成に関するパターン

Abstract factory

2 Builder

3 Factory method

4 Prototype

5 Singleton

6 構造に関するパターン

Adapter

7 Bridge

8 Composite

9 Decorator

10 Facade

11 Flyweight

12 Proxy

# 分類パターン

13 振る舞いに関するパターン

Chain of responsibility

14 Command

15 Interpreter

16 Iterator

17 Mediator

18 Memento

19 Observer

20 State

21 Strategy

22 Template method

23 Visitor



5

Node-RED においてもデザインパターンがあると考えカタログ化を実施 • デザインパターンの観点

• Node-RED の開発でよく使われるパターン

• 従来 JavaScript のコードで実装していた処理を、処理ノードの接続で表現することで、可読性、開発効率を向上させるパターン

• 処理ノードを繋ぎ変えるのみで修正が可能なパターン

( タブレットで開発ができるパターン )

qiita.com/zuhito/items/e9abfd6f1ba188f908ed※ URL: http://

本日は、下の記事で紹介した 10 個のデザインパターンを説明

「 nodered 　デザインパターン」でウェブ検索すると

見つかります。



6

# パターン名パターンの説明使用頻度高

ノード接続を活用

タッチ UIで修正可

1 Store & Search データ格納、検索を行うパターン ◎

2 UI & API

ブラウザで受け付けた値を用い APIを問合せ、結果をブラウザ表示するパターン

◎

3 Timeout 処理時間が一定時間を越えた場合、タイムアウトさせるパターン ◎ ○

4 while 繰り返し処理を行うパターン ○ ◎ ○

5 Sequence 複数の処理ノードから取得した値を集計するパターン ○

6 Aggregator 複数の処理ノードから取得した値を集計するパターン ○

7 Separator 1 つの処理ノードから複数の異なる値を出力するパターン ○

8 MapReduce MapReduce 処理を行うパターン ○

9 Matcher ネットワーク上を探索し、入力値が条件に合致するか判定するパターン ◎

10 State 状態遷移を扱うパターン ○ ○

※◎: 特に該当、○ : 該当


Node-RED の開発環境

7

デバッグ画面

デプロイボタン

使用可能な処理ノード一覧

開発で使用する処理ノードを配置する場所


デザインパターンの説明で使用する処理ノード

8

※ ノードの色やアイコンが同じでも、左右の接続の有無で機能が異なる点に注意。

# 処理ノード説明

1 inject クリックを契機として処理を開始する。

2 debug 前の処理ノードから渡された値をデバッグ画面に出力する。

3 http 、http response

HTTP サーバとして機能させる。 (始点 http ノードと、終点 http response ノードを組み合わせて使用する )

4 DBDB を問い合わせる。

5 http request REST API を問い合わせる。

6 function JavaScript でコードを記述する。

7 template 定型文を定義する。

8 switch 条件分岐を行う。

9 delay 指定時間遅延させて、後続の処理ノードを実行する。

10 change 変数の削除等を行う。

11 comment コメント文を記載する。


ソースコードのインポート方法

9

[1] ソースコードをコピー [2] Node-RED 開発環境の右上メニューの Import→Clipboard から貼り付け

※ dashDB等、ソースコードをインポートしただけでは使用できない処理ノードもある。 dashDB ノードはインポート後、プロパティから DB を選択する必要がある。


1. Store & Search パターン

10

データをデータベースへ格納し、検索するパターン

• Store パターンは、 function ノードを用いてデータの選択と格納する列名の指定を行い、後続の DB ノードでデータを格納する。

• Search パターンは、 DB ノードで SQL文を実行し、検索結果を後続の debug ノードへ渡す。



11

列 DATAタイムスタンプ 1

タイムスタンプ 2

表 TMP

格納

[1] inject ノードのクリックを契機として、タイムスタンプを表へ追記

• プログラム例 ( タイムスタンプを格納、検索 )

検索

[2] inject ノードのクリックを契機として、表の内容をログ画面に出力列 DATA

タイムスタンプ 1タイムスタンプ 2

タイムスタンプ 3

表 TMP

タイムスタンプ 3“Tue Dec 22 2015 13:37:10”現在の時刻



12

(2) Deploy後、表作成を実行 ( デバッグ画面に [] が出力されれば作成成功 )

(1) 表を作成する CREATE TABLE文を定義Service: dashDB-xxQuery: CREATE TABLE TMP (DATA VARCHAR(255));

• タイムスタンプ格納用の表を作成

↑左右に接続がある dashDB ノード

※参考 : 表を削除

(4) Deploy後、表削除を実行 ( デバッグ画面に [] が出力されれば削除成功 )

(3) 表を削除する DROP TABLE文を定義Service: dashDB-xxQuery: DROP TABLE TMP;



13

(4)SELTCT文を定義Service: dashDB-xxQuery: SELECT * FROM TMP;

(2) 格納先テーブルを登録Service: dashDB-xxTable: TMP

(1) タイムスタンプを列DATA に格納すると定義Function:

(3) Deploy後、タイムスタンプ格納を実行 ( デバッグ画面の出力なし )

(5) Deploy後、検索を実行 ( デバッグ画面に検索結果が出力される )

• Store パターンのデータ格納を複数回実行した後、 Search パターンを実行すると、格納したタイムスタンプがデバッグ画面へ出力される。

• Store パターンを用いて、タイムスタンプを格納

• Search パターンを用いて、タイムスタンプを検索

msg.payload = {DATA: new Date(msg.payload).toString()};return msg;

左のみ接続がある dashDB ノード↑


2. UI & API パターン

14

ブラウザで入力を受け付け、 API 問合せと結果表示を行うパターン • 1 つ目の UI パターンは、入力フォーム HTML をブラウザへ表示し、ユーザから入力値を受け取る。

• 2 つ目の UI パターンは、 API を問い合わせた結果を

格納した出力 HTML をブラウザへ表示する。 • API パターンは、 GET パラメータに指定された値を用いて、

検索等の処理を行い、その結果を返す REST API 。



15

• プログラム例 ( 指定した表の行数を表示 )

入力フォーム

出力結果

[1] 表名を入力

[4] 指定した表の行数を表示

[2]送信をクリック

[3] REST API を問い合わせて、 SELECT COUNT(*) FROM TMP を実行



16

• ブラウザで http://にアクセスし、表の行数が表示されれば成功

• API パターン ( 引数 q に指定したテーブルの行数を検索 )

(1)API の URL 登録URL: /api

(2)HTTP GET の引数 q を用いて SQL文作成Template: (3) 検索テーブルを登録

Service: dashDB-xxSELECT COUNT(*) FROM {{payload.q}};

※ dashDB ノードに直接 SQL文を記述する方法は、表名を変数として使用できないため、 Template ノードで作成した SQL文を dashDB ノードへ渡した。

< アプリ名 >.mybluemix.net/api?q=TMP

表の行数



17

• ブラウザで http://にアクセスし、入力フォームが表示されれば成功

• UI パターン ( 入力フォーム )

(1) URL を登録URL: /input

(2) 入力フォームの HTML を記述Template:<FORM action=output>

テーブル名 :<INPUT type=text name=q><INPUT type=submit></FORM>

< アプリ名 >.mybluemix.net/input

※ 説明簡略化のため、 HTML の <HTML> 、 <BODY> タグ等の記述は省略



18

• UI パターン ( 出力 HTML)

(1) URL を登録 URL: /output

(2) 問い合わせ用の URL を作成Function:

(4) 変数 msg.headers を削除Rules: Delete msg.headers(http request 実行後は、 Content-Type が JSON であるため )

(5) 出力 HTML を記述Template:

• 入力フォームで表名 TMP を入力し、行数が表示されれば成功

<HTML><BODY>テーブルの行数は{{payload.1}} です。</BODY></HTML>

msg.url = msg.req.host + "/api?q=" + encodeURI(msg.payload.q);return msg;

(3) 問合せ結果の形式を JSON に変更Return:a parsed JSON object


3. Timeout パターン

19

処理に時間がかかる場合や、処理が停止した場合、タイムアウト処理を行うパターン

• 処理に時間がかかった場合、タイムアウト表示処理を先に実行するようにする。

• UI パターンにて、ノード間の処理が進まないと、ユーザは長時間待たされるため、タイムアウト処理を入れると良い。

上の処理 (青 ) に時間がかかった場合、下の処理 (赤 ) が先回りする。



20

入力フォーム (存在しない表名を指定 )

出力結果 ( 正常処理 )

• 従来の UI&API パターンの処理( 表が存在しないとユーザは長時間待たされ、エラーが返る )

API 問合せ時間が 5秒以上(存在しない表名を指定 )

API 問合せが 5秒以内( 表名 TMP を指定 )

出力結果 ( タイムアウト時 )

• プログラム例(API が応答しない場合、タイムアウトメッセージを表示 )

3 分程経過後

出力結果 (エラー )

入力フォーム



21

• Timeout パターン (http ノードと http response ノードの間に、 delay ノードと template ノードを追加 )

(2) タイムアウト時に表示する HTML を記述Template:<HTML><BODY> タイムアウトしました。 </BODY></HTML>

(1) delay ノードを追加 ( デフォルト待ち時間 5秒 )

入力フォーム

5秒経過後

出力結果

• 存在しない表名 (TMP以外 ) を指定し、5秒後にタイムアウトの表示されれば成功


4. while パターン

22

繰り返し処理を実現するパターン

• 以下の様な while文のコードをノードの接続関係で表現

• 定型の while パターンを用いることでノード接続変更の操作だけで、既存の処理を繰り返し処理に対応させることができる。

var i = 0;while (i < 4) { console.log(i + "回目 "); i++;}console.log(" ループ完了 ");



23

• プログラム例 (1回の inject 実行で 4回デバッグメッセージを表示 )

• while パターン (4) 値 i をインクリメントFunction:msg.i++;

return msg;

(3) メッセージを記述Template: {{i}}回目

(1)初期値 i=0 を設定Template: 0Property: msg.i

(2) ループ条件を設定Property: msg.i条件 : < 4 → 1

otherwise → 2 (5) メッセージを記述Template: ループ終了

Inject ノードをクリック

出力結果(4回デバッグを表

示 )



24

• 参考 : while パターンの応用

• 配列の長さ分、繰り返し処理をしたい場合→ switch ノードは変数を条件に指定できないため、条件文を i!=0 とし定数化。→ この変更に伴い、 i の初期値を配列の長さとし、デクリメントでループさせる。

• 従来の処理を繰り返し処理に対応させたい場合→ 配列の i番目のデータを payload に格納し、後続の処理として従来処理を挿入する。

• 繰り返し処理で得た結果を、ループ後の処理で利用したい場合→ 一時的にデータを退避する Sequence パターン (後述 ) を用いる。

条件文を i!=0 にする

Sequence パターンを用いて処理結果を別変数へ退避

Sequence パターンを用いて退避した値を呼び出す

qiita.com/zuhito/items/ed5f505edaac2baeadd9文字列内の各単語用いて REST API を問い合わせる処理 http://

変数 i をデクリメント

変数 i の初期値を配列の長さにする

配列の i番目のデータを payload に格納


5. Sequence パターン

25

複数の処理ノードから得た値を集計するパターン

• 処理ノードを経由すると、変数 payload の値は上書きされるため、後続の処理ノード ( 集計処理など ) で必要となる値を、一時的に他の変数に格納する。

• 集計を行う処理ノードで、一時的に格納した変数を呼び出す。



26

• プログラム例 (451+326=777 を計算 )

• 1 つ目の function ノードが msg.payload に 451 を返す。 • 2 つ目の function ノードが msg.payload に 326 を返す。 • 集計を行う function ノードが 2 つの値の和を求める。

Inject ノードをクリック出力結果



27

(2) 値を一時変数 tmpへ退避する処理を記述Function:msg.tmp =

msg.payload;return msg;

(3) 値 326 を返す処理を記述Function:msg.payload =

326;return msg;

(4)2 つの値の和を計算する処理を記述Function:msg.payload = msg.tmp +

msg.payload;return msg;

(1) 値 451 を返す処理を記述Function:msg.payload =

451;return msg;

• Sequence パターン


6. Aggregator パターン

28

複数の処理ノードから得た値を集計するパターン

• 集計する値と数を管理するため、グローバル変数 context.global を用いる。

• 集計を行う function ノードは、指定した数の入力を受け取った後、後続の処理ノードに処理を渡す (return msg; を実行した時のみ処理を引き継ぐ仕様を活用 ) 。

• Sequence パターンと比較すると、どの処理ノードの結果を集計しているか、視覚的に分かりやすい。



29

• プログラム例 (451+326=777 を計算 )

• 1 つ目の function ノードが msg.payload に 451 を返す。 • 2 つ目の function ノードが msg.payload に 326 を返す。 • 集計を行う function ノードが 2 つの値の和を求める。

Inject ノードをクリック出力結果

※Sequence パターンのプログラム例と同じ



30

• Aggregator パターン

(4) グローバル変数に入力数定義、データ格納先を用意する処理を参照Function:// グローバル変数に入力数を定義context.global.n = 2;// グローバル変数のデータ格納先を用意context.global.data = new Array(2);

return msg;

(5) 2 つの値の和を計算する処理を参照Function:// 入力数を 1減らすcontext.global.n--;// 値をデータ格納先に一時保存context.global.data[context.global.n] = msg.payload;// 定義した入力数に達した場合に、和を求めreturnif (context.global.n === 0) { var sum = 0; for (var i = 0; i < context.global.data.length; i++) { sum += context.global.data[i]; } msg.payload = sum; return msg;}

(1) デザインパターンのページから Aggregator パターンのソースコードを貼り付ける。

(2) 値 451 を返す処理を参照Function:msg.payload =

451;return msg;

(3) 値 326 を返す処理を参照Function:msg.payload =

326;return msg;


7. Separator パターン

31

1 つの function ノードから 2 つの異なる値を出力するパターン

• function ノードの return をサイズ 2 の配列にし、その配列の中に出力したい値を格納する。

• function ノードの出力数 (Outputs の値 ) を 2 に設定する。


7. Separator パターン

32

(1) 異なる 2 値を出力するよう記述Outputs: 2Function:msg.payload = 451; // 1 つ目の出力を格納

var msg2 = {};msg2.payload = 326; // 2 つ目の出力を格納 return [msg, msg2]; // サイズ 2 の配列をretrun

• プログラム例 (451 と 326 を出力 )• 1 つ目の出力の msg.payload に 451 を返す。• 2 つ目の出力の msg.payload に 326 を返す。

• Separator パターン

Inject ノードをクリック

出力結果(2 つの値を出

力 )


8. MapReduce パターン

33

MapReduce 処理を実現するパターン • Separator パターンと Aggregator パターンを組み合わせたパター

ン • Map と Reduce の間のデータ転送処理をノード接続で記述 • MapReduce を理解するのに向いている ( 性能向上は期待できない ) • Map 、 Reduce の数を変更する場合は、手作業で増やす必要があ

る。



34

• プログラム例 ( ワードカウント )• Map 処理 : テキストデータを入力とし、単語 (Key) とその単語の

出現頻度 (Value) のペアを Reduce 処理へ渡す。 • Shuffle 処理 : Map 処理がデータを受け渡す Reducer は、 Key の

値を基に決定する。 (今回は単語の先頭文字で決定 )

• Reduce 処理 : 同じ単語 (Key) の出現頻度 (Value) の和を計算す

る。入力データ

Map 処理

Map 処理

Map 処理

Reduce 処理

Reduce 処理

<this,1>,<pen, 1>

This is a pen.

Give me a pen.

This pen is small.

<is, 2>,<give, 1>,<me, 1>,<a, 2>

<this, 2>,<pen, 3>,<small, 1>

出力結果<is,1>,<a, 1>



35

(3) Map 処理を参照Outputs: 2Function:

var input = msg.payload.toLowerCase() .replace( /\.$/, “”).split(/ |, /);var key_value = [];for (var i=0; i<input.length; i++){ var key = input[i]; if (key in key_value) { key_value[key]++; } else { key_value[key] = 1; }}var key1_value = [];var key2_value = [];for (var key in key_value){ if (‘a’<=key[0] && key[0]<=‘m’) { key1_value.push([key,k 　ey_value[key]]); } else { key2_value.push([key, key_value[key]]); }}msg.payload = key1_value;var msg2 = {};msg2.payload = key2_value;return [msg, msg2];

(2) Map 数の定義を参照Function:var map = 3; // Map 数を定義context.global.n1 = map;context.global.data1 = new Array(map);context.global.n2 = map;context.global.data2 = new Array(map);return msg;

(4) Reduce 処理を参照Function:

// 入力数を減らすcontext.global.n1--;// msg.payload のデータを格納context.global.data1[context.global.n1] = msg.payload;// 定義した入力数が来たら、集計処理を行い、 msg.payload を返すif (context.global.n1 === 0){ // msg.payload の合計値を算出 var tmp = []; for (var i=0; i<context.global.data1.length; i++) { var input = context.global.data1[i]; for (var j=0; j<input.length; j++) { var key = input[j][0]; var value = input[j][1]; if (key in tmp) { tmp[key] += value; } else { tmp[key] = value; } } } var output = []; for (var key in tmp) { output.push([key, tmp[key]]); } msg.payload = output; return msg;}出力結果

(1) デザインパターンのページから MapReduce パターンのソースコードを貼り付ける。

(5) ワードカウントを実行



36

• MapReduce パターンの編集 (Map 処理を 4 つに変更 )

(2) 入力データ (template ノード ) と Map 処理をコピー＆接続

(1) Map 数を 3 から 4 に変更Function:var map = 4; // Map 数を定義

context.global.n1 = map;context.global.data1 = new Array(map);

context.global.n2 = map;context.global.data2 = new Array(map);

return msg;

(3) Map 処理の 2 出力を 2 つの Reduce 処理へ接続

( 前処理結果から“ this” 、” pen” 、” is” 、” small” の値が 1ずつ増加 )

出力結果


9. Matcher パターン

37

処理ノードのネットワークを探索し、入力値が条件に合致するか判定するパターン • 各 function ノードは、条件に合致した場合のみ通過し、後続のノードに処理を渡

す。

• 全体の条件に合致している場合は、 function ノードから成るネットワーク上から出力が得られる。

• 後から全体の条件を修正したい場合は、ノードの接続を変更するのみで修正可( タブレット上の操作のみで修正可 )



38

• プログラム例 (英文の文型判定 )

英文を入力とするInject ノードを順にクリック

出力結果(文型の判定結

果 )



39

• Matcher パターン

(1) デザインパターンのページから、 Matcher パターンのソースコードを貼り付ける。

(2) 各英文をクリックすると、文型の判定結果が出力される。



40

• Matcher パターンの編集( 主語に”冠詞形容詞名詞”の並びを許可する条件に変更 )

(1) 主語に“冠詞形容詞名詞”を含む文を追加Payload: string The tall man walked.

(2) 他の形容詞のノードをコピー &ペーストし、冠詞と名詞の間に挿入


10. State パターン

41

状態遷移を表現するパターン • 状態を表す function ノードと、

遷移先を決定する switch ノードから成る。(function ノードと switch ノードの内容は、全て同じ )

• 遷移のノード接続のみで、状態遷移を記述できる。



42

• プログラム例 ( 状態遷移表 )

• 文字列を検査するための状態遷移表 ( 状態 a が開始点 )

• 以下のうち、不合格 ( 状態 e) になる文字列はどれか判定する。

( ア ) 0101 ( イ ) -1 ( ウ ) 12.2 (エ ) 4.5.1 ( オ ) 451+

文字

符号数字小数点

現在の

状態

a a b e

b e b c

c e d e

d e d e



43

(2) Switch ノードに変数 msg.c を渡す処理を参照Function:var input = msg.payload;

var len = input.length;if (msg.i == null) { msg.i = 0;} else { msg.i++;}msg.c = input.charAt(msg.i);msg.state = msg.i + "回目 : 状態 =a, 文字=" + msg.c;if (msg.i < len) { return msg;}

(1) デザインパターンのページから、 State パターンのソースコードを貼り付ける。

(3) 遷移先条件を参照Property: msg.c条件 :matches regex \+|\- → 1matches regex \d → 2== . → 3

(4) 各入力をクリック( 判定結果が出力される )


参考ページ

44

• Store パターン• ラズパイの情報を MQTT 経由で取得し、 dashDB に格納す

る例

• UI & API パターン• ブラウザの入力フォームから、 Watson API を問い合わ

せ、結果を表示する例

dotnsf.blog.jp/archives/1047589155.html「 Node-RED(QuickStart) のデータを dashDB に格納する」 http://

qiita.com/KenichiSekine/items/7005df36093fabf00b41「 Bluemix の Node-RED で簡単 Web アプリ開発」http://


まとめ

45

• Node-RED のデザインパターン 10 個を紹介

• 特に Store&Search～ Sequence パターンは実開発で有用

• Node-RED はハッカソンや実証実験など短時間の開発に向いている。

• 複雑な処理がカプセル化されているため、迅速に開発できる。

• DB 、 UI 、 API 、ロジックなどのチームの役割分担が明確である。

• 役割毎に開発したプログラムをマージすることも容易である。デザインパターンは、チーム開発時の共通認識、共通言語として重要となると考える。


株式会社日立製作所


2015/1/15

横井　一仁

END

46

20160115nodered design patterns

Technology