社内用にバーチャルオフィス「vfloor」を開発しました！

ムーブの三苫です。
現在ムーブでは、リモートと出社による 2 種類の勤務形態があります。
オフィスに全員が集まることが難しい状況となった中、社員の手によって社内利用のためのバーチャルオフィス「vfloor」が開発されました。
vfloor は運用後も社員たちの意見を取り入れた機能追加や改修を経ながら、ムーブの業務に日々役立てられています。
今回は開発者である佐々木さんに、vfloor の機能や開発についてうかがいました。

＊＊＊＊＊＊＊＊＊＊

開発の背景

リモートワーク導入後も、全員が一堂に会していたときのような、すぐに声を掛けられる感覚を残したいと考えていました。全社で効率よく仕事を進めるためには、お互いの様子が分かりやすくスムーズに意思疎通ができる状態が必要です。
リモートワークを開始してからしばらくの間は、他社の提供するバーチャルオフィスをいくつか検討していましたが、ムーブの15人という少人数で使うには少々オーバースペックで、その分利用料も割高となってしまう状況でした。それならば自分たちにとって必要十分なサービスを作ってみよう、と開発に着手しました。

使用した技術

サーバーサイドはフレームワークに beego を使って Go で開発し、フロントエンドは TypeScript と Vue 3 で開発しました。Go や TypeScript は、近年システムの安定性が今まで以上に求められる傾向からか人気が伸びていますが、受託案件では経験がなく、いつか導入してみたいと考えている言語です。弊社では、フルスクラッチの開発案件の場合など、お客様から技術選定も含めてすべてお任せいただくこともあります。
Vue.js は、既存案件でバージョン 2 系を使ったことがありましたが、昨年リリースされた Vue 3 へのアップグレードを受け、同案件で活かせるよう予めバージョンによる差異を知っておきたく採用しました。サーバーサイドもフロントエンドも、今後の受託案件をイメージして技術選定しました。

そのほか、ブラウザ上でリアルタイム通信を行う Web RTC という技術に初めて触れました。Web RTC を用いてカメラや音声などのメディア通信を複数人で行えるようにするには、シグナリングサーバーや TURN サーバー、 STUN サーバーが必要です。ただし、それらのサーバーを使ったことがないため、まずは形にすることを優先し、手軽に導入できる SDK を使いました。SDK として選んだのはソースが公開されていて、ドキュメントが分かりやすい SkyWay です。特にソースが公開されていることは、それ自体が透明性のあるサービスということにもなるため、採用の大きなポイントでした。ドキュメントに書かれていない細かな仕様や SDK 内で行われている動きについて、ソースを追えば確認することができるのもありがたいです。何より、WebRTC の分野のプロが書いたコードを見るのは、とても勉強になりました。

機能と開発過程

認証
社員が新たにアカウント作成する手間を省くため、社内で使っている Google Workspace か Slack での認証を検討しました。Slack だとアイコンを設定している人が多く、そのままバーチャルオフィスでのアイコンとして使用できること、また開発用のテストアカウントが作りやすいことから、今回は Slack を用いました。

デバイス選択
運用当初、ブラウザがデフォルトで使用する入力デバイスや出力デバイスがユーザーの想定しないものになっており、人によっては音が聞こえないというトラブルがありました。暫定ですが、出力デバイスは Chrome、入力デバイスは Chrome と Firefox で選択できるようにして、トラブルを回避しました。

スピーカー
vfloor の特徴的な機能でもあるのが、2種類のスピーカーの設定機能です。
リアルなオフィスにいる感覚へ近づけるべく、ステレオに設定している場合はバーチャルオフィス上の位置関係と同じ方面から音声が聞こえるようにしました。
音声の聞こえ方は好みが社内で分かれたので、最終的にステレオとモノラルを切り替えられるようにしています。

マイク
自宅でも活用されることを想定したシステムで、音やカメラといったプライバシーと密接に関わる部分ですので、特に気を遣いました。
当たり前のことかもしれませんが、ユーザーがマイクオフの操作をしたら、必ずアプリケーションからブラウザにその指示を行わせるようにしました。ブラウザ上でマイクオンのサインが確実に消えるようにする、ということです。
以前に別のサービスで、マイクオフにしたはずなのにブラウザ上では切り替わっていない、という経験をしたことがあり、「オフにしたけど裏で音を使われているのでは」と心配になりました。実際に実装してみて知ったことですが、実はマイクオフ時もアプリケーションから参照したままにしておく方が実装がはるかに楽です。先のサービスも裏で音を使っていないだろうことは分かりましたが、自分の開発するサービスではユーザーが不安になる可能性を排除するよう留意しました。

なお、当初は拡声範囲を一律していましたが、範囲指定できる仕様に変更しました。vfloor 上で人の少ない場所に移動しなくても、他の人の邪魔にならないように会話することができます。

バーチャルオフィスのデザインや UI
運用を始めたときの vfloor は、空間だけが存在している状態で、オフィス感は皆無でした。

変更を加えていく過程で、弊社でデザイン経験のある筈井さんにサービスのロゴやオフィス内のデザインをお願いしました。実際のオフィスでの座席と同じレイアウトのデスクを配置し、開発チーム毎に色分けして分かりやすくしてもらいました。
画面の縮尺について、元々プルダウンで選択して画面縮尺するようにしていましたが、エンジニアの宮本さんがコードを書いてくれて、スライダー UI  でより自由に変更できるようになっています。
ちなみに、画像右側の太陽のエリアにアイコンを移動させると、任意の URL にアクセスできるようになっており、現在は毎日朝礼で使用している zoom が新しいタブで起動するように設定しています。
メニューバーのコーヒーカップのアイコンは、押すと離席中のステータスとなり、その状況が他の人にも分かるようになっています。

移動
バーチャルオフィス内を移動する場合、アイコンのドラッグアンドドロップもしくは移動先のトリプルクリックで行えます。シングルクリックだと誤クリックしかねないのと、ダブルクリックは他の機能のために残しておきたかったため、トリプルクリックによる移動となりました。

会議室
社内のリモートコミュニケーションは vfloor に集約したかったので、参加者のカメラや画面共有機能がある会議室を作りました。
今は2部屋用意していますが、ゆくゆくはユーザーがある程度自由に会議室を設置できるようすることも検討しています。
会議室では、会話をする際に全員の顔が見やすいようタイル表示、画面共有時はその画面のピックアップ表示、といったように 2つのレイアウトパターンを切り替えられるようにしました。他の人の入室は通知音で知らせる設定にしておけば、確認ができます。
また、ちょっとしたやり取りや URL の共有をしたいときに Slack に移動するのが手間なので、テキストチャット機能も設けました。チャットの音声通知やデスクトップ通知も可能です。

＊＊＊＊＊＊＊＊＊＊

記載した内容以外にも、vfloor を作り変えていく過程でなくなってしまった機能や、他のものに代替された機能なども複数あり、私自身が想定していた以上に多くの試行錯誤や配慮がありました。
自分たちで使うサービスを自分たちの使いやすいように開発できるのは、エンジニア中心のモノづくりの会社ならではだと感じます。vfloor 以外にも、業務効率化のための社内開発がこれまで複数行われています。

vfloor 開発の記事を通して、ムーブをより知っていただけたら嬉しいです。