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 で 操作するツールがサッと作れて楽しかった話 ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 10 分くらいで話します！
4. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
5. IoT でもサッと試行錯誤する仕組みは なんぼあってもいいですからね Nuxt3 でめっちゃくちゃ助かってる話
6. 自分の仕事で IoT な Bluetooth のデバイスを 技術検証したり操作ツールをつくる機会がある
7. 今回は Sony から出ている IoT センサーブロック MESH を例にお話しします 案件のデバイスではないですが雰囲気は伝わるしリアルタイムデモします
8. MESH は 2022 年に Bluetooth 通信仕様が 公開されてプログラムからも使いやすく MESHブロックの通信仕様を公開！ 〜 テキストプログラミング言語からも利用可能に 〜 https://blog.meshprj.com/entry/mesh-tech-spec
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
10. Bluetooth のスマホアプリで検証はつらい BLE Scanner というアプリで MESH を探した例。 値が見れるけど、いちデバイスに特化するわけではないし、繰り返し検証は大変
11. 操作するために値を書き込めるが UI が使いやすい感じではないんです 値の入れ方がハードな感じ。ドキュメントで説明するのは結構丁寧にいかなといけない。 こうなるとチームみんなで試す感じじゃないし、そもそもアプリインストールだけでもハードル高い。
12. なので Web で Bluetooth 試すツールが 作れるのはとても素敵 Web Bluetooth API というのが Chrome で使える。Nuxt で組んで最低限の Basic 認証かけて公開し、 チーム誰もがツールでデバイスを試せるという展開ができる！
13. こちらに MESH 温度湿度ブロック仕掛けてます ということは！
14. ひとまずデモ Nuxt3 で作った仕組みで Sony MESH 温度湿度ブロックに WebBluetooth API で値を取得します！
15. いろいろ良かった話 仕組みや背景
16. なによりスタートダッシュがしやすかった Vue3 でちょっと悩んでしまっていた、画面遷移、TypeScript導入、 サーバーサイドの仕組み（Basic認証）、Bootstrap が用意しやすかった。 このあたりを毎度悩んでしまうとサッとはじめられずつらいんです。
17. つくる仕組みを悩まず用意できた Nuxt3 で Basic 認証と Bootstrap の環境をひとまず用意するメモ https://www.1ft-seabass.jp/memo/2023/06/29/nuxt3-simple-start/
18. これを Vercel などでサッと公開できる
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/
20. TypeScript でガシガシ書ける Web Bluetooth API とか書きづらいかなと思ったけど大丈夫でほっとした
21. Buffer 扱う型とかコードヒント出ていいよね IoT デバイスだと結構 Buffer 操作がカジュアルに出てくるのでありがたい
22. 時間があればちょっと解説 Nuxt3 で作った仕組みで Sony MESH に WebBluetooth API でステータス LED 操作するメモ https://www.1ft-seabass.jp/memo/2023/07/26/nuxt-mesh-tool-getting-temp-humd-data/
23. Vue なエコシステムでより良く書けそうで楽しみ @uribou_studying さんがお話しされた VueUse の useBluetooth のような世界があるのありがたい https://vueuse.org/core/useBluetooth/#usebluetooth
24. 時間があれば LED ブロック光らすデモ
25. 時間があれば動きブロック動かすデモ
26. ➔ Bluetooth のスマホアプリで検証はつらいので Web で Bluetooth の検証ツール組むフロントエンドシーンがある ➔ そういうときに、サッと Nuxt3 でツールが作れるのがと てもありがたかった ➔ Basic 認証や CSS フレームワーク、TypeScript など開発 道具が悩まず揃えられるので Nuxt3 はスタートしやすい ➔ Vue なエコシステムでより良く書けそうで楽しみ ➔ IoT でのフロントエンドツールづくりにも Nuxt や Vue を 活用していきたい！ まとめ