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)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
35
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
85
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
180
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
98
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
620
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.7k
Other Decks in Technology
See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
160
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
540
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.1k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.4k
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
280
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
340
Pwned Labsのすゝめ
ken5scal
2
520
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
110
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.3k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Thoughts on Productivity
jonyablonski
69
4.5k
Faster Mobile Websites
deanohume
306
31k
Code Review Best Practice
trishagee
67
18k
KATA
mclloyd
29
14k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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の技術を使って ブラウザ上で様々な処理を 扱って楽しめる!
終わり!