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)
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
23
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
91
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
260
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
13
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
130
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
40
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
100
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
210
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
140
Other Decks in Technology
See All in Technology
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.8k
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
410
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
110
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
2
620
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
150
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
650
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
130
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
310
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
5k
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
360
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Being A Developer After 40
akosma
91
590k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Navigating Team Friction
lara
190
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
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の技術を使って ブラウザ上で様々な処理を 扱って楽しめる!
終わり!