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

GitLabはじめました

遅ればせながらあけましておめでとうございます。
もう1月が終わるなんて・・・。
1月は往く、2月は逃げる、3月は去るとはよく言ったものだなぁと思います。

ゆるりスタートでしたが、旧友と再会したり
今後取り組みたいことの具現化を勉強会でしてもらったり
今月は刺激を貰えた月でした。

今年も張り切って進めそうです (´◡`*)

さて、タイトルにあるとおり、GitLabをはじめました。
理由としては、プライベートリポジトリやCIが無料で行えるためです。
手探り状態ですが、少しずつ進めていこうと思います。
#当初、タイトルを「GitHubからGitLabへ移行しました。」としていましたが、並走して使うことにしました。

今年も1ヶ月に1回程度ゆるりペースで更新していけたらと思います。
どうぞよろしくお願いします。

Share

2017年の振り返り

2017年も残すところあと数日。
この一年を振り返ろうと思います。

インプット、アウトプット

昨年は会社が変わり案件を進めながら言語やフレームワークを学ぶ日々だったので
いろんな意味で毎日がエキサイティング、1年があっという間でした。

今年は余裕が出てきた分、いろんな面で
周りに目を向けられるようになったと思います。

外部の勉強会(JJUG CCC 2017 Spring)への参加や、
このブログを始めることができました。

Qiitaにも記事を投稿しました。

ビュー数もかなり異なると思いますし
ブログは主に自分向けのメモ、Qiitaは他の人へ説明する場、
問いかける場として使い分けたらいいかなと思っています。

いいねを押してくださった方、Starを下さった方 ありがとうございます!
とても励みになりますm(*_ _)m

働き方

いろんな職場を見たい、もっと経験を積みたい、リモートワークをしてみたいと思い
秋ごろから副業やフリーランス向けのサービスに複数登録、話を聞きに行きました。
一つの選択肢として来年も模索したいと思います。

来年の抱負

今年はどちらかといえば単体の技術(vueやkotlin、spring boot)について
学ぶことが多かったので来年はもう少し複数のサービスを組み合わせた
システムを構築したいと思います。
継続的インテグレーションを行いたいし、ガジェットにも手を出したい。
OSSのコミッターも目指したいし、勉強会等にも もっと顔を出して社外のつながりを作りたい。

「人生は何事をも為なさぬには余りに長いが、何事かを為すには余りに短い」
何事も楽しみながら取り組みたいです:)

Share