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
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI...
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
you(@youtoy)
PRO
December 01, 2023
Technology
3k
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you(@youtoy)
PRO
December 01, 2023
More Decks by you(@youtoy)
See All by you(@youtoy)
toio・myCobotでフィジカルAIっぽいことを行うための検討(とりあえず調査) / フィジカルAI LT(IoTLTによる開催)
you
PRO
0
340
Webの技術とガジェットで子どもも大人も楽しめるワクワク体験を提供する / Qiita Tech Festa Day 2026
you
PRO
1
360
ローカルLLMとLINE Botの組み合わせ その3 / LINE DC Generative AI Meetup #8
you
PRO
0
160
クラウドファンディング版StackChan 3体(4体)をインタラクティブな体験型作品にして展示もした話 / スタックチャンお誕生日会2026
you
PRO
0
330
イベントで大活躍する電子ペーパー名札 〜その3〜 / ビジュアルプログラミングIoTLT vol.23
you
PRO
0
320
AI時代だけど、わりと力業で追いかけている技術情報収集の話 / 20260518
you
PRO
0
29
最近の技術系の話題で気になったもの色々(IoT系以外も) / IoTLT 花見予定会(たぶんBBQ) @都立潮風公園バーベキュー広場
you
PRO
1
420
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
you
PRO
0
530
イベントで大活躍する電子ペーパー名札を作る(その2) 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
you
PRO
0
340
Other Decks in Technology
See All in Technology
Rust×eBPFでEDRっぽいものをつくる
sunlife3
2
790
Go 1.27 の標準パッケージに uuid が入った!のでいろいろ喋る / go_127_std_go_uuid
convto
3
580
AI画像認識を活用したゲーム内決済処理検証の自動化
gree_tech
PRO
0
110
RelayerというPHPのフレームワークを作った
polidog
PRO
0
110
同じWAFが、攻撃の“形”は弾く── 正当な“形”の不正は通す
kuroneko13
0
270
35分でわかるEffective Platform Engineering
nwiizo
5
590
AI時代に、人は何を、どう学ぶのか #pbl_pub / What and How Do We Learn in the AI Era?
takaking22
1
220
【Aiming】共通基盤なのに「共通化しない」課金・認証基盤「LINK」が選び取ったシングルテナント戦略と運用の秘訣
saikeda
0
120
LLM・AIエージェントシステムベストプラクティス
shibuiwilliam
6
1.6k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
7
20k
【GCC2026】TrueHDRIを用いたルックデブ環境とライティングテクニック
bandainamcostudios
PRO
0
210
案件に一番詳しいAIを Amazon Bedrock AgentCore で作る ― 知見が知見を生むチームへ / Compounding Knowledge with AgentCore
yusukeshimizu
1
170
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
270
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
470
The SEO identity crisis: Don't let AI make you average
varn
0
530
Become a Pro
speakerdeck
PRO
31
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
We Are The Robots
honzajavorek
0
300
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
780
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Balancing Empowerment & Direction
lara
6
1.2k
My Coaching Mixtape
mlcsv
0
260
Transcript
2023年12月1日 (金) Qiita Night~AI、機械学習 @オンライン 豊田陽介( ) @youtoy AI・機械学習ライブラリを使ったWebアプリで ワクワク体験!
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・モノ作り系のイベントに作品出展 ・機械学習・IoTの書籍を出版 ・ワークショップ講師(大人/子ども向け) ・ Microsoft
MVP(2021/10 から) プライベートでの活動 IoT工作の本 (共著) 機械学習の本 (単著)
AI・機械学習を使って 自分がやっていること
AI・機械学習を使った体験型コンテンツの一つ 光学迷彩・透明マントを 体験できるWebアプリ
紹介したWebアプリの 仕組みの話
AI・機械学習に関する部分 Googleさん提供の「MediaPipe(の JavaScript版)」 ⇒ブラウザ/PCアプリ/モバイル/エッジデバイス向け などといった、様々な環境で利用可能
MediaPipeでできること(画像系の一部) 顔のキーポイント検出 姿勢推定 手のキーポイント/ ジェスチャー検出
公式ページでデモを簡単に体験できる ※ CodePen のページでコードサンプルを見ることもできる
利用しているライブラリとおおまかな流れ 処理の流れ 両手を認識 背景取得 映像の一部を 背景画像に 利用したライブラリ ・Googleさんが提供するAI・機械学習 ライブラリ ※
今回は手を対象にしたものを利用 ・高速・高精度なキーポイント検出など ・Python版やスマホ向けのものも ・JavaScript の描画ライブラリ ・Canvas API などが扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも ▼ MediaPipe(JavaScript版) ▼ p5.js
タイトルにある 「ワクワク」の話 〜オンライン編〜
X(旧Twitter)にポスト 日本国内だけでなく、海外の 方からの反応・コメントも!
英語圏以外の方からの引用コメント
DeepLにコピペして翻訳
何が起こっているかが 見た目だけで伝わる ↓ 言語を問わず伝わる
SF映画・アニメの世界を感じてもらえたかも!? 他に、攻殻機動隊関連のキーワード などを含むポストも
ポストに対する反響
タイトルにある 「ワクワク」の話 〜オフライン編〜
2023年11月に モノ作り系イベントで展示
来場した方に体験いただける展示 IoT系の技術コミュニティの メンバーと一緒のブースにて
大人の方にも楽しんでいただけて
親子連れのお子さんにも楽しんでもらえた!
サクッと体験できて 説明ほぼ不要の内容で 展示イベントでも大活躍
分かりやすい出力との組み合わせ AI・機械学習を使った仕組みを入力に用いる ⇒出力で「描画」以外にも「光る」「音が鳴る」 「物体が動く」なども組み合わせやすい PC (Chromo・マイク) ロボットトイの動き BLE 音・声 音の分類(モデルを自前で作成)と組みわせた事例
他の事例も含めてQiitaの記事に アドベントカレンダー 12/1分の記事として投稿
こういった方向でも AI・機械学習を 活用してみませんか?
終わり!