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で試作した様々な仕組みの話(機械学習・物理・画像や音など) / Saita...
Search
you(@youtoy)
PRO
October 14, 2021
Technology
0
1.8k
Javascriptで試作した様々な仕組みの話(機械学習・物理・画像や音など) / Saitama.js vol.0
you(@youtoy)
PRO
October 14, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
57
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
97
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
50
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
55
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
230
Other Decks in Technology
See All in Technology
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
5min GuardDuty Extended Threat Detection EKS
takakuni
0
150
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
130
フィンテック養成勉強会#54
finengine
0
180
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
150
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
220
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
エンジニア向け技術スタック情報
kauche
1
270
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.7k
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
15
5.3k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimizing for Happiness
mojombo
379
70k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
Producing Creativity
orderedlist
PRO
346
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
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 にて)
終わり!