SYSTEM DEVELOPMENT / CASE STUDY
ブラウザで入れるバーチャルオフィス
見下ろし型の地図をアバターで歩き、近づいた人と自動で通話がつながるバーチャルオフィスを開発しました。会議室・画面共有・チャット・模様替えまで、ブラウザだけで使えます。
中小企業向けのバーチャルオフィス2026年7月〜 開発・運用中（2026年9月 本番公開）
- 本番公開から
- 17回のリリース
- 同期の負荷試験
- 150体で切断0
- 自動テスト
- 1,600件超
CHALLENGE
解決したかったこと
リモートで働くチームでも、同じオフィスにいるように気軽に声をかけられる場を、ブラウザだけで用意したいというご相談でした。
SOLUTION
やったこと
地図上で近づくだけで音声・映像の会話が始まる仕組みを中心に、会議室、画面共有、チャット、ホワイトボードまでを一つのブラウザ画面にまとめました。
アバターの着せ替えや地図の模様替え（家具・床・壁、画像や動画の埋め込み）など、オフィスに「居る」感覚を支える機能を、利用者の声を聞きながら短い周期で追加しています。本番公開からの1か月で17回リリースしました。
管理者アカウントでスペースを作り、スペースIDとパスワード（または招待URL）で入室する形にして、外部の人が勝手に入れない運用にしています。
SCREENS
実際の画面
画面は開発用の環境で、架空のスペースと参加者を使って撮影したものです。
FEATURES
主な機能
- 近づくと自動でつながる近接会話と、ゾーンの中の人だけで話せる会話ゾーン
- 会議室の入退室・ノック・施錠と、話者の拡大・ギャラリー表示ができる会議ビュー
- 音声付きの画面共有
- 全体・近くの人・チャンネル・DMのチャット（メンション、書式、画像添付、未読表示）
- アバターの着せ替えと完成コーデ8種、リアクション、挙手、離席、全体へのアナウンス
- 家具・床・壁の模様替え、看板、ホワイトボード、置き手紙。地図のひな形は5種類
- 管理者・メンバー・カスタムロールの権限、操作ログ、招待URL、ご意見箱
- スマホ対応（専用のホーム画面、画面上のジョイスティックで移動）
ENGINEERING
作りのこだわり
- 位置の同期はサーバー側で決める方式にし、利用者の端末からは移動の向きだけを送ります。不正な移動やズレを防げます。
- 近くにいる人の判定は空間を区切って計算し、人数が増えても処理が急に重くならない作りにしています。
- ボット150体を同時に動かした同期の負荷試験で、切断なく動くことを確かめています。
- アプリと通話（メディア）のサーバーを2台に分け、通話の負荷がアプリ本体に影響しない構成にしています。
使用技術・基盤
- TypeScript
- React 19
- Canvas 2D
- Colyseus
- LiveKit
- Excalidraw
- SQLite
- Playwright
- Vitest
