Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webの技術でできる様々なこと(機械学習・物理演算・デバイス連携など) / HTML5 7th...
Search
you(@youtoy)
PRO
November 06, 2021
Technology
0
300
Webの技術でできる様々なこと(機械学習・物理演算・デバイス連携など) / HTML5 7th Anniversary
you(@youtoy)
PRO
November 06, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
3
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
130
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
39
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
90
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
200
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
130
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
3k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
150
Other Decks in Technology
See All in Technology
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
4
170
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
110
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
560
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
430
KMP の Swift export
kokihirokawa
0
340
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
170
AWSにおけるTrend Vision Oneの効果について
shimak
0
140
VCC 2025 Write-up
bata_24
0
190
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
230
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.2k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
How to Ace a Technical Interview
jacobian
280
24k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Music & Morning Musume
bryan
46
6.8k
Speed Design
sergeychernyshev
32
1.1k
Rails Girls Zürich Keynote
gr2m
95
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
How GitHub (no longer) Works
holman
315
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
Webの技術でできる様々なこと (機械学習・物理演算・デバイス連携など) 2021年11月6日 (土) HTML5 7th Anniversary @オンライン 豊田 陽介
( @youtoy )
豊田陽介(@youtoy) 自己紹介 普段は、某通信会社勤務 Microsoft MVP (2021年10月より ) ガジェット好き その他 IT系イベント主催、運営や登壇なども
子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ビジュアルプログラミング・ IoTに関するコミュニティなど
今日の話題
Webの技術で 様々な仕組みを扱う話 (ブラウザ上で動きます)
画像の機械学習 音の機械学習 VTuber的なこと 物理演算エンジン WebXR IoT系 ガジェット系
ガジェットを扱う + 音の機械学習
ブラウザで音の認識とガジェットの制御 Teachable Machine(音を対象) + Web Bluetooth API
構成・仕組みの概要 機械学習で音に反応する仕組み + BLEによる無線通信 PC (Chromo・ 内蔵マイク) BLE HTML +
JavaScript
構成・仕組みの概要 機械学習で音に反応する仕組み + BLEによる無線通信 PC (Chromo・ 内蔵マイク) toio+専用マット BLE ハンドベル・
卓上ベル・声 音・声 Web Bluetooth API Teachable Machine (音の機械学習) HTML + JavaScript
【技術の部分1】 音の機械学習モデル作成 +推論
Teachable Machine(画像・音声・ポーズ) Googleさんがオンラインで提供している仕組み ⇒ ブラウザ上の操作で学習ができて推論のお試しも
Webサイト上の操作で音を録音して学習 マイクボタン を押す 録音ボタンを 押し、2秒の間に 声・音を録音 ここに録音データ が並べばOK (現状、データ数が不足 ⇒
8秒分以上必要)
Webサイト上で音を聞き分ける処理の確認も 声・音をだすと、画面右下の 部分でリアルタイムの結果表示
ブラウザ上で機械学習モデルが作れる!? 裏側の仕組みは TensorFlow.js で 実装
去年・今年と小中学生向けにコンテストも Teachable Machine の機械学習 モデルが扱える、独自拡張版の Scratch を使ってなど 画像を対象にした機械学習や、 micro:bit での電子工作の
組み合わせも 参照元: https://www.watch.impress.co.jp/kodomo_it/news/1362765.html
音を覚えさせる ↓ 作成した機械学習モデルを JavaScript用に出力
【技術の部分2】 無線通信による ガジェットの制御
Web Bluetooth API による無線通信の例 ・ブラウザから BLE 対応デバイスを制御 ⇒ toio・M5Stack・micro:bit 等に対して使った例
手の動きに連動した 6台の toio の同時制御 toio の姿勢角 (ロール・ピッチ・ ヨー)のグラフ化 M5Stack Core2 へ 文字送信・表示、 画面の色変更
デバイス系のAPIについてはこんな話も •Appleがプライバシ上の理由から、NFC、Bluetooth、他14のWeb APIの実装を拒否 https://www.infoq.com/jp/news/2020/07/apple-fingerprinting-privacy/ •Mozilla Specification Positions https://mozilla.github.io/standards-positions/ 自分に閉じて使うパターンではない場合、特に注意! (ユーザが許可する操作なしに利用できないものには
なっていますが...)
ガジェットを扱う 別事例
ブラウザとガジェット との間の有線通信
有線でのデータ取得(シリアル通信の例) ブラウザ上で実行可能
【技術の部分】 シリアル通信を扱う
シリアル通信のための下準備 ブラウザ上で動く開発環境で micro:bit のプログラムを作成 して、micro:bit を PC との間 で USB
で通信
JavaScript でセンサーの値の受信処理などを Web Serial API(+グラフ描画)
グラフ描画はライブラリを使って
学習済み機械学習モデル を使った画像認識
ブラウザ上で両手の認識(+3D描画) MediaPipe Hands(両手の認識) + p5.js(WebGLベースの3D描画)
ブラウザ上の処理でVTuber的なこと MediaPipe Holistic(人の顔や 姿勢の認識) + p5.js(画像表示系の処理)
【技術の部分の話】 人を対象にした画像認識
MediaPipe ・Googleさんが提供している機械学習を使った仕組み ・Python用やスマホ用、C++用などが提供されている ・MediaPipe の JavaScript版(TensorFlow.jsベース) ・Face Mesh ・Face Detection
・Hands ・Holistic ・Pose ・Selfie Segmentation など...
認識できる対象の例(一部抜粋) Hands Face Mesh 参照元: https://google.github.io/mediapipe/
認識できる対象の例(一部抜粋) Holistic Selfie Segmentation 参照元: https://google.github.io/mediapipe/
JavaScript版を使うと ブラウザ上で処理が可能に
【技術の部分の話】 2D・3D描画
複数の画像を切り替えて表示 3Dの立方体を描画 (+サイズ・位置の変更等)
p5.js メディアアート系などで有名な Processing の JavaScript版 •home | p5.js https://p5js.org/
•p5.js Web Editor https://editor.p5js.org/ •OpenProcessing https://openprocessing.org/ オンラインで開発 できる環境も
ブラウザ上で 物理シミュレーション
重力や衝突・摩擦などを計算してくれる ドラッグ操作を行うと軌跡 の上で円が生成される
【技術の部分】 物理演算を行う
ブラウザ上で使える物理演算エンジンの1つ Matter.js https://brm.io/matter-js/ 物体の衝突・加速度・摩擦 などといった要素を、良い 感じに扱ってくれる
サンプルでたくさんの例が見られる Matter.js Demo https://brm.io/matter-js/demo/
物理シミュレーション に画像認識などを組み合わせる
物理演算エンジンエンジン+手の認識
手の認識はMediaPipeではない別のもので Handtrack.js https://github.com/victordibia/handtrack.js/ 「手を開いた/閉じた」という のを認識する処理が最初から 入っている
Webの技術を使って ブラウザ上で様々な処理を 扱って楽しめる!
終わり!