こんにちは！TECH Street編集部です！
今回は2021年5月27日（木）に開催した、 「Node-REDエンジニア勉強会〜ローコード開発のトレンドとユーザー活用事例を学ぶ〜」のイベントレポートお届けいたします。
システム開発にかかる工数やコストを大きく軽減できると注目されている「ローコード（Low Code）開発」。今回はローコード開発を可能とするIoT向けビジュアルプログラミングツール「Node-RED」活用ユーザーに事例を共有いただきました！
登壇者はこちらの3名！（登壇順に記載）
田中 正吾さん／ワンフットシーバス
木戸 康平さん／株式会社CambrianRobotics
豊田 陽介さん
それでは早速ご紹介してまいります◎
Node-REDことはじめ＆デモ／田中 正吾さん
Node-REDとは、IoTなど様々なAPI/Data連携をGUIで直感的に構築できるオープンソースソフトウェア。こちらは、Node.jsでできており、npmでインストールして使うことができます。
手元のPC、クラウド、Raspberry Piのようなデバイスでも使うことができ、導入のしやすさも良いところなのだとか。また、日本語ドキュメントも翻訳されたものが多く使いやすい点も◎
実際のNode-REDの画面はこちら。大きく分けて3つのパートに分かれています。
①パレット
絵の具のようにノードの機能のかたまりが置かれています。パレットはインストール済みで利用可能な全てのノードが表示されます。このノードは様々な機能があり、flowsという形で検索、インストールが可能です。（フロー検索： https://flows.nodered.org/ )
②ワークスペース
パレットからノードを配置して、フロー（データの流れ）を作るエリアです。
③サイドバー
エディタ内に多くの便利なツールを提供するエリアです。
ここで出てくる、「ノード」というワードは、Node-REDの基本的な構成要素で、処理をする機能の塊と認識してください。ノードを繋いでフローというデータの流れを作り、前のノードからメッセージを受け取るか、外部イベントを受け取ることで動きます。ノードはメッセージまたはイベントを処理し、次のノードにメッセージを送り、右から左に処理されます。メッセージはJSONデータで構成されており、各ノードで処理された内容がバケツリレーのようにやりとりされていきます。
イベントでは、実際に「injectノードとdebugノードを繋いでみる」デモも行われました！
赤枠で囲まれているものがinject。今回は日付（タイムスタンプ）をきっかけにdebugにメッセージを送るデモをご実施いただきました。
左のサイドバーから「inject」と「debug」を選択してワークスペースまでドラッグ。カーソルを重ねるとそれぞれをつなげられる紐が出てくるので、上記図のようにつなげます。そのあと、画面では隠れてしまっていますが、右上にある「デプロイ」ボタンを押し、このNode-REDを確定させます。さらに、サイドバーにてデバッグタブを表示し、ワークスペース上の「inject」をクリックすると実際に発生したデータがこのように表示されます。
流れるようなスピードで実施でき、非常にわかりやすそうです…！
続きましてAPI連携について。
パレットにははじめから多彩な接続ノードがあり、IoTでよく使われるMQTTやWbe周りで使われるHTTP/WebSocketなどを揃えています。APIはHTTPでつなぐことが多いですが、Node-REDにもHTTP関連ノードがあります。
さて、ここでも実際にデモをしていただきました。
今回は、柴犬画像APIから画像を表示するデモです。上記のように、タイムスタンプからshibainu.onlineにデータを繋ぎ、JSONで変換して画像のURLを取り出し、イメージを表示させるという流れです。
「http request」は、ダブルクリックすると詳細の設定ができるので、ここに取得した画像のURLを貼り、処理を確定します。
「http request」と「msg payload」の間に「json」を入れてあげると、文字列が変換され、パレットの管理で画像表示するノードを追加すると、画像が表示できるようになるのだそうです。
デモを見ていても、感覚的に操作ができそうでぜひ試して見たくなりました！田中さんありがとうございます。
ここからは、実際にNode-REDを使ってどんなことができるのか、ユーザーLTのご紹介です！LT最後は再び田中さんに登場いただき、実際の活用事例をお話しいただきますよ〜◎
Node-REDのワールドマップを使ってみた／木戸 康平さん
木戸さんが感じているNode-REDの醍醐味は、「組み合わせるのが簡単」という点。例えば、
Twilio、Veritone、Twitter、Googleなど外部サービスと組み合わせることができるノードが多くあるのも楽しいポイントなのだそうです。
今回は、地図（worldmap）とハードウェア（obniz）を組み合わせてみることに挑戦。
具体的には、バーチャルランニングを作成。走ると画面が進み、走るのをやめると止まる、ジムなどでみるアレですね！
バーチャルランニングシステムを作るには、
①走っている動きを検知して②地図／ストリートビューを進めるという2つの要素が必要となります。
動きの検知は、obnizOSを使います。上図のオレンジ色のデバイスに、obnizOSをインストールすると、デバイスの状態やセンサデータを取得できます。デバイスにプログラムを入れる必要はなく、Node-RED上だけで完結することができて手軽に試せるそうです。今回は、加速度データを取得します。
そして、マップ上での表示ですが、マップを表示するだけでなく、どこの部分を表示するかをカスタマイズしたり、3D表示ができたりなど、機能的。こちらも何も設定しなくても、すぐに使えるものだったそうです。
構成は上記図の通り。obnizで動きを感知し、処理を加えてworldmapのマップで表示といった流れです。Node-RED上での構成は、こちらのようになりました。
このシステムは、1時間程度で作成！走っているかどうかの判定は加速度の数値をベースに設定、一歩前進はGPSデータをベースに設定しました。イベントでは実際にデモもしていただきましたが、実際にobnizが動きを検知して地図上で対象が動いていく様子も見せていただきました◎
こちらも、非常に面白い事例でした！1時間程度で作成できたということで、お手軽さがやはりNode-REDの魅力ですね。
資料
Node-RED でデバイス・アプリ連携／豊田 陽介さん
豊田さんからは、Node-REDを使ったデバイス連携についてのお話をいただきました！
こちらに紹介しているものは全てではありませんが、Node-REDで利用可能なデバイス間をつなぐ仕組み。例えば、デバイス間で直接つなぐ場合は、シリアル通信、MIDI、BLEなどを使って、既製品のデータ取得や電子工作デバイスでのプロタイピングが可能。ネット経由だとHTTPリクエスト、Websocket、MQTTなどを使い、LINEやSlackに通知したりスマートホームの仕組みを自前で作ったりすることができます。
例えば、Bluetooth搭載デバイスで温度湿度を計測し、可視化したい、という場合にもNode-REDを使うことができます。
具体的なプログラムはこちら。左側でBLE接続をしてデータ取得をし、データ変換をして、右側のプログラムで値の取り出し・グラフ化を行います。
豊田さんは、こちらをJavaScriptでの実装にも挑戦してみましたが、BLEの処理の流れを把握しながらプログラミングをする必要があり、なかなか大変だったそう。一方、Node-REDを使うとGUI上でボタン操作・文字入力を簡単に操作することでプログラムができ、非常に手軽にできたそうです。
可視化したデータをインターネット経由でLINEやSlackに通知させるということもNode-REDで可能。温湿度を一定で保ちたい、確認したい場合のアラートとして役立ちそうな仕組みですね。
また、Buletoothは近い範囲でのデータ送信でしたが、インターネット経由でデータを送信して、遠隔地での通信を可視化することもできます。違うデバイスを使っていても、使うノードを変えてあげれば同じようなシステムを構築することができるそう！
この、遠隔地でのデータ送信について、実際に使ってみたのが人感センサー。上記図、左下にあるようなデバイスに人感センサーをつけ、その場所に人がいるかどうかを可視化できるようなシステムを作成したそうです。会議室の空き状態を把握する際などに活用できそうです。
具体的なプログラムはこちら。今回は2つのデバイスを併用したため、並列でプログラムを作成しています。左半分が、MQTTブローカーとの接続、右半分が可視化をするために機能しているとのこと。
イベント当日もガジェットが届くなど、ガジェット大好きな豊田さん、ありがとうございました！
資料
Node-REDのビジネス・プライベート活用／田中正吾さん
ここからは再び田中さんが登壇。Node-REDのビジネス活用についてご紹介いただきます！今回は、Node-RED Con Tokyo 2020を例に、最新の事例をお話いただきました。
Node-RED Con Tokyo 2020とは、2020年にNode-REDユーザー間の交流、各分野での技術や事例のキャッチアップ、Globalからの最新情報のシェアなどを元に、Node-REDを全体的に盛り上げていく事を目的に開催されたデジタルイベントエクスペリエンス。このイベントでは各社のビジネス活用事例が多く紹介されていました。セッションの詳細はこちらの公式ページからご確認ください！
最近では、換気のタイミングを測るためにCO2センターのデータを取得し可視化する、という用途でも使われているそうです。こちらは、M5Stack＋CO2センターからMQTTを介してNode-REDが値を受け取りダッシュボード機能で可視化するという仕組み。
Node-REDの仕組みは上記の通り。イベントでは実際にデモも行っていただきましたが、CO2のグラフとゲージをわかりやすく可視化できていました！
Node-REDのプライベート活用
ここからは、プライベートでのご活用について。
ウォンバットが大好きだという田中さんは、IFTTTを利用してTwitterから#wambatの情報を集めてNode-REDでDicordチャットに通知をする仕組みを作りました。
Node-REDのフローは上記の通り。AirTableというデータベースのノードが以前の記事をチェックしつつ以後の重複をチェックしてくれます。こちらはビジネスにおいては自社の商品やサービスについてのツイートを効率よく収集することもできるそうです。
また、Node-REDをカメラと接続し、LINEから指示を送ることで遠隔でカメラを操作することもできます。田中さんは、こちらをお子様の見守りカメラと接続して使用。使っているカメラはIODATA Qwatchというインターネットカメラで、無線で軽量、設置しやすく暗闇でも使用可能◎公式にAPIが公開されているのでNode-REDと連携して使っているのだそうです！
具体的には2つのNode-REDを使っています。LINEのやりとりをする時にAzureを使い、カメラとのやりとりはRaspberry Piを使ってデータを連携しています。
こちらは、ご家族からも好評！家族とのコミュニケーションツールなど、欲しいツールをさっと手軽に追加し試してみることができるのがNode-REDの良いところですね。
また、Node-REDはGUIのおかげでみて思い出すことができるので、週1、月1と期間が空いても継続開発がしやすいのも便利な特徴なのだとか。
Node-REDまとめ
・IoTなど様々な、API/Data連携をGUIで直感的に作れるので開発も活発
・ビジネスでの利用シーンも増えていて大きな企業の採用事例もある
・みて理解しやすく、アイデアをすぐに形にして作り続けることに寄り添ってくれる
資料＆登壇ブログ
まとめ
今回ご紹介したNode-REDはどなたでも簡単にお手軽にお試しできるローコード開発ツールですので、ぜひ皆さん試してみてください◎
ビデオオンの参加者のみなさまとの集合写真
参加者から田中さんへの質問
“（Q）Nodeはノードですよね。REDの由来って何ですか？”
（A）IBMのカラーが青だと思うのですが、その青に対して赤というチョイスだったのでは？という一説があります。しかし定かではないです。
“（Q）ビジネスとしての利用でも無料ですか？制限などありますでしょうか？”
（A）基本的にオープンソースで無料です。隠れたコードなどはないのでそういう恩恵は受け取ることができます。
“（Q）カスタムノード作ってみたらうまく動かなくてデバッグ方法がよくわからなくて困りました。よいデバッグ方法ありますでしょうか。”
（A）Node.jsとして検証した方がいいです。その処理が安定していないと、上手く作動しないことがあります。Node.jsさえ組めれば、JSさえ書ければ使えるという感覚は大きいです。
“（Q）検索してNode追加する際、インストールでエラーになることもしばしばありますが、「使えるノード」「使えない（エラーになりそうな）ノード」の見極め方はありますか？”
（A）頻繫に更新していることが条件です。アップデートに対応しているか？という観点ですね。中にあるコアなプログラムが古くなっていることもあります。テスト環境が少ないものは怪しいです。ラズパイでBluetoothのテストをしていますとかは、限定されていると感じることあります。特定のところに特化している良さがあるともいえますね。
“（Q）Node-REDでスマホアプリを作ることはできますか？”
（A）2段階あります。レスポンシブルにPCやスマホでもできるものがあります。もう1段階、もっとUIを凝ってつくるときはUCSMでつくることもできます
参加者から木戸さんへの質問
“（Q）obnis、気になります！簡単に買えるのですか？（いくらか聞いても良い？）”
（A）いくつか種類があります。大体6000円くらいからAmazon等で購入できます。
“（Q）センサーの感度、送信性能にもよる感じですか？？すごいですね。おもしろい。”
（A）感度の良いセンサーのものは高価になりますが、個人で遊ぶ用等であれば手軽に触れます。
“（Q）こちらのシステム、ゼロから作ってどれくらいで作成できるのですか？初心者でも行けますか？やってみたい。”
（A）今回のシステムは、アイデアに時間がかかりましたが、アイデアができてしまえば1～2時間で作れました。もちろん元々の知識がありましたが、コード量で言えば、100行程度でした。
参加者から豊田さんへの質問
“（Q）本筋からそれますが、今日届いたガジェットが気になります。”
（A）M5Stack UnitV2というLinuxで動作するAIカメラです。
“（Q）ガジェットマニアの視点として語るNode-RED、聞かせてください！”
（A）自分がもっているガジェットをとりあえず動かして試したい時に、簡単にPCとつなげられたりするのがいいなと思います。
“（Q）本業は研究員？との事！（なんだかすごい）お仕事では全く使わないのですか？Node-REDとかガジェットとか。”
（A）仕事はそれら以外のものを使う内容で、Node-RED・ガジェットは完全に趣味で利用しています。
参加者から登壇の皆さまの質問
“（Q）NODE-REDの「何よりもここが好きだ！」を聞きたいです。”
田中さん：自分が作れなかったところが簡単に作れるようになれるのがいいですね。
木戸さん：さくっと作れて試せるのがいいです。
豊田さん：プロトタイプ開発とかお試しするときに、昨日をさくっと作れるのが凄く良いなと思います。
“（Q）Node-RED昔さわっていました。そこでプロな皆様にお聞きしたいのは、Node-REDの改善して欲しい点・直して欲しい点です。”
田中さん：複数人で同時に操作できる機能が出てきたらいいなと思っています。いまでも他の誰かが保存したときに差分が反映できるようにはなりましたが、もっと Google ドキュメントを同時に操作するような動きがあったら共同作業しやすいと思っています。ただ、 v1.3 の新機能でUIの使い勝手など色々良くなってきたので情報追っています。
木戸さん：細かい使い勝手になりますが、functionノードでconsole.logをかいてもデバッグできないところは直してほしいですね。
豊田さん：便利に使っているダッシュボード機能に関して、今は慣れましたが最初は全体構成（グループ・タブの関係性など）が分かりづらかったので、とりあえず簡易なUIを作るだけという場合はシンプルな設定で使えるパターンがあっても良いかと思うことがあります。
“（Q）Node-REDのおススメノードを教えて欲しいです！”
田中さん：air tableノードはオススメです。今1.3のバージョンにアップして、改めてインジェクトノードも良いと思いました。1個だけといわれると、MQTTノードです。
木戸さん：obnizノードはオススメします！自分1人でできなかったところが簡単にできる！今の一押しはワールドマップです。
豊田さん：ダッシュボード関連のノードはすごくいいです。可視化や入力用のUIなどに使えます。
“（Q）ここが便利なんだよーー！！というのが聞きたいです！”
田中さん：登壇中もお伝えしましたが、たとえ数か月後に見て忘れていても、フローを見て、ポチポチ操作すれば、かなり思い出せて再開できる可能性が高いところが素敵だなと思っています。作り途中で手を止めても継続的につくれるところです。
木戸さん：サクッと作れるところ。サクッと作っても振り返りやすい状態になり、後で混乱しないです。
豊田さん：テキストプログラミングで書くとややこしい処理を、内部に包含してくれているノードを使うことで、仕組みを作るところをシンプルにしてくれるところです。
“（Q）サブフローのパッケージ化機能を詳しく知りたいです。”
田中さん：情報で言うとこちらにあります。
https://nodered.jp/docs/creating-nodes/subflow-modules
もう少し突っ込んだものだとこちらに分かりやすい図があります。
https://www.slideshare.net/ssuserbeb7c0/nodered-v13
“（Q）ラインの間にノードを置いたら勝手に間に入る‥便利！ 他に便利な操作があれば教えて下さい。”
田中さん：マウスでドラッグして複数のノードが選択できます！
木戸さん：デバッグのメッセージをクリックするとそのメッセージを出しているノードが枠で囲まれるとかですかね。
豊田さん：配列またはオブジェクトのデバッグ出力で、出力された要素へのマウスオーバーを行った際に複数のボタンが表示され、そこからパスのコピー等を行えます。
“（Q）アカウント登録？は簡単ですか？ここを読めばわかる、みたいな参考ページありますか？”
木戸さん：node-red自体はアカウント登録も何もなく、自分でソースコード入れたらできます。かんたんに使うためのIBMやenebularなどのホスティングサービスは会員登録が必要です。
enebularだったらこちらが会員登録の方法です。
https://blog.enebular.com/enebular/start-enebular-video1/
“（Q）ノードのダウンロード数順での検索はどのような操作で出るものでしょうか？”
木戸さん：node-redの公式サイトで検索できます。
https://flows.nodered.org/search?type=node の右上のソートをdownloadで見られます。
“（Q）外からコントロールする、という場合のつなぎ方はどのようにしているのでしょうか？（インターネット→ローカルへの連携方法）”
田中さん：プロトコルでいうと WebSocket や MQTT を使うと subscribe （購読という意味）でデータを待ち受けることができるので、デバイスが Node-RED から情報を待ち受ければ遠隔操作になります。
木戸さん：obnizを今回使いましたが、obnizは個別のシリアル番号をクラウド側で指定するだけでローカルのデバイスにアクセスできます。
“（Q）5年後、Node-REDはこんなことできちゃう！ みたいな予想？予測？をご登壇のみなさまに聞いてみたいです。”
田中さん：2Dだけじゃなく3Dも使えるようになるのでは？と思っています。
木戸さん：もっと使える層が増えそうな気がします。RPAみたいに、広まっていきそうですね。
豊田さん：周りのアプリやデバイスも進化して、それらとの連携も容易にできると思うので、いまよりもっと高度なことができるようになるのでは？と思います。
イベントレポートは以上になります！次回のイベントもお楽しみに！
