20211102_ビジュアルプログラミング交流会 Node-RED でいま一度ビジュアルプログラミン グとフロントエンド表示を考えてみる ワンフットシーバス 田中正吾 

私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！ 

田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。 

ビジュアルプログラミングツール Node-RED 

案件でも導入しています 

バックエンド・フロントエンドの目線で 状況対応力・コード書く具合で見てみる 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的 

状況対応力が高いほど色々な状況に柔軟に対応 低いと限られた対応になり無理に突き進むと要件に対応できず「詰む」場合もある 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的 

コード書く具合はこれくらいの度合い 【図解】これ4枚で分かるノーコード／ローコード／プロコード https://blogs.itmedia.co.jp/itsolutionjuku/2020/07/4_4.html 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的 ノーコード ローコード プロコード 

同じコード何度も書くの好きだけど コードは少なめで柔軟に対応を目指したい 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的 目指したい 

Node-RED なら API やプロトコルのやり取りは だいたい大丈夫なのでバックエンドは柔軟 

夢 わりとイイ感じだと思っている Node-RED 内でコード書く量が増えるが素の Node.js でないと厳しいシーンは少なめ。目指すエリアに近い。 ノーコードからローコードは滑らかなのはいいですね。 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的 バックエンドな Node-RED 

表示面。つまりフロントエンドの面でも いろいろ充実しているのでありがたい。 

フロントエンドで素でプロコード書くと、こう。 よくある形だが、これだと案件に対する状況対応力に比例してコード量も大きくなってしまう キツくなるので、これはいつも注意しないといけないなと思っている 状況対応力 柔軟に対応 コード書く 具合 多い 少ない 限定的 ガリガリ書く お仕事 

フレーム ワーク導入 React とか Vue などフレームワーク使うとき コード量は少なくなっても柔軟に対応できる。よいですね。書くは書くけど。 コード書く 具合 多い 少ない 限定的 状況対応力 柔軟に対応 

dashboard ノードで結構何とかなる データをグラフに表示したり、なにかしらの操作をさせたかったり https://flows.nodered.org/node/node-red-dashboard 

このダッシュボードに追加のパーツも フロー検索で探せて拡張できる 最近はいろいろ便利な ui ノードがあります。「-ui-」でさがすとよい。 https://flows.nodered.org/search?term=-ui-&type=node&type=flow&type=collection&page=1 

こんな感じ 

node-red-node-ui-table テーブル表示を手軽に行える https://flows.nodered.org/node/node-red-node-ui-table 

node-red-contrib-web-worldmap 地図を扱うノードもダッシュボード対応 https://flows.nodered.org/node/node-red-contrib-web-worldmap 

node-red-contrib-ui-upload ファイルアップロードできちゃったり https://flows.nodered.org/node/node-red-node-ui-table 

いろいろ豊富で助かる 

ただしダッシュボードは複数ユーザー操作が苦手 タブレット端末で1ユーザー操作が向いてる https://flows.nodered.org/node/node-red-dashboard 

ダッシュボード Node-RED ダッシュボードは、状況対応力はやや弱めだが コード書く量は少なく対応できる 状況対応力 コード書く 具合 多い 柔軟に対応 限定的 

HTML の表示であれば http ノードと template ノードで1ページレベルではなんとかなる template ノードに HTML書く 

Vue3 の Markdown サンプルの例 https://v3.ja.vuejs.org/examples/markdown.html 

template ノードでがんばって書く template ノードに HTML書く 

head あたり CSS と JavaScript ライブラリを反映 

body あたり DOM まわりと JavaScript のコードを反映 

実際に /test でアクセスしてみると ちゃんと Vue が 1 ページで動く これでも一部のページをガッツリ Vue で書くのはイイ感じ。jQuery 的なものももちろん大丈夫。 

1ページHTMLな手法はコードは プロコード並みに書くけど柔軟性が弱め 複数ページに弱かったり、モダンなフロントエンドによる CLI 環境が使いにくい 状況対応力 コード書く 具合 多い 柔軟に対応 限定的 1ページHTMLな Node-RED 

現状のフロントエンドはこんな感じ 1ページHTMLアプローチ＋ダッシュボードアプローチ。いけるはいける。 状況対応力 コード書く 具合 多い 柔軟に対応 限定的 ダッシュボード 1ページHTML 

