はじめに
みなさんリングフィットアドベンチャーはやっておられますか？
コロナ禍の影響であまり外出ができず、特にリモートワークの場合運動不足に陥りがちです。
そんな中、自室で楽しく運動することができるリングフィットフィットアドベンチャーはとても重宝しています。💪
このような状況も相まって現在も品薄状態が続いているようですね。
さて、そんなリングフィットアドベンチャーですが、プレイしていた以下のようなことを感じました。
- 日々の運動記録は見れるが、そのためにゲームを起動するのがめんどくさい
- switch本体の時間操作をしていると正しく記録されない（これは人によりますが...）
- 運動記録をグラフにして見たい！
というわけで、よくあるフィットネスアプリのように運動記録を入力してグラフで見れるようにしました。
製作期間は2ヶ月くらいです。
機能
記録入力画面
下記画像の、リングフィットアドベンチャーの運動終了後に表示される本日の運動結果の項目を入力できるようにしています。
カレンダー
カレンダー表示で月の運動記録を視覚的に表示します。どの日にサボっちゃったかわかっちゃいますね...
グラフ
グラフで日々の運動量の変化を見ることができます。
グラフの作成にはvue-chartjsを使用しています。
使用技術
フロントエンド
Nuxt.js + TypeScript + Vuetify
使い慣れていたVue.jsのフレームワークのNuxt.jsをSSRモードで使用しています。
UIフレームワークも使ったことがあったVuetifyにしました。
Nuxt.js(Vue.js)をTypeScriptで書いたことはありませんでしたが、一度開発時の快適さを味わってしまうともうJavaScriptを使うことは考えられないほどでした。
また、Nuxt.jsのPWAモジュールを使用すれば簡単にPWA化できるので取り入れています。
バックエンド
Express + TypeScript
バックエンドはNuxt.jsのserverMiddleWareとして実装し、BFFのように扱っています。
Nuxt.jsの他に外部サーバーを必要としないのが嬉しいですね。言語としてNode.jsしか選択できない欠点はあります...
ExpressはNode.jsのフレームワークです。比較的自由度が高いので、MVCフレームワークに沿って構築しています。
データベース
MongoDB
以下の点からデータベースとしてMongoDBを採用しています。
- アプリケーションの性質上データの整合性が重要ではない
- 利用者が多いので、情報を得やすい
- NoSQLではあるが、合計や平均などの集約操作が可能
MongoDBのODMとして、mongooseが有名ですが、これをTypeScriptで記述する場合拡張しなければいいけないことが多くて大変でした...
テストフレームワーク
Jest
サーバー
heroku
デプロイ先としては小さなアプリケーションであるためherokuを選択しました。
おわりに
制作にそんなに時間がかからないと考えていましたが、思ったよりも時間がかかってしまいました。
個人開発だとやるもやらないも自由なんで、その日の気分で開発を勧めていたのでダラダラと進んでいってしまいました。
明確なスケジュールを設定して進めるべきでしたね...