PORTFOLIO / WEB APPLICATION
ANSHIN ROOM
在宅支援のためのリアルタイムコミュニケーションWebアプリ
利用者と支援員が、そのときの目的や心理状態に合わせて安心してオンラインでつながるためのWebアプリケーションです。WebRTCによるビデオ通話、画面共有、ロール別UI、リアルタイム状態同期などを組み合わせて開発しています。
制作概要
開発内容
企画、UI/UX設計、フロントエンド実装、Firebase設計、リアルタイム通信、WebRTC通話、画面共有、レスポンシブ対応まで担当しました。
主な技術
Next.js / React / TypeScript / Firebase Authentication / Cloud Firestore / Firebase Storage / WebRTC を中心に構成しています。
サービスについて
つながるーむは、在宅支援の現場で利用者と支援員がオンラインでも安心してコミュニケーションできることを目的に開発しているWebアプリです。一般的なビデオ会議サービスのようにひとつの通話画面だけを提供するのではなく、面談・対話・安心・画面共有・ライブ・作業など、目的に応じてコミュニケーション方法を切り替えられる設計にしています。
主な機能
面談
支援員を大きく表示し、オンライン面談に集中しやすい画面構成。
対話
利用者と支援員をほぼ同じ大きさで表示し、双方の状態を確認しながら会話できるモード。
安心
情報量を抑え、落ち着いてコミュニケーションできる画面構成。
画面共有
資料やPC画面を共有しながら、説明やサポートを行える機能。
ライブ
用途に合わせてリアルタイム映像を利用できるモード。
作業
オンラインで一緒に作業する場として利用できるモード。
スクリーンショット
入室前の確認やメッセージを表示し、安心してルームへ進むための画面。
ビデオ通話、AI補助、チャット、確認メモを同じルーム内で扱うメイン画面。
支援員の映像を大きく表示し、オンライン面談に集中しやすい画面。
利用者と支援員を並べて表示し、互いの状態を見ながら会話できる画面。
話を聞くことに集中できるよう、表示情報を落ち着かせた画面。
資料やPC画面を共有しながら、説明やサポートを行う画面。
用途に合わせてリアルタイム映像を活用できる画面。
オンラインで一緒に作業する場として利用できる画面。
面談や作業後に内容を振り返り、次の行動につなげるための画面。
スマートフォンでも入室や通話内容を確認しやすいように調整した画面。
制作でこだわったポイント
利用者と支援員で分かりやすい画面設計
利用者は緑系、支援員は青系のUIにすることで、画面上で役割を直感的に認識できるようにしています。
状況に応じて選べる方法
すべての場面で同じ通話UIを使うのではなく、面談・対話・安心・作業など目的に合わせて画面構成を切り替えられます。
心理的負担を減らす情報設計
安心モードや作業モードでは、不要な状態表示や情報を減らし、画面から受ける負担を抑えることを意識しています。
画面共有後も自然に通話へ戻れる設計
画面共有終了後にカメラ映像へ自然に復帰できるよう、映像ストリームの切り替え処理を実装しています。
技術面での工夫
WebRTCによるリアルタイム通信
ブラウザ間の映像・音声通信にはWebRTCを使用。Firebase / Firestoreをシグナリングに利用し、offer / answer / ICE Candidateをリアルタイムに交換する構成にしています。
Firebaseを利用したユーザー・状態管理
Firebase Authenticationによる認証と、Cloud Firestoreによる通話状態・参加状態の同期を組み合わせています。
画面共有とMediaStream制御
Screen Capture APIとMediaStreamを利用し、カメラ映像と画面共有を切り替えられるようにしています。
複数モードを持つUI状態管理
ひとつの通話画面内で複数モードを扱うため、映像配置・状態パネル・表示要素をモードに応じて切り替えています。
使用技術
この制作で担当した領域
- サービス企画
- UI / UX設計
- フロントエンド実装
- Firebase Authentication
- Firestore設計
- WebRTC通信
- リアルタイム状態同期
- 画面共有
- レスポンシブ対応
- デバッグ / 改善
開発上の課題と解決
UI変更による通話処理への影響
リアルタイム通信とUI状態が密接に関係するため、表示変更が通話不具合につながる可能性がありました。
WebRTC処理とUI変更を切り分け
既存通信処理を維持しながら、表示ロジックと状態管理を必要な範囲で調整しました。
利用者と支援員で必要なUIが違う
同じ通話画面でも、役割によって必要な情報や見え方が異なります。
UID・roleを基準にしたロール別UI
端末種類ではなく、Firebase AuthenticationのUID・role・参加者情報を基準にUIを構築しました。
画面共有終了時の映像復帰
共有終了後、通話画面が共有映像のまま残る問題を防ぐ必要がありました。
MediaStreamTrackの復帰処理
画面共有trackからカメラtrackへ戻し、ローカル映像もカメラstreamへ復帰させる処理を実装しています。