Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI...
Search
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)
つくって、体験してもらって、楽しんでもらう - 子どもも大人もワクワクするインタラクティブ体験を支える技術 -
you
PRO
0
49
コーディングエージェントでM5Stack系の開発を少し試した時の話 / M5 Japan Tour 2026 Autumn 東京
you
PRO
0
250
toio・myCobotでフィジカルAIっぽいことを行うための検討(とりあえず調査) / フィジカルAI LT(IoTLTによる開催)
you
PRO
0
410
Webの技術とガジェットで子どもも大人も楽しめるワクワク体験を提供する / Qiita Tech Festa Day 2026
you
PRO
1
380
ローカルLLMとLINE Botの組み合わせ その3 / LINE DC Generative AI Meetup #8
you
PRO
0
200
クラウドファンディング版StackChan 3体(4体)をインタラクティブな体験型作品にして展示もした話 / スタックチャンお誕生日会2026
you
PRO
0
360
イベントで大活躍する電子ペーパー名札 〜その3〜 / ビジュアルプログラミングIoTLT vol.23
you
PRO
0
390
AI時代だけど、わりと力業で追いかけている技術情報収集の話 / 20260518
you
PRO
0
47
最近の技術系の話題で気になったもの色々(IoT系以外も) / IoTLT 花見予定会(たぶんBBQ) @都立潮風公園バーベキュー広場
you
PRO
1
450
Other Decks in Technology
See All in Technology
Lambda MicroVMsが分からなすぎたので使い所を1から考えてみた
tsukuboshi
2
390
あなたの知らないAmazon VPC Route Server/Amazon VPC Route Server you don't know about
masakiokuda
2
220
AgentCoreで実践するハーネスエンジニアリング
yakumo
1
280
1万名の社員が使う認証基盤で どう信頼性を担保するか?
kairim0
0
210
予測不能な実行エージェントを安全にサクッと試せるサンドボックス環境の話
sansantech
PRO
0
120
調査タスクをAIと乗り切る 〜過去の調査をナレッジ化し 調査手順をスキルにする〜
mot_techtalk
1
110
データ品質を壊しながらSnowflakeのAIに分析させてみた
kawanago
0
500
[2026 Oracle Technical Deep Dive] エンタープライズAIエージェントを支えるOCIソリューション。ラインナップと特徴を理解しよう! (2026年9月17日開催)
oracle4engineer
PRO
0
510
【データ横丁主催】AI Agentがコンテキストを使って仕事をした後、何が残るのか― 組織の経験を次の判断に引き継ぐ「Agent Memory」
shisyu_gaku
2
330
IoTデバイスを繋げるプロトコルMatterをAndroidで使用する方法
harutiro
0
120
ログラスのマルチプロダクトを 支える認証基盤 〜テナントごとに異なる統制とどう向き合うか〜
dada4386
3
400
The seven pitfalls of AI (revised version)
ufried
0
260
Featured
See All Featured
How to build a perfect <img>
jonoalderson
1
6.1k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
450
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.6k
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
710
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
68
58k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
1
620
Designing Powerful Visuals for Engaging Learning
tmiket
1
590
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
3
3.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
430
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
2
2.9k
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・機械学習を 活用してみませんか?
終わり!