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)
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
320
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
120
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.8k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
150
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
63
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
190
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
120
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
110
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
54
Other Decks in Technology
See All in Technology
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
220
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
230
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
220
TROCCO今昔
gtnao
0
210
TypeScript 上達の道
ysknsid25
6
710
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
230
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
130
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
120
An introduction to Claude Code SDK
choplin
3
3.3k
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
10
4k
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
180
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Navigating Team Friction
lara
187
15k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing for humans not robots
tammielis
253
25k
RailsConf 2023
tenderlove
30
1.2k
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 のページでコードサンプルを見ることもできる
終わり!