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 Anniversary
Search
you(@youtoy)
PRO
November 06, 2021
Technology
0
280
Webの技術でできる様々なこと(機械学習・物理演算・デバイス連携など) / HTML5 7th Anniversary
you(@youtoy)
PRO
November 06, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
120
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.6k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
160
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.4k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
2
2.1k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
53
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
95
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
150
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
230
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
430
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
510
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
360
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
3
13k
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
On Your Data を超えていく!
hirotomotaguchi
2
670
反実仮想機械学習とは何か
usaito
PRO
11
4.4k
20240416_devopsdaystokyo
kzkmaeda
1
220
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Being A Developer After 40
akosma
57
580k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Faster Mobile Websites
deanohume
299
30k
Building an army of robots
kneath
300
41k
For a Future-Friendly Web
brad_frost
172
9k
4 Signs Your Business is Dying
shpigford
175
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Gamification - CAS2011
davidbonilla
76
4.6k
Thoughts on Productivity
jonyablonski
58
3.8k
The Pragmatic Product Professional
lauravandoore
25
5.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の技術を使って ブラウザ上で様々な処理を 扱って楽しめる!
終わり!