Node-REDのロードマップや見どころ

© Hitachi, Ltd. 2017. All rights reserved.
2017/6/21
株式会社日立製作所、
Node-RED User Group Japan
横井一仁
Node-REDのロードマップや見どころ

Node-REDとは
2
ノードという処理単位をGUI上でつなぐ操作で、
簡単に一連の処理を開発できる開発環境
• コーディング未経験者でも、開発が容易
• 複雑な処理を行いたい場合は、JavaScriptで記述も可能
• PC、タブレットで開発可能
IoT端末の異常をメール通知
タブレット端末上での編集操作
ノード間は、
主に変数msg.payloadを用いて
JSON形式のデータが渡される
フリック入力と似た操作で
編集できる

Node-REDの開発環境
6
デバッグ画面
デプロイボタン
利用できる
ノード一覧
使用するノードを
配置する場所

# ノード説明
1 inject クリックを契機として処理を開始する。
2 debug
デバッグ情報を出力する。
(前のノードから渡された値を出力)
3 http request REST APIを問い合わせる。
4 function JavaScriptのコードを記述、実行する。
5 template 定型文を定義する。
6 change 変数の代入や削除等を行う。
代表的なノード
7

Node-REDの歴史
4
• 2014年3月 IBMの社内コンテストで開発、カンファレンスQconで発表
• 2014年6月 Bluemixのリリースと同時に標準搭載OSSとして公開
• 2015年11月～ Raspberry Pi向けLinux OSの標準ソフトウェア
(Raspberry Piの出荷台数は累計1,100万台、300万台/年で増加)
• 2016年10月～ Linux Foundation管理下となり、オープンな開発に
• 2017年6月現在 npm経由の新規インストール数は4万/月、
利用できるノード数は972ノード
Google Trendsで「Node-RED」を検索した結果
※Bluemixは、International Business Machines Corporationの商標です。

© Hitachi, Ltd. 2017. All rights reserved. 5
2017年1月 v0.16の機能
• デバッグタブの別ウィンドウ表示
• 複数のノードを接続する
操作の容易化
• ノードを追加する操作の容易化
• フローのコンフリクト解決
• ChangeノードのJSONata対応
2017年6月頃 v0.17の機能
• デバッグタブの機能追加
• ポートラベリング
• ライブラリUIの改善
• フローの実行停止フラグ
• フローエディタの
GitHub、Twitter認証
• ノードのホワイトリスト管理機能
• Windows向けテストケース改善
• JSONファイルをエディタに
ドラッグ＆ドロップして読み込み
• カスタムキーボードショートカット
Node-REDのロードマップ
今回はフロー開発で役立つ
UI関連の機能(赤色)を紹介
v0.17以降の将来機能
• バージョンコントロール機能
• フローエディタの多言語対応
• フローデバッガ
• エディタとランタイムの分離
• フロー、グローバルコンテキスト
のストレージバックエンド
※2017年6月現在の情報であり、
変更となることもあります。

フローエディタの多言語対応(将来機能)
6
ブラウザの言語設定に基づいて
フローエディタの表示言語を
自動的に切り替える機能
• 日本語対応
• メニュー、パレット
(日本語化済)
• e-mail, twitter, rbe
feed parseノード
(日本語化済)
• 標準ノードのプロパティ
• ヒントメッセージ
• 中国語対応
• メニュー、パレット
ノードプロパティ
の日本語化
Chinese
Palette & menu
中国語化した
パレットと
メニュー

ノードのホワイトリスト管理機能(v0.17)
ノードライブラリ
(npm)
Npm install
Dropbox
Node-RED
ユーザ
従来の
ブラックリスト方式
ブラックリスト方式では、
同様の機能を持つ別名の
ノードをインストールできてしまう
(例 Dropbox、AWS S3ノード)
AWS S3
標準ノード
nodeExclude:
[“Dropbox”]
Settings.jsonに
禁止ノードを追加
• ホワイトリスト方式で許可されたノードのみ利用できるようにする機能
• IoTデバイスやクラウド上のNode-REDを提供する場合に、
ユーザが自由にノード(プログラム)を実行できてしまうことを抑止
ホワイトリスト方式
ブラックリスト
ノードライブラリ
(npm)
Npm install
Dropbox
Node-REDユーザは、
ホワイトリストに記載されている
ノードのみインストールできる
AWS S3
標準ノード
Settings.jsonに
許可ノードを追加
ホワイトリスト
Node-RED
ユーザ
※Dropboxはドロップボックス，インコーポレイテッドの商標です。
GitHubはギットハブ，インコーポレイテッドの商標です。
nodeInclude:
[“inject”,
“catch”…]

バージョンコントロール機能(将来機能)
8
• GitHub上でフローのバージョン管理を行う機能
• フローの編集操作を誤った場合や、過去に開発したフローを
再利用したい場合に過去のフローをGitHubから呼び出し可能
デプロイ時に変更内容を
記載するダイアログ表示を
有効にするオプション
サイドバーに
デプロイ履歴を表示
https://github.com/node-red/node-red/wiki/Design%3A-Version-Control
バージョンコントロール機能のモックアップUI

