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 に挑戦している話
   ワンフットシーバス 田中正吾
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Svelte
   https://svelte.jp/
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. これに Svelte を載せた
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. エディタが見れます
    

    View Slide

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

    View Slide

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

    View Slide

25. まとめ
    ● Svelte や Vue のようにビルドするフロントエンドも
    httpStatic パラメータで指定したフォルダに書き出せばだ
    いたいなんとかなる
    ● 1つの仕組みでバックエンドもフロントエンドもイケるのは
    対応力が上がるので良い
    ● バックエンドとフロントエンドをやり取りする手法は整えた
    ほうがいいが、独自ルールになるので悩ましい
    ● いまはローカル作業でアップロードという形だが、いずれ
    CI/CDでやれる仕組みがあるとより楽しそう
    

    View Slide

26. まとめ
    ● しっかりした認証を考え出すと課題はまだあるが、ひとまず
    の仕組みができるのはありがたい
    ● Svelte や Vue も記述量が少なく見通し良く作れるという意
    味ではローコード。バックエンドも Node-RED でローコー
    ドで分かりやすく書けるので心の負荷が少なくて良い。
    ● いままでフロントエンドでしっかりコードを書くことと
    Node-RED は分けがちだったが、一緒にできそうな可能性を
    感じる！
    ● とりあえず、今後も案件で使いつつ探求していきます！
    

    View Slide