システム構成

vibeSwing は 「iPhone」「Mac」「大画面」の 3 つだけで動きます。 クラウドもインターネットも使わない、とてもシンプルな構成です。

全体像

3 つの登場人物

役割	機器	やっていること
🏓 ラケット	iPhone（プレイヤーの手元）	内蔵の モーションセンサー でスイングを検知し、「振った！」を送信。ヒット時は振動でお知らせ
📮 中継役	Mac（会場に 1 台）	プレイヤーとゲーム画面の間でメッセージを転送する「郵便屋さん」。接続用の QR コードもここが発行
👾 ゲーム画面	ブラウザ → プロジェクタ	ボス・ボール・エフェクトを 3D 描画。判定・スコア・効果音・観客演出もすべてここ

メッセージの流れ

スイングしてから画面が反応するまで、メッセージはこう流れます。 かかる時間は 0.01〜0.05 秒程度。体感でズレを感じないスピードです。

通信の正体

この矢印の正体は WebSocket という「電話をつなぎっぱなしにする」タイプの通信技術です。 1 回 1 回接続し直す方式（Web ページの表示など）と違い、思い立った瞬間にメッセージを送れるため、 アクションゲームに向いています。

ネットワーク: 「持ち運べる専用回線」

イベント会場の Wi-Fi は混雑していたり、セキュリティ設定で端末同士の通信が遮断されていたりと、 デモの大敵です。vibeSwing は iPhone のテザリング（インターネット共有）に Mac を接続するだけの 自給自足ネットワークにすることで、この問題を回避しています。

さらに、3D ライブラリや QR コード生成などの部品もすべてリポジトリ内に同梱（ベンダリング） しているため、一度サーバーを起動すればネット接続ゼロで動作します。

技術スタック

領域	技術	選んだ理由
iPhone アプリ	Swift / SwiftUI + CoreMotion	100Hz でセンサーを読み取り、振り始め〜振り抜きを検知。縦振り / 横振りの区別も可能
中継サーバー	Node.js + ws（WebSocket）	依存パッケージ 1 個だけの超軽量構成。会場 PC でもすぐ動く
ゲーム画面	Three.js（WebGL）+ Web Audio	ブラウザだけでリッチな 3D 表現と効果音を実現。インストール不要
アート	AI 生成アセット	ロゴ・ボス・キャラ・観客・エフェクトまで統一感のあるネオンポップな世界観

信頼性への工夫

デモは一発勝負。「止まらない」ための仕組みを最初から組み込んでいます。

• 自動再接続 — 通信が切れても iPhone アプリが 0.5〜5 秒間隔で自動復帰
• キーボード疑似入力 — iPhone が万一つながらなくても、Mac のキーボードでゲーム進行を再現可能
• 性能の自動調整 — 描画負荷を監視し、重くなったらエフェクトを間引いて 60fps を維持
• オフライン完結 — 上述のとおり、会場ネットワークに依存しない