$30 off During Our Annual Pro Sale. View Details »

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

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

    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