Tweet
Tweet

Slide 1

Slide 1 text

2024年7月5日 (金) 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2 豊田陽介（ ） @youtoy AIを活用したWebアプリのプロトタイプを作って コンテストや展示に出してみた話

Slide 2

Slide 2 text

自己紹介 豊田陽介（ ） @youtoy ▶ IT系イベント主催、 　 登壇や運営なども ▶ 機械学習・IoT関連 　 の書籍を出版 ▶ モノ作り系のコンテストに応募したり 　 展示イベントに出展したりも 　（ヒーローズ・リーグ、Maker Faire等）　　 プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きなもの・技術など

Slide 3

Slide 3 text

この後にデモする 作品を作った動機

Slide 4

Slide 4 text

手軽に面白いことをしたい！ （SF・🎮ゲームの世界的な方向で）

Slide 5

Slide 5 text

ブラウザで動くAI・機械学習を使ったWebアプリ 光学迷彩・透明マント のような表現

Slide 6

Slide 6 text

利用した技術と処理の流れ 処理の流れと素材の利用箇所 両手を認識 背景取得 映像の一部を 背景画像に 利用した技術 【MediaPipe】 ・Googleが提供する仕組み 　のJavaScript版の一つ ・高速・高精度な手の認識 【p5.js】 ・JavaScript の描画ライブラリ ・Canvas API が扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも p5.js p5.js MediaPipe

Slide 7

Slide 7 text

利用時の流れなどを示した動画

Slide 8

Slide 8 text

作品を自分以外の人に 体験してもらう／見てもらう

Slide 9

Slide 9 text

展示イベントに作品を出してみた IoT系の技術コミュニティ 「IoTLT」のメンバーで 一緒に出展 自分の作品展示

Slide 10

Slide 10 text

子どもから大人まで様々な方に楽しんでもらえた

Slide 11

Slide 11 text

作ったものを楽しそうに 体験してもらえるのは嬉しい！

Slide 12

Slide 12 text

モノ作り／作品作りを 楽しむお祭りに参加してみる

Slide 13

Slide 13 text

1つオススメしたい内容「ヒーローズ・リーグ」

Slide 14

Slide 14 text

作ったものを「とりあえず」応募してみる 「作り込もう！」とか気負いすぎず、まずは参加してみる 参加者も運営側も、みんなが応募した作品を楽しんでる

Slide 15

Slide 15 text

様々な人との 作品作りを通じた つながりが！

Slide 16

Slide 16 text

【時間があればちょっと紹介】 大阪での モノ作り系展示イベント

Slide 17

Slide 17 text

楽しそうなので気軽に見に行ってみると良さそう モノ作り系の展示イベント 今週末！！

Slide 18

Slide 18 text

【時間があればちょっと紹介】 MediaPipeについて

Slide 19

Slide 19 text

MediaPipeでできること（画像系の一部） 顔のキーポイント検出 姿勢推定 手のキーポイント／ ジェスチャー検出

Slide 20

Slide 20 text

公式ページでデモを簡単に体験できる ※ CodePen のページでコードサンプルを見ることもできる

Slide 21

Slide 21 text

終わり！