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
130
総額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
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
240
Other Decks in Technology
See All in Technology
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
160
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.9k
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.2k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
15k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
210
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
340
What’s new in Android development tools
yanzm
0
270
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
250
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
280
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Thoughts on Productivity
jonyablonski
69
4.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
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 のページでコードサンプルを見ることもできる
終わり!