nuxtとbuefyを使って日々の体重の推移をグラフで可視化する

ダイエットには日々の体重を測定し、記録する方法があります。
もちろん それだけで減量はしないのですが、
今の体重がどれくらいかという意識を働かせることが大事だそうです。

自分一人で継続するには鉄の意志が必要なため
第三者に自分の体重を報告し、モチベーションを維持する人もいます。

今回はそんな人がさらにやる気を出せるよう
日々の体重の推移をグラフで可視化してみました。

要件

  • 計測開始時から現在までの体重の推移を折れ線グラフで表示する
  • 計測開始時から最新日の体重の増減量を明示する
  • 各月ごとの体重の推移を折れ線グラフで表示する
  • 各月ごとの体重の増減量を明示する
  • 各月のy軸最小値は目標値である70kg、y軸最大値は95kgとする
  • 各月の目標減量(-2kg)を達成していたら「おめでとう」と表示する
  • 体重を登録または更新するためのフォームを用意する
  • とりあえず1年は使われる想定

アーキテクチャ

AWSのAPI Gateway、Lambda、RDS(MySQL)を使用し
サーバレスにトライしました。

※実運用ではLamdaから直接RDSを触る方法は推奨されないので留意ください。
あくまで勉強用の構成です。

#フロント周り
フレームワークはNuxt.js、UIライブラリはBulma
グラフ描画にはvue-chartjsを用い、Netlifyにデプロイしました。

使用したモジュールのバーション

1
2
3
4
5
6
7
8
"axios": "^0.17.1",
"buefy": "^0.6.3",
"chart.js": "^2.7.1",
"moment": "^2.20.1",
"node-sass": "^4.7.2",
"nuxt": "^1.0.0",
"sass-loader": "^6.0.6",
"vue-chartjs": "^3.1.1"

スクリーンショット

計測開始時から現在までの体重の推移

体重を登録または更新するためのフォーム

各月ごとの体重の推移

最後に

Netlifyについて

GitHub Pagesと違い自分でファイルを生成しないで済む点
Netlifyは簡単で感動しました。

フロント周りについて

初めてmomentを使ったのですが便利ですね!
これは手放せないライブラリになりそうです。

UIライブラリにはbuefyもとい、bulmaを使いました。
レスポンシブな点が魅力的だと感じました。
element-uiはレスポンシブではないものの、色合いや
フォームのバリデーションルールを定義できる点が個人的に好きです。

今回はグラフ部分をコンポーネント化し
1ページに処理をずらずら書いたのですが、
もう少しすっきりできないかと思っています。

アーキテクチャについて

自分で一からAWSの環境を用意するのは初めてで新鮮でした。

最初はLambdaと相性がいいだろうとDynamoDBで考えていたのですが
時系列に値を保持できないため、MySQLに変更しました。
後々調べたら、NoSQLでもGridDBやRiak TSなど時系列に強いDBがあるんですね。

ちょいちょいエラーが発生しますが、今回は目をつむってもらおう。。。

ひとりごと

最近は忙しいらしく結果が芳しくありませんが
気に入ってもらえたようで大成功です!
個人的にもIoTで使えそうなことが出来たので満足です:)

それにしても、自分で登録できるようにフォームを用意したのに全く使ってもらえない・・・。

ソースコード

https://github.com/aytdm/weight-record

参考

Share