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

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 は分けがちだったが、一緒にできそうな可能性を 感じる！ • とりあえず、今後も案件で使いつつ探求していきます！