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 でいま一度ビジュアルプログラミン
   グとフロントエンド表示を考えてみる
   ワンフットシーバス 田中正吾
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. 案件でも導入しています
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. こんな感じ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. いろいろ豊富で助かる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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/
    そのほか試行錯誤いろいろ（一部）
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide