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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

10 分くらいで話します！

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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