20211102_ビジュアルプログラミング交流会

20211102_ビジュアルプログラミング交流会「Node-RED でいま一度ビジュアルプログラミングとフロントエンド表示を考えてみる」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. 20211102_ビジュアルプログラミング交流会 Node-RED でいま一度ビジュアルプログラミン グとフロントエンド表示を考えてみる ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. ビジュアルプログラミングツール Node-RED
5. 案件でも導入しています
6. バックエンド・フロントエンドの目線で 状況対応力・コード書く具合で見てみる 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的
7. 状況対応力が高いほど色々な状況に柔軟に対応 低いと限られた対応になり無理に突き進むと要件に対応できず「詰む」場合もある 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的
8. コード書く具合はこれくらいの度合い 【図解】これ4枚で分かるノーコード／ローコード／プロコード https://blogs.itmedia.co.jp/itsolutionjuku/2020/07/4_4.html 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的 ノーコード ローコード プロコード
9. 同じコード何度も書くの好きだけど コードは少なめで柔軟に対応を目指したい 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的 目指したい
10. Node-RED なら API やプロトコルのやり取りは だいたい大丈夫なのでバックエンドは柔軟
11. 夢 わりとイイ感じだと思っている Node-RED 内でコード書く量が増えるが素の Node.js でないと厳しいシーンは少なめ。目指すエリアに近い。 ノーコードからローコードは滑らかなのはいいですね。 状況対応力 コード書く 具合 多い 少ない 柔軟に対応 限定的 バックエンドな Node-RED
12. 表示面。つまりフロントエンドの面でも いろいろ充実しているのでありがたい。
13. フロントエンドで素でプロコード書くと、こう。 よくある形だが、これだと案件に対する状況対応力に比例してコード量も大きくなってしまう キツくなるので、これはいつも注意しないといけないなと思っている 状況対応力 柔軟に対応 コード書く 具合 多い 少ない 限定的 ガリガリ書く お仕事
14. フレーム ワーク導入 React とか Vue などフレームワーク使うとき コード量は少なくなっても柔軟に対応できる。よいですね。書くは書くけど。 コード書く 具合 多い 少ない 限定的 状況対応力 柔軟に対応
15. dashboard ノードで結構何とかなる データをグラフに表示したり、なにかしらの操作をさせたかったり https://flows.nodered.org/node/node-red-dashboard
16. このダッシュボードに追加のパーツも フロー検索で探せて拡張できる 最近はいろいろ便利な ui ノードがあります。「-ui-」でさがすとよい。 https://flows.nodered.org/search?term=-ui-&type=node&type=flow&type=collection&page=1
17. こんな感じ
18. node-red-node-ui-table テーブル表示を手軽に行える https://flows.nodered.org/node/node-red-node-ui-table
19. node-red-contrib-web-worldmap 地図を扱うノードもダッシュボード対応 https://flows.nodered.org/node/node-red-contrib-web-worldmap
20. node-red-contrib-ui-upload ファイルアップロードできちゃったり https://flows.nodered.org/node/node-red-node-ui-table
21. いろいろ豊富で助かる
22. ただしダッシュボードは複数ユーザー操作が苦手 タブレット端末で1ユーザー操作が向いてる https://flows.nodered.org/node/node-red-dashboard
23. ダッシュボード Node-RED ダッシュボードは、状況対応力はやや弱めだが コード書く量は少なく対応できる 状況対応力 コード書く 具合 多い 柔軟に対応 限定的
24. HTML の表示であれば http ノードと template ノードで1ページレベルではなんとかなる template ノードに HTML書く
25. Vue3 の Markdown サンプルの例 https://v3.ja.vuejs.org/examples/markdown.html
26. template ノードでがんばって書く template ノードに HTML書く
27. head あたり CSS と JavaScript ライブラリを反映
28. body あたり DOM まわりと JavaScript のコードを反映
29. 実際に /test でアクセスしてみると ちゃんと Vue が 1 ページで動く これでも一部のページをガッツリ Vue で書くのはイイ感じ。jQuery 的なものももちろん大丈夫。
30. 1ページHTMLな手法はコードは プロコード並みに書くけど柔軟性が弱め 複数ページに弱かったり、モダンなフロントエンドによる CLI 環境が使いにくい 状況対応力 コード書く 具合 多い 柔軟に対応 限定的 1ページHTMLな Node-RED
31. 現状のフロントエンドはこんな感じ 1ページHTMLアプローチ＋ダッシュボードアプローチ。いけるはいける。 状況対応力 コード書く 具合 多い 柔軟に対応 限定的 ダッシュボード 1ページHTML
32. とはいえ色々な要件があるのが世の中 もう一歩、状況対応力に柔軟さがないと、途中で詰む or プロコードでやり直しそう。ここが欲しい。 ノーコード→ローコード→プロコードが滑らかにしていきたい。 状況対応力 コード書く 具合 多い 柔軟に対応 限定的 ダッシュボード 1ページHTML ここが欲しい
33. プロコードなフロントエンドと うまく連携したくなった ここからはまだ研究中の話だけど伝えたい！
34. setting.js の httpStatic に指定したパスは フロントエンドデータがそのまま公開できる https://nodered.jp/docs/user-guide/runtime/configuration
35. httpStatic を node-red-static フォルダに 指定して index.html がそのまま表示ということ
36. Vue CLI のようなフロントエンド開発環境も 無事に連携することができました https://www.1ft-seabass.jp/memo/2021/08/31/node-red-and-vue3-collaboration-basic/ フォルダで分離できてるので axios とか Bootstrap とか Milligram とか Svelte も連携できる！
37. • 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/ そのほか試行錯誤いろいろ（一部）
38. この設定を整えてフロントエンド連携を強化した Heroku 用 Node-RED 環境もまとてみました https://www.1ft-seabass.jp/memo/2021/10/09/made-heroku-node-red-local-based-starter/
39. そのほか色々見えてきた • 同じ場所でフロントエンドとバックエンドが動くのはサッ と作る上では心強い！ • いつか別サーバーというのはありえるけど、Node-RED あ ればよいので移植はやりやすそう！ • フロントエンドはガシガシ対応しつつバックエンドは Node-RED で GUI で行くのは消耗しない感じがいい！ • 今回のやり方はローカルで作って Git でコミットして感じ 作れるのでサーバーを触れないのはこれはこれでアリ！ • このあたりの仕組みは enebular がやってことも多くて、 改めてしっかりしてるなーと思った！
40. これから、より整えば、こういうことができそう！ プロコードによるカバー範囲が出てくるので状況対応力が補強される（コードは書くけど） いま、実践で投入してブラッシュアップしております。ひとまず、楽しい。 状況対応力 コード書く 具合 多い 限定的 ダッシュボード 1ページHTML フロントエンド フレームワーク導入
41. 自分のフロントエンドスキルと 滑らかにつながる可能性を感じました！ ザっと作るならダッシュボードでやりつつ、作り込むならプロコードに遷移できそうな地続き感が出てきた ひきつづき、楽しんで掘り下げていきまーす！