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

20220310_Node-RED Park vol.4

20220310_Node-RED Park vol.4

Node-RED Park Vol.4 - Node-RED+フロントエンドどうしてる?「Node-RED + Svelte に挑戦している話」の登壇資料です。

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

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

Fecdd3417cd7375cc0bd0352d72db27e?s=128

1ft-seabass
PRO

March 10, 2022
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

Transcript

  1. Node-RED Park Vol.4 - Node-RED+フロントエンドどうしてる? Node-RED + Svelte に挑戦している話 ワンフットシーバス

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

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

  4. モチベーション 自分のフロントエンド技術と良い感じに Node-RED を使っていきたい フロントエンドでバックエンドと API でつなぎ込むときに柔軟にやりたい フロントエンドに集中したいときまで JavaScript をバックエンドで多めに書くのは避けたい

  5. Svelte https://svelte.jp/

  6. Write less code https://svelte.jp/blog/write-less-code

  7. No virtual DOM https://svelte.jp/blog/virtual-dom-is-pure-overhead

  8. Truly reactive https://svelte.jp/blog/svelte-3-rethinking-reactivity

  9. 実際に動かせたりドキュメントも 揃ってきててよさげ https://svelte.jp/examples/hello-world

  10. こういうプロジェクトを作りました Node-RED と Svelte が連携したプロジェクトを Heroku で動かすメモ https://www.1ft-seabass.jp/memo/2022/03/08/heroku-starter-nodered-svelte-wip-lv01/

  11. Heroku で動くログイン付きの作業環境がベース ローカルの作業データを元に Heroku で動かす Node-RED の仕組みを GitHub に公開したメモ https://www.1ft-seabass.jp/memo/2021/10/09/made-heroku-node-red-local-based-starter/

  12. 実際のリポジトリ https://github.com/1ft-seabass/heroku-node-red-local-based-starter

  13. これに Svelte を載せた

  14. こんなことをしています

  15. Svelte + Bootstrap も導入できていて ある程度の UI 対応なら太刀打ちできそう こんなトップページ

  16. Svelte の場合は自動で書き出されるフォルダを Node-RED 側から指定して表示してます

  17. というわけでリポジトリをコピーして持ってくる 自分同士なのでこうなるけど、フォークしてもってくればOK

  18. Heroku にデプロイ git init → heroku create <アプリ名> -> デプロイ

  19. Heroku でログインID/PASS設定

  20. まずトップページ見てみる

  21. /admin でエディタにログイン

  22. エディタが見れます

  23. 余裕があれば変更してみるデモ ローカル Node-RED のフロー変更 → ローカル Svelte で表示確認 → Heroku

    に反映
  24. この仕組みで Vue3 もいけそうでした 手元ではなんとかなったので、いずれリポジトリ公開してみる

  25. まとめ • Svelte や Vue のようにビルドするフロントエンドも httpStatic パラメータで指定したフォルダに書き出せばだ いたいなんとかなる •

    1つの仕組みでバックエンドもフロントエンドもイケるのは 対応力が上がるので良い • バックエンドとフロントエンドをやり取りする手法は整えた ほうがいいが、独自ルールになるので悩ましい • いまはローカル作業でアップロードという形だが、いずれ CI/CDでやれる仕組みがあるとより楽しそう
  26. まとめ • しっかりした認証を考え出すと課題はまだあるが、ひとまず の仕組みができるのはありがたい • Svelte や Vue も記述量が少なく見通し良く作れるという意 味ではローコード。バックエンドも

    Node-RED でローコー ドで分かりやすく書けるので心の負荷が少なくて良い。 • いままでフロントエンドでしっかりコードを書くことと Node-RED は分けがちだったが、一緒にできそうな可能性を 感じる! • とりあえず、今後も案件で使いつつ探求していきます!