こんにちは、YOUTRUSTでサーバサイドエンジニアをしているkehraです。
フルリモートワークになってから、通勤時間を楽しむ時間に変えるべく、新しい趣味を開拓中です。 1つ始めているのですが、三日坊主になると目も当てられないのであまり公にはしていないです 😅
今回は、Web（PC）版を2月に、アプリ版を5月にリリースしたばかりの新機能であるルーム（音声通話）について、舞台裏をご紹介できればと思います！
ルームとは？
ルームとは、YOUTRUST上でつながりがあるユーザ同士が、最大4人まで参加できる音声通話機能です。
YOUTRUSTでは、「つながりがある」「最大4人まで」というところをポイントにしました！
BGMが流れているという点も好評で、特に焚き火音が人気なようです 🔥
どういった流れで開発したのか？
音声通話を実装しようというところから、PM/Designer/Engineerがミニマムな体制で密にコミュニケーションを取りながら進めました。
1〜2月上旬にかけて、PM/Designer主体でコンセプトを作り、ユーザーインタビューを繰り返しながらUXの磨き込みを行いました。その間、Engineerは音声通話の実装方針とプロトタイプを作っていきました。
PMがBGMにかなりこだわっていて、リリースギリギリまでBGMの選定に時間を費やしていたのが印象的でした 😄
どのようなBGMになっているかは、ぜひルームをご利用いただき、聴いてみてください！
ゼロからリリースまで2ヶ月でいけたというのは、あえてミニマムな体制にすることで、意思決定が高速に行えたというのが大きなポイントでした。
YOUTRUSTでは、今回のように、状況に応じてチームの形を変えられる柔軟性をもった組織運営がされています。
改善をすばやく行う
ルームは、最小限の機能でリリースしたため、リリース直後からTODOにあった改善やユーザーのみなさま、社内のメンバーからの声をキャッチし、すばやく改善を行いました。
何をどのような順番で改善していくか、フィードバックの内容をどう盛り込むのかをすぐに判断し行動できるのも、ミニマムな体制ならではだと思います。
技術的にはどうなっているのか？
音声通話の機能自体はAgoraを使って実現しています。
JavaScriptやFlutterなど、様々なプログラミング言語に向けたSDKが提供されており、ドキュメントやサンプルも揃っているので、音声通話を導入すること自体は簡単にできます。
ルームの情報はYOUTRUST上のDBで管理しており、下図のようにYOUTRUSTサーバに問い合わせた後、Agoraに接続するような仕組みになっています。
前述しましたが、「つながりがある」「最大4人まで」というところがポイントなので、この要件をAgora側に任せることはできません。
そのため、必ずYOUTRUSTサーバを介して接続情報を受け取るようにしました。
工夫ポイント1
Agoraには、イベントをPubSubしてくれる仕組みがあります。
例えば新しいユーザーがAgoraのチャンネルに参加したときuser-joinedというイベントがpublishされます。
user-joinedイベントをsubscribeしておけば、参加したユーザー情報を表示するといった処理を簡単に追加することができます。
しかし、YOUTRUSTでは、この仕組みをほとんど利用していません。
※Agoraの仕組み上、参加したユーザーのaudio streamを再生・停止する必要があるので、音声通話に必要な処理だけは利用しています。
YOUTRUSTでは、RailsのAction Cableを利用しており、ルームでもこちらを実装することにしました。
Agoraのイベントと別のイベント処理の2重構成にするよりは、以下の理由により、Action Cable1本にしてしまった方が楽だと考えたためです。
- ルームはDBで管理されているので、基本的にはイベントごとにAPI通信が発生している
- YOUTRUST独自のイベントを起こしたい
「YOUTRUST独自のイベント」の1例をあげると、Webブラウザでルームに接続しているときに、移動などの理由でスマホアプリに切り替えたい場合、YOUTRUSTではスマホアプリから参加すると自動的に接続が切り替わるようになっています。
このとき、Webブラウザには「別のクライアントで接続されたから切断した」というイベントが送信され、Webブラウザの音声通話が終了します。
このように、YOUTRUST独自のイベントを活用することで、より柔軟に接続をコントロールできるようになっています。
工夫ポイント2
Agoraの音声通話の料金体系は、「接続時間 × 接続人数 × 基本料金」です。
※詳しくはAgoraのドキュメントを参照してください。
YOUTRUSTのルームは、一人で参加したときでも退屈しないようにBGMが流れる仕組みになっており、一人での接続時間が長くなることが想定できました。
そのため、2人以上がルームに参加した場合にのみ、Agoraに接続するような工夫をしています。
はまりポイント
Agoraのチャンネルに接続する際に、UIDを指定できるようになっています。
JavaScriptのSDKではUID(number | string)となっているのですが、FlutterのSDKではintとなっています。
Web先行で実装を進めていてstringで実装をしていたのですが、ある日アプリエンジニアから「UIDってintじゃないの？」という問い合わせを受け、その時点で知ることに･･･。
Web SDKのドキュメントには、以下のような注意事項が記載されてはいますが、はまってしまいました😢
To ensure better end-user experience, Agora highly suggests not using a string as the user ID.
Web SDKのドキュメント docs.agora.io
Flutter SDKのドキュメント docs.agora.io
最後に
ルームのコンセプトから実装まで、浅く広く説明してきましたが、いかがでしょうか？
まだリリースしたばかりの機能ですので、みなさまにご利用いただき、フィードバックいただければ嬉しいです 🙏
Webエンジニアも大募集しているので、こちらもチェックをお願いします！
