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エージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
16
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.5k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
300
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
130
Other Decks in Technology
See All in Technology
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
150
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
550
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.5k
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
310
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
190
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
2.8k
サンドボックス技術でAI利活用を促進する
koh_naga
0
190
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
280
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
120
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
200
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
340
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
220
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Statistics for Hackers
jakevdp
799
220k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Typedesign – Prime Four
hannesfritz
42
2.8k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Docker and Python
trallard
45
3.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Music & Morning Musume
bryan
46
6.8k
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の技術を使って ブラウザ上で様々な処理を 扱って楽しめる!
終わり!