フローデバッガ(将来機能)
9
• フロー内のノードの端子(ポート)をダブルクリックすることで
ブレイクポイントを設定できる機能
• ブレイクポイントを設定すると、フロー内を流れるメッセージが
端子でキューイングされ一時停止
端子をダブルクリックし、
ブレイクポイントを設定
(端子が青色になる)
デバッグタブで
フローの停止、
メッセージの確認が可能

フローのコンフリクト解決(v0.16)
10
Node-REDに対して、複数の開発者(ブラウザ)がデプロイした際に
フローの衝突を検出し、マージを行う機能
ダイアログで
フローの差分を
確認できる

複数のノードを接続する操作の容易化 (v0.16)
11
ノード接続の際、Ctrlキーを押し続けることで、
クリックのみで複数のノードを接続できる機能
(3)マウスで
プッシュ
(4)マウスを
リリース
(1)マウスで
プッシュ
(2)マウスを
リリース
(2) クリック
(1) Ctrlキーを
押し続ける
(3) クリック (3) クリック
※従来は複数ノードを接続する場合、一つずつワイヤー接続が必要

ノードを追加する操作の容易化(v0.16)
12
• ワークスペース上でCtrl+クリックを行うことで、
プルダウンメニューからノードを検索、選択できる機能
• ノードを配置するためにパレットとワークスペース間を
往復する操作が不要化できる
• 複数ノード接続容易化と組み合わせて利用することも可能
(1) Ctrl+クリック
(2) プルダウンメニューから
ノードを選択

フローデータを格納したJSONファイルをエディタへ
ドラッグ＆ドロップの操作でフローを読み込む機能
JSONファイルをドラッグ＆ドロップで読み込み(vO.17)
(2) フローが読み込まれる
(1)ファイルをエディタ
へドラッグ＆ドロップ
フローデータ
が入った
JSONファイル

ChangeノードのJSONata対応(v0.16)
14
• JSONataという言語により、JSONデータを加工する機能
• 様々な関数が用意されており、簡単な加工処理は
Functionノードを用いたコーディングが不要になる。
JSONataの提供関数
Changeノードのプロパティ

デバッグタブの別ウィンドウ表示(v0.16)
15
デバッグタブを別ウィンドウ化し、デバッグ画面を広く表示する機能
クリックすると
別ウィンドウで表示

デバッグタブ上の値のコピー機能(v0.17)
16
JSONオブジェクトの中から選択した値をコピーする機能
クリックすると
値がコピーされる
(例: 76ffc8e2.47cb78)

デバッグタブ上の変数のパスのコピー(v0.17)
17
• JSONオブジェクトのパス(msg.payload.dataの様な文字列)を
クリップボードにコピーする機能
• Changeノードを用いて値を他の変数へ代入する際、
パスのコピー＆ペーストで用いると便利
クリックすると、
パスがコピーされる
(例: msg._msgid)

デバッグタブ上に表示する変数を固定(v0.17)
18
• メッセージを受け取る毎にJSONオブジェクト中から
表示したい変数を設定する機能
• 構造が複雑なJSONオブジェクトの中から
常に選択した値が展開され表示される
クリックすることで、
表示する変数を
ピン止め

フローの実行停止フラグ(v0.17)
19
• フローを実行することなくデプロイする機能
• 主に以下のケースで利用
• 編集中にフローの保存のみを行いたいケース
• バックエンドのAPI経由でフローをデプロイ後、
エディタでフローを確認してから実行したいケース
(2) タブのプロパティで
フローの有効/無効を
切り替え
(1) タブを
ダブルクリック

ポートラベリング(v0.17)
20
ノードの端子をマウスオーバすると、
端子の説明をポップアップ表示する機能
Switchノードの場合は、
プロパティ画面の内容を
確認せずポップアップから
端子の内容を確認可能
プロパティ設定から
固定値の上書きもできる

まとめ
21
• Node-REDは、Bluemixでの採用、Raspberry Pi向けOS
での採用、Linux Foundation管理などの機会により、
ユーザ数や提供ノード数が増加
• Node-REDの新機能は、GitHub上の開発者がMLで
議論しながら、ユーザリクエストに基づいて開発中

参考
22
• Node-RED開発者によるウェブキャスト
• dW Open Tech Talk: Node-RED update
https://developer.ibm.com/open/videos/node-red-update-tech-talk/
• dW Open Tech Talk: Node-RED
https://developer.ibm.com/open/videos/node-red-tech-talk/
• Node-REDのGitHubリポジトリ
https://github.com/node-red/node-red
• Node-REDの機能開発状況
https://trello.com/b/R0O3CSrI/node-red-whiteboard

Node-REDのロードマップや見どころ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Node-REDのロードマップや見どころ

Similar to Node-REDのロードマップや見どころ (20)

More from BMXUG

More from BMXUG (20)

Recently uploaded

Recently uploaded (8)

Node-REDのロードマップや見どころ