できること
近接ボイスチャット
距離によって音量が変わる自然な会話。近くに集まれば声が届き、離れると小さく。雑談やグループ作業がしやすくなります。
ワンクリック画面共有
ブラウザ標準の getDisplayMedia を使用。授業・発表・レビューに最適。埋め込み時は allow="display-capture" を付ければOK。
モバイル向けジョイスティック
スマホ/タブレットでも直感操作。PC はキーボード・マウス・ゲームパッドにも対応。
導入メリット
参加ハードルが低い
URLをクリックするだけ。インストールやアカウント作成は不要。
“場”の一体感
歩いて出会い、立ち話が生まれる体験でオンラインの気まずさを軽減。
アイデア創発・活動促進
コミュニケーション → 画面共有 → 意見収集 → 試行が素早い。共同作業・企画立案・成果発表に役立ちます。
授業からイベントまで幅広く
授業、ゼミ、学校説明会、研究発表、交流会などにフィット。
運用がラク
A-Frame + WebRTC + Socket.IO のオープン技術でシンプル構成。サーバー管理も見通し良し。
ネットワークに強い
TURN中継（
?relay=1）で厳しい校内ネットワークでも接続成功率UP。
イメージ
使い方（参加者向け）
- リンクをクリックしてページを開く（Chrome / Edge / Firefox 推奨）。
- 右上の「Mic ON」を押してマイクを許可。近くの人と話せます。
- 画面右「Share」から画面共有。発表やデモに便利。
- スマホは左右の丸いスティックで移動・視点操作。PCはキーボード/マウスでもOK。
- キーボード：Shift＝ダッシュ、Space/Z/X＝ジャンプ、K＝現在地保存、G＝復帰。
よくある質問
声が聞こえない／マイクがONにならない
ブラウザのアドレスバーの「🔒」からサイト権限で「マイク：許可」。再読み込み後にお試しください。
ブラウザのアドレスバーの「🔒」からサイト権限で「マイク：許可」。再読み込み後にお試しください。
画面共有が「Permission denied」になる
他アプリで共有中／OSの権限が未許可の可能性。共有中なら停止し、再度「Share」を押してください。
他アプリで共有中／OSの権限が未許可の可能性。共有中なら停止し、再度「Share」を押してください。
アバターが見えない・透明になる
glb 配置パスや CORS/MIME 設定をご確認ください。失敗時は一時的にカプセル表示にフォールバックする実装も推奨です。
glb 配置パスや CORS/MIME 設定をご確認ください。失敗時は一時的にカプセル表示にフォールバックする実装も推奨です。
学校ネットワークで繋がりにくい
URLに
URLに
?relay=1 を付けて TURN 中継を強制できます（例：/jst.html?relay=1）。
技術スタック
A-Frame / three.js、WebRTC（近接ボイス・画面共有）、Socket.IO（シグナリング）、 glTF（校舎モデル）。Service Worker なしの軽量構成。セルフホストや学校サーバーへの設置も容易です。
まずは体験してみよう
オンラインでも“歩いて・話して・見せられる”——その一歩目から、アイデアと活動が動き出します。