推しアイデア
カメラに映る現実空間に、時間割・課題・空き教室がホログラムのように浮かぶ。マウスもタッチも使わず、指先の動きだけで操作する次世代キャンパスOS。KLMSを飛び出し、教室の前でかざせば空席が光り、課題をつまめば完了する.操作するから触れるへ、大学生活のインターフェースを変える。
カメラと指の動きで操作するホログラム近未来型KLMS
指の動きでKLMSダッシュボードを操作できます。
作った背景
毎日無機質なKLMS画面と向き合ってきた中で、「時間割を確認する」「空き教室を探す」といった行為が、もっと直感的であっていいはずだと感じたのがきっかけです。ハンドジェスチャーとAR的な空間表示という近未来のインターフェースを、SFの中だけでなく実際に体験したいと思いました。
推し技術
使っている技術は、手の動きをリアルタイムで認識するMediaPipe、カメラ映像に3D空間を重ねて表示するThree.js、そして指の動きを画面の状態に反映させるZustandです。この3つを組み合わせることで、指先だけで操作できる近未来的な画面を実現しています。
プロジェクト詳細
AirKLMSは、慶應のKLMS（Canvasベースの大学ポータル）を、Webカメラ映像とジェスチャー操作で扱える近未来型インターフェースに作り替えたプロジェクトです。
仕組み Webカメラの映像をそのまま背景に映し、その上にThree.js（React Three Fiber）で3D空間のHUDを重ねて表示します。MediaPipeの手検出モデルがカメラ映像から指の位置をリアルタイムに読み取り、人差し指の動きをカーソルに、親指とのピンチをクリック操作に、左右のスワイプをページ切り替えに変換します。マウスやタッチには一切触れず、指の動きだけで完結する操作体系です。
画面の中身 ダッシュボード（未提出課題数や出席率などの統計）、時間割（曜日×時限のグリッド）、課題管理（つまむとステータスが進行する）、空き教室（つまむと空室⇔使用中を切り替え）の4パネルを、ガラスモーフィズム調のHUDデザインで表示しています。現状はKLMSの実データではなくモックデータで動作を再現しています。
技術構成 ・React + TypeScript + Vite ・Three.js / @react-three/fiber / @react-three/drei（3D空間・パネル描画） ・MediaPipe Tasks Vision Hand Landmarker（手指トラッキング） ・Zustand（手の状態や選択状態などの高頻度な状態管理） ・Render（静的サイトとしてホスティング、HTTPS必須のカメラAPIに対応）
