制作物について
先日作成した物体検出カメラ(https://qiita.com/shima20913/items/68da0adc80470394d141) に、最新の検知情報を定期的に更新し表示するwebアプリケーションを実装しました。
Githubレポジトリは以下となっています。
https://github.com/shima20913/camera_web
背景
前回のバックエンド開発においては、人間を検知した際にDiscordへ画像を送信する機能のみ実装しました。その為、既存のアプリケーションに頼らないオリジナルのwebアプリを作成したいと思い、作成しました。
開発について
技術選定
フレームワークはReactを使用し、デプロイはさくらのvpsに行いました。UIライブラリはChakraUIを使用しています。Reactの選定理由は、高速なレンダリング処理を実現したかったのと、Javascriptを用いた簡単なToDoリストの開発経験があったため、個人的に取り組みやすいと考えたためです。
つまずいたところ
1.サーバーサイドの書き換え
Reactでフロントエンドを開発するにあたって、必然的にGoで書かれたサーバーサイドの変更も必要でした。その中でも特に、検知時間取得方法の変更に関して、特に難易度が高いと感じました。
変更前のコードでは、画像データがサーバ側に蓄積される関係でフロントエンド側に送信されておらず、うまく表示されませんでした。
解決策
専用のファイルサーバーを作成し、そこから画像ファイルをHTTPリクエストで送信できるようにしました。
2.webアプリの再レンダリング処理
監視カメラというアプリケーションの特性上、常に情報が最新のものに更新される必要があります。ですが、毎回更新ボタンを押して再レンダリングするのは非効率なので、最新の検知情報を受信するたびに、自動的に再レンダリングが行われるよう修正しました。ですが、この処理に関して具体的な実装方法が分からず、作業が止まってしまいました。
解決策
以下の記事を参考にし、1秒ごとに自動で再レンダリングを行う処理を実装しました。こうすることによって、新しい情報が来ている際にもリアルタイムで情報を取得することに成功しました。
追記: pwaに対応しました
以下のようにPWAを利用し、スマートフォン上で検知情報サイトをネイティブアプリのように利用できる機能を実装しました。
まとめ
フレームワークを用いたフロントエンドの開発は初めてでしたが、UIの実装などを、ライブラリを用いることで簡単に実現できた点が非常にやりやすかったと思います。
今後の課題としては、Reactの利点であるコンポーネントを有効に活用できていなかった為、そちらをもう少し勉強していきたいです。