遠隔臨場モード機能とグループコーディングによる開発の進め方の紹介

こんにちは。フロントエンドエンジニアの江守です。映像閲覧WebアプリであるSafie Viewer（以下Viewer）の開発をしています。本記事では2023年6月に「Safie Pocketシリーズ」で利用可能となった遠隔臨場モードについて紹介したいと思います。

遠隔臨場モード機能とは

遠隔臨場モード機能とは、「遠隔臨場」での実施記録撮影時に、監督員などのワイプ映像をキャプチャ内に含めた保存ができる機能となります。

具体的には、下記手順にて有効となり、スクリーンショットで撮影いただくことで実施記録として保存することができます。

「Safie Pocketシリーズ」を販売していく中で、いくつかの地方自治体では以下のような独自要件があり、導入が難しいケースがあることが判明しました。

「Safie Pocketシリーズ」を使いながら遠隔臨場を行う際は、現場サイドでは携帯しているデバイスの音声通話を使い、監督員サイドではViewerの音声通話を使うケースがほとんどかと思います。

要件1つ目については、監督員サイドで音声通話中にスクリーンショットを撮ることで問題はないのですが、要件2つ目については、監督員の映像を表示することが出来ていなかったため対応を行いました。

弊社フロントエンドエンジニアチームでは、要件やデザインが固まり実装フェーズに移行、または開発がある程度進んだ段階でグループコーディングを行っています。

グループコーディングとはVisual Studio Codeの拡張機能であるLive Share機能を使って、チーム全員でコードの共同編集を行うことです。

グループコーディングを導入した経緯としては下記があります。

各メンバーの習熟度向上
ViewerはフレームワークにAngularを利用しているのですが、長く利用し続けているメンバーもいれば、入社してから初めて利用するメンバーもおり、習熟度に差があります。
習熟度の高いメンバーからアドバイスを受けることで、習熟度の向上を図ることができます。
ソースコードの品質向上
常にレビューしながら開発を進めるため、実装方法の間違いや記載ミス、おかしな変数名があったらその場で修正することができ、ソースコードの品質を向上させることができます。

本開発でもグループコーディングを行い、ビューとロジックが一緒くたとなっている箇所があったので分割したり、不必要な記載を削除することで可読性、コードの品質を向上することができました。

また、Angular 15から安定版になったStandanlone Componentsという新しい機能を採用しました。

汎用モジュールが不要となるためコードの記載量を減らすことができ、スッキリと見通しの良いコードになりました。