Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

1ft-seabass
November 02, 2021

 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

1ft-seabass

November 02, 2021
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. こんな感じ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide