RUNTEQ / 受講生
ポートフォリオ「ミニマップ」作成
【名前】 minimap 【github】 https://github.com/rahhi555/minimap 【機能】 作業リストと平面図を組み合わせ、場所ごとの作業進捗状況を確認できるようにするアプリです 【作成した経緯】 作業員として現場に駆り出されることがよくありましたが、情報を共有する手段がトランシーバーや携帯電話しかないため、どの場所がどの程度の進捗具合なのかを掌握するのが大変でした。これを改善するため平面図と作業リストを紐付け、視覚的に情報を共有出来ないかと考えました。 【苦労した点】 ・リアルタイムに進捗状況を共有するためActionCableによるweb socket通信を行っているのですが、ActionCableに関する情報が僅かだったため実装に苦労しました。特にnuxtjsで使用している記事は無かったため、ドキュメントやソースコードを読んで我流で実装しなければなりませんでした。 ・SVGのズームイン・アウトやスクロール処理などviewboxを扱う操作に慣れるのに時間がかかりました。また、これらの処理をした後に図形の大きさや位置を変えようとすると実際の図形の位置と見えている図形の位置が異なりバグってしまいます。これを回避するため逆補正をかけなければなりませんが、正解の計算式にたどり着くまで何度も試行錯誤したのが大変でした。 【使用技術】 Nuxtjs(2.15.8) TypeScript(4.2.4) Rails(6.0.4.1) Ruby(3.0.2) MySQL(8.0.23) Redis(6.0.5) firebase Authentication docker-compose AWS ECS(Fargate) terraform Github Actions 等...