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
140
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you(@youtoy)
PRO
July 05, 2024
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
100
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.6k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
310
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
130
Other Decks in Technology
See All in Technology
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
210
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
310
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.7k
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
研究開発と製品開発、両利きのロボティクス
youtalk
1
510
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
11
4.6k
ガチな登山用デバイスからこんにちは
halka
1
230
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
750
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Done Done
chrislema
185
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Six Lessons from altMBA
skipperchong
28
4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing Experiences People Love
moore
142
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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 のページでコードサンプルを見ることもできる
終わり!