オープンキャンパス模擬講義 Webカメラを使ったインタラクティブWebアプリの開発 / oc2026

北海道情報大学オープンキャンパス模擬講義「Webカメラを使ったインタラクティブWebアプリの開発」の資料

Transcript

1. オープンキャンパス 模擬講義 Webカメラを使ったインタラクティブWebアプリの開発 #インタラクティブ #Webアプリケーション #プログラミング #クリエイティブ
2. 今日の内容 • 大学・研究紹介 (10分) • インタラクティブアプリについて (5分) • 演習 (40分) • おわりに (5分) 2
3. 北海道情報大学 3
4. 北海道情報大学 情報メディア学科 4
5. 自己紹介 • 湯村 翼 (ゆむら つばさ) @yumu19 / @yumulab • 情報メディア学科 准教授 (2021/04〜) • 専門は情報科学、特にインタフェース、センシング、IoT、VR、ネットワーク等 • 経歴 • 札幌開成高等学校 卒業 • 北海道大学 理学部 地球科学科 卒業 • 東京大学大学院 理学系研究科 地球惑星科学専攻 修士課程 • 北陸先端科学技術大学院大学 情報科学研究科 情報科学専攻 博士課程 • 2008-2011 株式会社 東芝（ネットワーク家電の研究開発 etc.） • 2011-2013 クウジット株式会社（ARアプリ、インタラクティブ展示の開発 etc.） • 2013-2014 フリーランスエンジニア・合同会社PhysVis 代表社員CEO（iOSアプリ、Webアプリの開発 etc.） • 2015-2021 国立研究開発法人情報通信研究機構（無線ネットワークエミュレータの研究 etc.） 5
6. 研究テーマ 大テーマ 空間インタラクション 物理空間 や サイバー空間 を経由して ヒトとモノ、ヒトとヒトをつなげる 一般的な分野名は「ヒューマンコンピュータインタラクション（HCI）」 • 人とコンピュータの新しいインタフェースをつくる 具体的な • 物理空間をセンシングしてデータを収集し活用する 研究対象 • VR・AR・メタバース の新しい活用方法を生み出す の例 • ドローン 等の移動体を社会に活用する 6
7. HCI研究例 (AR) • 非試合日の野球場で楽しむためのARホームランボールキャッチ体験システム • 宮崎 創太さん(情報メディア学科 湯村研究室 2026年卒) 7
8. HCI研究例 (メタバース) • ノア：メタバース空間で対話相手に向かって自律移動するAIアバター • 小山田 悠人さん(情報メディア学科 湯村研究室 2026年卒) 8
9. HCI研究例 (創作支援) • ParticleAlive：歌詞駆動パーティクルライブ制作支援ツール • 上村 宙さん(情報メディア学科 湯村研究室 4年) 9
10. HCI研究例 (行動変容) • 推しみん：「推し」から睡眠を促すメッセージが届くLINEbot • 太田 駿さん(情報メディア学科 湯村研究室 2026年卒) 10
11. HCI研究例 (触覚提示デバイス) • ASSADEP：ASMR動画のための音響放射圧を用いた耳部触覚提示 • 清水 怜良さん(大学院経営情報学研究科 湯村研究室 修士2年) 11
12. 今日の内容 • Webカメラを使ったインタラクティブWebアプリの開発 • インタラクティブ：双方向の • 見るだけじゃなくて、操作できる 12
13. インタラクティブアプリケーション • 体を使ったインタラクティブ展示 (2:13〜) HTB北海道ニュース - カラダを使って科学を学ぶ？驚きの最新技術も。リニューアルオープンするイチバン注目の施設に潜入取材。 https://youtu.be/vYoQyewx6bs 13
14. 体の検出 • 体の検出には主に2通りの手法 距離センサ 3次元情報から骨格を推定 Kinect (2010) カメラ 映像から骨格を推定 OpenPose (2017), MediaPipe (2019) 距離センサ Pose landmark detection guide | Google AI Edge | Google for Developers https://developers.google.com/edge/mediapipe/solutions/vision/pose_landmarker 14
15. MediaPipe • Googleが提供するオープンソースツール • Python、JavaScriptなどいろいろな言語でライブラリがある Home - mediapipe https://google.github.io/mediapipe/ 15
16. MediaPipe Handsの作品例 某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える（気がするかもしれない）Webアプリ V3 の試作（？） https://youtu.be/wyOzbHk_tVE 16
17. MediaPipe Poseの作品例 上半身で演奏 | ProtoPedia https://protopedia.net/prototype/2840 17
18. 演習
19. おすすめ情報 @shiropen2 @FabSceneJp @make_jp 19
20. メディアテクノロジーシリーズ • コロナ社の書籍シリーズ 20
21. バーチャルリアリティ学ライブラリ • コロナ社の書籍シリーズ 21
22. おわりに • ヒューマンコンピュータインタラクションは人間とコンピュータの関係性 についての研究分野 • 新しいユーザインタフェースを考えることは、未来をデザインすること • 普段の生活の中でHCIに関わることを見つけてみましょう 22