とはいえ色々な要件があるのが世の中 もう一歩、状況対応力に柔軟さがないと、途中で詰む or プロコードでやり直しそう。ここが欲しい。 ノーコード→ローコード→プロコードが滑らかにしていきたい。 状況対応力 コード書く 具合 多い 柔軟に対応 限定的 ダッシュボード 1ページHTML ここが欲しい 

プロコードなフロントエンドと うまく連携したくなった ここからはまだ研究中の話だけど伝えたい！ 

setting.js の httpStatic に指定したパスは フロントエンドデータがそのまま公開できる https://nodered.jp/docs/user-guide/runtime/configuration 

httpStatic を node-red-static フォルダに 指定して index.html がそのまま表示ということ 

Vue CLI のようなフロントエンド開発環境も 無事に連携することができました https://www.1ft-seabass.jp/memo/2021/08/31/node-red-and-vue3-collaboration-basic/ フォルダで分離できてるので axios とか Bootstrap とか Milligram とか Svelte も連携できる！ 

● Node-RED をあるローカルのフォルダだけで動くようにプロジェクトを作るメモ ○ https://www.1ft-seabass.jp/memo/2021/09/01/node-red-per-launch-project-setting-run- command-static/ ● Node-RED のプロジェクト内で Vue CLI 4 で作った Vue 3 を動かすメモ ○ https://www.1ft-seabass.jp/memo/2021/08/31/node-red-and-vue3-collaboration-basic/ ● Node-RED と Vue 3 が連携したプロジェクトに初期表示のコンポーネントと Bootstrap を導入するメモ ○ https://www.1ft-seabass.jp/memo/2021/09/02/node-red-and-vue3-and-bootstrap-collabo ration-basic/ ● Node-RED と Vue 3 が連携したプロジェクトで Vue 側に vue-axios を使わずよりシンプルに axios を導 入するメモ ○ https://www.1ft-seabass.jp/memo/2021/09/10/node-red-and-vue3-and-axios-simple/ ● Node-RED と Vue 3 が連携したプロジェクトで開発時だけ API の向き先を調整するメモ ○ https://www.1ft-seabass.jp/memo/2021/09/13/node-red-and-vue3-and-axios-local-url-br anch/ ● Node-RED のプロジェクト内で Svelte を動かすメモ ○ https://www.1ft-seabass.jp/memo/2021/09/14/node-red-and-svelte-collaboration-basic/ ● Node-RED と Svelte が連携したプロジェクトで axios を導入し Node-RED http ノードからデータ取得 するメモ ○ https://www.1ft-seabass.jp/memo/2021/09/16/node-red-and-svelte-and-axios-collaborati on-basic/ そのほか試行錯誤いろいろ（一部） 

この設定を整えてフロントエンド連携を強化した Heroku 用 Node-RED 環境もまとてみました https://www.1ft-seabass.jp/memo/2021/10/09/made-heroku-node-red-local-based-starter/ 

そのほか色々見えてきた ● 同じ場所でフロントエンドとバックエンドが動くのはサッ と作る上では心強い！ ● いつか別サーバーというのはありえるけど、Node-RED あ ればよいので移植はやりやすそう！ ● フロントエンドはガシガシ対応しつつバックエンドは Node-RED で GUI で行くのは消耗しない感じがいい！ ● 今回のやり方はローカルで作って Git でコミットして感じ 作れるのでサーバーを触れないのはこれはこれでアリ！ ● このあたりの仕組みは enebular がやってことも多くて、 改めてしっかりしてるなーと思った！ 

これから、より整えば、こういうことができそう！ プロコードによるカバー範囲が出てくるので状況対応力が補強される（コードは書くけど） いま、実践で投入してブラッシュアップしております。ひとまず、楽しい。 状況対応力 コード書く 具合 多い 限定的 ダッシュボード 1ページHTML フロントエンド フレームワーク導入 

自分のフロントエンドスキルと 滑らかにつながる可能性を感じました！ ザっと作るならダッシュボードでやりつつ、作り込むならプロコードに遷移できそうな地続き感が出てきた ひきつづき、楽しんで掘り下げていきまーす！