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アプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大...
Search
you(@youtoy)
PRO
July 05, 2024
Technology
0
130
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you(@youtoy)
PRO
July 05, 2024
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
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.3k
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
270
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
230
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
350
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
360
Wasm元年
askua
0
150
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
260
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
520
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
0
130
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimizing for Happiness
mojombo
379
70k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Documentation Writing (for coders)
carmenintech
72
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
4 Signs Your Business is Dying
shpigford
184
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Transcript
2024年7月5日 (金) 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2 豊田陽介( ) @youtoy AIを活用したWebアプリのプロトタイプを作って
コンテストや展示に出してみた話
自己紹介 豊田陽介( ) @youtoy ▶ IT系イベント主催、 登壇や運営なども ▶ 機械学習・IoT関連
の書籍を出版 ▶ モノ作り系のコンテストに応募したり 展示イベントに出展したりも (ヒーローズ・リーグ、Maker Faire等) プライベートでの活動 ▶ ガジェット ▶ 描画系/IoT/AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きなもの・技術など
この後にデモする 作品を作った動機
手軽に面白いことをしたい! (SF・🎮ゲームの世界的な方向で)
ブラウザで動くAI・機械学習を使ったWebアプリ 光学迷彩・透明マント のような表現
利用した技術と処理の流れ 処理の流れと素材の利用箇所 両手を認識 背景取得 映像の一部を 背景画像に 利用した技術 【MediaPipe】 ・Googleが提供する仕組み のJavaScript版の一つ
・高速・高精度な手の認識 【p5.js】 ・JavaScript の描画ライブラリ ・Canvas API が扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも p5.js p5.js MediaPipe
利用時の流れなどを示した動画
作品を自分以外の人に 体験してもらう/見てもらう
展示イベントに作品を出してみた IoT系の技術コミュニティ 「IoTLT」のメンバーで 一緒に出展 自分の作品展示
子どもから大人まで様々な方に楽しんでもらえた
作ったものを楽しそうに 体験してもらえるのは嬉しい!
モノ作り/作品作りを 楽しむお祭りに参加してみる
1つオススメしたい内容「ヒーローズ・リーグ」
作ったものを「とりあえず」応募してみる 「作り込もう!」とか気負いすぎず、まずは参加してみる 参加者も運営側も、みんなが応募した作品を楽しんでる
様々な人との 作品作りを通じた つながりが!
【時間があればちょっと紹介】 大阪での モノ作り系展示イベント
楽しそうなので気軽に見に行ってみると良さそう モノ作り系の展示イベント 今週末!!
【時間があればちょっと紹介】 MediaPipeについて
MediaPipeでできること(画像系の一部) 顔のキーポイント検出 姿勢推定 手のキーポイント/ ジェスチャー検出
公式ページでデモを簡単に体験できる ※ CodePen のページでコードサンプルを見ることもできる
終わり!