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

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

 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

1ft-seabass
PRO

July 27, 2023
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

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