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

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

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

10 分くらいで話します！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1ft-seabass
PRO

More Decks by 1ft-seabass

Other Decks in Technology

Featured

Transcript