ShareBrowse

概要

リモートワークで雑談のきっかけをうむブラウザ拡張です。同じWebページを見ているチームメンバーのマウスカーソルがリアルタイムに表示され、「今何見てるの？」から自然な会話が生まれます。

開発経緯

もともとはHack U 山口大学 2020で開発した作品です。「Webサイトをリアルタイムで何人が見ているか知りたい」「Webサイト上で感想をシェアしたい」という2つの課題に着目し、同じページを見ている人同士がつながれるブラウザ拡張としてチームで制作しました。Hack Uではヤフー賞を受賞しましたが、当時はまだプロトタイプの段階でした。

コロナ禍でリモートワークが当たり前になって2年半。コミュニケーション不足や孤独感など、リモートワークにはさまざまな課題が残っていて、自分たちもその孤独感を日々感じていました。リモートワーク廃止に舵を切る会社も増えてきた時期です。

この課題をどうすれば解決できるか。日頃パソコンを触っていて最も多くの時間操作しているオブジェクトはマウスカーソルです。これをリアルタイムで共有すれば、圧倒的にインタラクティブな体験が生まれるのではないか。今までマウスカーソルはデジタル上の操作オブジェクトでしたが、コミュニケーションや自己表現に使えないか？そんな思いでコンセプトを発展させ、チームで制作し直しました。

メンバー間で雑談する機会が生まれ、最高のコラボレーションが実現し、チームの一体感が増して仕事が楽しくなる。そんな世界を目指し開発していました。

特徴

• リアルタイムカーソル共有 — 同じWebページを開いているチームメンバーのマウスカーソルがリアルタイムで表示されます
• 雑談のきっかけ — 「同じページを見ている」ことが可視化されることで、自然なコミュニケーションが生まれます
• ブラウザ拡張として動作 — Chrome拡張としてインストールするだけで、普段の業務フローを変えずに使えます

技術スタック

• ブラウザ拡張 — Plasmoを使ったChrome Extension（Manifest V3）。Content ScriptでReact + Tailwind CSSのUIをWebページに注入し、マウスカーソルの座標を取得します
• バックエンド — Nest.jsでWebSocketサーバーを構築。同じURLを閲覧中のユーザー間でカーソル座標をリアルタイムにブロードキャストします。DockerコンテナとしてGCP（Cloud Run）にデプロイ
• データ — ユーザー情報やルームの管理にはPlanetScale（MySQL）、認証にはFirebase Authを採用しました

細かい仕様はProtoPediaを参照してください。

受賞

• ヤフー賞 — Hack U 山口大学 2020

• 最優秀賞 / 一般部門優秀賞 — ビジネスプランコンテスト 2020

• 仕事が楽しくなるで賞（ワークスモバイルジャパン株式会社） — ヒーローズ・リーグ 2022