20230727_Vue.jsの勉強会はなんぼあってもいいですからね

Vue.jsの勉強会はなんぼあってもいいですからね「Nuxt3 で IoT を Web Bluetooth で操作するツールがサッと作れて楽しかった話」の登壇資料です。

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

・シルエットデザイン 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. 20230727_Vue.jsの勉強会はなんぼあってもいいですからね
   Nuxt3 で IoT を Web Bluetooth で
   操作するツールがサッと作れて楽しかった話
   ワンフットシーバス 田中正吾
   

   View Slide

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

   View Slide

3. 10 分くらいで話します！
   

   View Slide

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

   View Slide

5. IoT でもサッと試行錯誤する仕組みは
   なんぼあってもいいですからね
   Nuxt3 でめっちゃくちゃ助かってる話
   

   View Slide

6. 自分の仕事で IoT な Bluetooth のデバイスを
   技術検証したり操作ツールをつくる機会がある
   

   View Slide

7. 今回は Sony から出ている IoT センサーブロック
   MESH を例にお話しします
   案件のデバイスではないですが雰囲気は伝わるしリアルタイムデモします
   

   View Slide

8. MESH は 2022 年に Bluetooth 通信仕様が
   公開されてプログラムからも使いやすく
   MESHブロックの通信仕様を公開！ 〜 テキストプログラミング言語からも利用可能に 〜
   https://blog.meshprj.com/entry/mesh-tech-spec
   

   View Slide

9. MESH の仕様ページの様子
   ドキュメントわかりやすいし、公開されててえらい
   https://developer.meshprj.com/hc/ja/articles/8286360648089-%E9%80%9A%E4%BF%A1%E4%BB%9
   5%E6%A7%98%E3%81%AE%E6%A6%82%E8%A6%81
   

   View Slide

10. Bluetooth のスマホアプリで検証はつらい
    BLE Scanner というアプリで MESH を探した例。
    値が見れるけど、いちデバイスに特化するわけではないし、繰り返し検証は大変
    

    View Slide

11. 操作するために値を書き込めるが
    UI が使いやすい感じではないんです
    値の入れ方がハードな感じ。ドキュメントで説明するのは結構丁寧にいかなといけない。
    こうなるとチームみんなで試す感じじゃないし、そもそもアプリインストールだけでもハードル高い。
    

    View Slide

12. なので Web で Bluetooth 試すツールが
    作れるのはとても素敵
    Web Bluetooth API というのが Chrome で使える。Nuxt で組んで最低限の Basic 認証かけて公開し、
    チーム誰もがツールでデバイスを試せるという展開ができる！
    

    View Slide

13. こちらに MESH 温度湿度ブロック仕掛けてます
    ということは！
    

    View Slide

14. ひとまずデモ
    Nuxt3 で作った仕組みで Sony MESH 温度湿度ブロックに WebBluetooth API で値を取得します！
    

    View Slide

15. いろいろ良かった話
    仕組みや背景
    

    View Slide

16. なによりスタートダッシュがしやすかった
    Vue3 でちょっと悩んでしまっていた、画面遷移、TypeScript導入、
    サーバーサイドの仕組み（Basic認証）、Bootstrap が用意しやすかった。
    このあたりを毎度悩んでしまうとサッとはじめられずつらいんです。
    

    View Slide

17. つくる仕組みを悩まず用意できた
    Nuxt3 で Basic 認証と Bootstrap の環境をひとまず用意するメモ
    https://www.1ft-seabass.jp/memo/2023/06/29/nuxt3-simple-start/
    

    View Slide

18. これを Vercel などでサッと公開できる
    

    View Slide

19. あとは Web Bluetooth 部分を書くだけ
    Nuxt3 で作った仕組みで Sony MESH に WebBluetooth API でステータス LED 操作するメモ
    https://www.1ft-seabass.jp/memo/2023/07/26/nuxt-mesh-tool-getting-temp-humd-data/
    

    View Slide

20. TypeScript でガシガシ書ける
    Web Bluetooth API とか書きづらいかなと思ったけど大丈夫でほっとした
    

    View Slide

21. Buffer 扱う型とかコードヒント出ていいよね
    IoT デバイスだと結構 Buffer 操作がカジュアルに出てくるのでありがたい
    

    View Slide

22. 時間があればちょっと解説
    Nuxt3 で作った仕組みで Sony MESH に WebBluetooth API でステータス LED 操作するメモ
    https://www.1ft-seabass.jp/memo/2023/07/26/nuxt-mesh-tool-getting-temp-humd-data/
    

    View Slide

23. Vue なエコシステムでより良く書けそうで楽しみ
    @uribou_studying さんがお話しされた VueUse の useBluetooth のような世界があるのありがたい
    https://vueuse.org/core/useBluetooth/#usebluetooth
    

    View Slide

24. 時間があれば LED ブロック光らすデモ
    

    View Slide

25. 時間があれば動きブロック動かすデモ
    

    View Slide

26. ➔ Bluetooth のスマホアプリで検証はつらいので Web で
    Bluetooth の検証ツール組むフロントエンドシーンがある
    ➔ そういうときに、サッと Nuxt3 でツールが作れるのがと
    てもありがたかった
    ➔ Basic 認証や CSS フレームワーク、TypeScript など開発
    道具が悩まず揃えられるので Nuxt3 はスタートしやすい
    ➔ Vue なエコシステムでより良く書けそうで楽しみ
    ➔ IoT でのフロントエンドツールづくりにも Nuxt や Vue を
    活用していきたい！
    まとめ
    

    View Slide