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
Javascriptで試作した様々な仕組みの話(機械学習・物理・画像や音など) / Saitama.js vol.0
Search
you(@youtoy)
PRO
October 14, 2021
Technology
0
1.6k
Javascriptで試作した様々な仕組みの話(機械学習・物理・画像や音など) / Saitama.js vol.0
you(@youtoy)
PRO
October 14, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
120
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.4k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
2
2k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
46
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
84
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you
PRO
0
100
M5Stack Core2とUIFlowの「リモコン+」でお手軽IoT(仕組みをシンプルに試してみた) / IoTLT vol.102
you
PRO
0
3.9k
Other Decks in Technology
See All in Technology
どうやってWebサービスのページ表示速度を1/3にしたか / how-to-reduce-display-speed
pinkumohikan
2
470
Server-Side Kotlin + Spring Boot + Exposedでやったこと
ikefukurou777
0
110
令和最新版 ソフトウェアエンジニアのためのDJ入門、あるいはDJに学ぶ仕事術 #ya8
stefafafan
1
130
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
0
1.1k
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
130
出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 「【速報】AWSの生成AIサービスであるAmazon Bedrock がリリースされたので朝イチで触ってみた」について語る
oshanqq
0
290
Beginner's Guide to Partitioning vs. Sharding in Postgres | Claire Giordano | Nordic PGDay 2024
clairegiordano
0
210
GitHub composite actions
hkusu
1
120
実録_マルチテナント環境でのGmailガイドライン対応
ryuichi1208
7
1.5k
事業部を超えた 開発生産性向上に挑戦する
kentakozuka
2
110
最速思考でバクラク品質を! スタートアップのリアルな課題とQAの実践
nakanao
1
430
DevOps Topologies 10 years on: what have we learned about silos, collaboration, and flow? - Matthew Skelton, Conflux
matthewskelton
PRO
2
420
Featured
See All Featured
Fireside Chat
paigeccino
19
2.5k
Unsuck your backbone
ammeep
660
56k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Designing for Performance
lara
601
67k
Docker and Python
trallard
33
2.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Navigating Team Friction
lara
177
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Product Roadmaps are Hard
iamctodd
43
9.6k
Transcript
Javascriptで試作した様々な仕組みの話 (機械学習・物理・画像や音など) 2021年10月14日 (木) Saitama.js vol.0 @オンライン 豊田 陽介 (
@youtoy )
豊田陽介(@youtoy) 自己紹介 普段は、某通信会社勤務 Microsoft MVP (2021年10月より ) ガジェット好き その他 IT系イベント主催、運営や登壇なども
子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ビジュアルプログラミング・ IoTに関するコミュニティなど
今日の話題
JavaScript を使い ブラウザ上でこれらを扱う
JavaScript 画像の機械学習 音の機械学習 VTuber的なこと 物理演算エンジン WebAR IoT系 ガジェット系
ここから、 技術の話と実例と
【技術の部分の話1】 人を対象にした画像認識系
MediaPipe ・Googleさんが提供している機械学習を使った仕組み ・Python用やスマホ用、C++用などが提供されている ・MediaPipe の JavaScript版(TensorFlow.jsベース) ・Face Mesh ・Face Detection
・Hands ・Holistic ・Pose ・Selfie Segmentation など...
認識できる対象の例(一部抜粋) Hands Face Mesh
認識できる対象の例(一部抜粋) Holistic Selfie Segmentation
【技術の部分の話2】 2D・3D描画
p5.js メディアアート系などで有名な Processing の JavaScript版 •home | p5.js https://p5js.org/
•p5.js Web Editor https://editor.p5js.org/ •OpenProcessing https://openprocessing.org/ オンラインで開発 できる環境も
MediaPipe + p5.js = ?
ブラウザ上の処理でVTuber的なこと MediaPipe Holistic(人の顔や 姿勢の認識) + p5.js(画像表示系の処理)
ブラウザ上で両手の認識と3D描画 MediaPipe Hands(両手の認識) + p5.js(WebGLベースの3D描画)
ブラウザ上での人物と背景の分離+描画 MediaPipe Selfie Segmentation (人物と背景の分離) + p5.js(2D・3D描画)
MediaPipe の 最近のアップデート
ブラウザ上で虹彩の位置まで検出できる! MediaPipe Face Mesh (人の顔の検出) + p5.js(2D描画)
【技術の部分の話3】 音の機械学習モデル作成 +推論
Teachable Machine(画像・音声・ポーズ) Googleさんがオンラインで提供している仕組み ⇒ ブラウザ上の操作で学習ができて推論のお試しも
【技術の部分の話4】 Bluetooth通信(BLE)
JavaScriptで外部デバイスとの通信 ブラウザ上で実行 Node.js ・Web Serial ・Web Bluetooth ・Fetch API ・axios等を利用
・WebSocket API ・MQTT.js等を利用 ・Node Serialport ・noble・bleno ・Fetch API ・axios等を利用 ・ws等を利用 ・MQTT.js等を利用 シリアル通信 BLE HTTPリクエスト WebSocket MQTT
JavaScriptで外部デバイスとの通信 ブラウザ上で実行 Node.js ・Web Serial ・Web Bluetooth ・Fetch API ・axios等を利用
・WebSocket API ・MQTT.js等を利用 ・Node Serialport ・noble・bleno ・Fetch API ・axios等を利用 ・ws等を利用 ・MQTT.js等を利用 シリアル通信 BLE HTTPリクエスト WebSocket MQTT
デバイス系の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/ 自分に閉じて使うパターンではない場合、特に注意! (ユーザが許可する操作なしに利用できないもの
ではあるものの...)
Teachable Machine + Web Bluetooth API = ?
ブラウザで音の認識とBluetooth通信 Teachable Machine(音を対象) + Web Bluetooth API
共同主催しているコミュニティで出展して 終了後 モノ作り系イベント(Maker Faire Tokyo 2020)で展示 体験:子どもも大人も
実例メイン
【技術の部分の話5】 リアルタイム通信(MQTT)
JavaScriptで外部デバイスとの通信 ブラウザ上で実行 Node.js ・Web Serial ・Web Bluetooth ・Fetch API ・axios等を利用
・WebSocket API ・MQTT.js等を利用 ・Node Serialport ・noble・bleno ・Fetch API ・axios等を利用 ・ws等を利用 ・MQTT.js等を利用 シリアル通信 BLE HTTPリクエスト WebSocket MQTT
MQTT + p5.js = ?
2台のスマホの描画連動
物理演算エンジン + 画像認識 + p5.js = ?
物理演算エンジンエンジン+手の認識
ARマーカー認識 + p5.js = ?
ARマーカー認識+2D描画
イベントの話 x 2 (connpass に掲載)
ビジュアルプログラミング x IoT 再来週 10/28(木)20:00 から(視聴は YouTube にて)
ビジュアルプログラミング全般 3週間後、 11/2(火)19:30 から(視聴は YouTube にて)
終わり!