Fujimura Seminar

🎓 模擬授業「AIによるプログラミングを体験しよう」

日時：2025年8月2日　場所：情報デザイン専攻　模擬授業・個別相談室

🌟 作品紹介：「サインはV」

今回のオープンキャンパスでは、わずか2時間という短時間でAIと協力して開発したインタラクティブメディア作品「サインはV」を展示します。この作品は、カメラに向かってVictoryサイン（ピースサイン）をするだけで、魔法のような視覚体験を楽しめるWebアプリケーションです。

✨ 「サインはV」を体験する

体験の流れ：
1. カメラに向かってVictoryサインを表示
2. 人差し指の先からキラキラ✨の星型パーティクルが爆発
3. あなたのシルエットが美しい色のパーティクルとなって重力に従って舞い散る
4. 魔法的な音響効果とともに9秒間の美しいアニメーション

🤖 AIプログラミングの実演

この作品は、ChatGPTなどのAIツールを活用したプログラミングの可能性を実証するために開発されました。プロンプト（指示文）を工夫することで、複雑な技術的要求も自然言語で表現し、短時間で高品質なアプリケーションを構築できることを示しています。

📝 開発で使用したプロンプトの例

Google mediapipeのHand Gesture Classiferの機能を利用してVictoryのジェスチャを取得したときに、Image Segmentationのライブラリを使用して人間のシルエットを取得して0.2秒間隔で10回様々な色のシルエットを重ねて表示するインタラクティブメディアを作成してください。

Victoryジェスチャを観測した瞬間、その手の位置に明るく光るキラキラ爆発エフェクトを追加したい。高校生に受けそうな華やかなエフェクトにしてください。

このような自然言語での指示から、AIが技術的な実装を提案し、エラーの修正や機能の改善を繰り返しながら、最終的に高品質な作品が完成しました。

⚡ 技術スタック

「サインはV」は最新のWeb技術を組み合わせて構築されています：

MediaPipe HandsMediaPipe Selfie SegmentationThree.jsWebGLWeb Audio APIGLSL Shaders

MediaPipe Hands - Googleが開発した機械学習ライブラリでVictoryジェスチャーを検出
MediaPipe Selfie Segmentation - 人物のシルエットをリアルタイムで抽出
Three.js - WebGLベースの3Dレンダリングでパーティクルシステムを実装
Web Audio API - ブラウザ上でリアルタイム音響効果を生成

🚀 開発プロセス

段階的な機能実装（総プロンプト数：39個）

Phase 1: 基本機能実装

Victoryジェスチャー検出機能
人物シルエット抽出
基本的な表示システム

Phase 2: 音響・タイミング調整

「カシャ」音（シャッター音）の追加
「ピ」音（ビープ音）の追加
0.2秒間隔での10回シルエット取得に調整

Phase 3: パーティクルシステム

Three.jsによるGPU加速パーティクルシステム
重力・風などの物理効果実装
レスポンシブ対応とUI/UX改善

Phase 4: キラキラエフェクト追加

人差し指先端での星型パーティクル爆発
ゴールド・シルバー・レインボーカラー
「キラーン♪」音響効果

🎯 教育的意義

この作品開発を通して、以下の重要なポイントを学ぶことができます：

AIとの協働開発 - 人間の創造性とAIの技術力を組み合わせた効率的な開発手法
プロンプトエンジニアリング - 適切な指示文の書き方で開発速度が大きく変わる
反復的改善 - 小さな修正を積み重ねて高品質な作品を作り上げるプロセス
最新技術の活用 - 機械学習、WebGL、リアルタイム処理などの先端技術
ユーザー体験設計 - 直感的で楽しいインタラクションの設計

💫 オープンキャンパスでの体験

8月2日の模擬授業「AIによるプログラミングを体験しよう」では、実際にChatGPTを使ったプログラミング体験をしていただきます。「サインはV」の展示を通して、AIプログラミングの可能性と楽しさを実感してください。

体験できること：
🔹 実際のAIプログラミング体験
🔹 「サインはV」のデモンストレーション
🔹 開発プロセスの詳細解説
🔹 情報デザイン専攻での学習内容紹介
🔹 個別相談・質問対応

皆様のご参加をお待ちしております！AIと一緒に創作する新しい時代のプログラミングを体験してみませんか？

8月2日オープンキャンパス｜AIプログラミング体験授業で「サインはV」を展示