JavaScript
api
chart.js
筋トレ
fitbit
medibaDay 24

健康を支える技術 - Fitbit API + JavaScriptでグラフを作る

TL;DR(長いので3行で)

  • 体調崩すのが多かったが、きちんと食べて運動して寝るようにしたら治ってきた
  • 食・運動・睡眠って改めて大事だなと思った
  • あとFitbitでデータ管理すると楽しいよ

なぜこの記事を書くのか

30代になったら、突然 風邪をひいたり体調を崩して仕事を休むことが多くなってしまいました。
また、20代は運動を全くしなくても太らなかったのが、30歳を超えたら急にお腹周りが気になり始めました。
他にも、肩こりや腰痛にも悩まされて、「これじゃ、まずいなー」と思い、数年前から徐々に改善した結果をこの記事にまとめようと思います。

(テクノロジー的な内容は後半にちょっとしかないのでご了承くださいw)

なぜ健康がいいのか

当たり前ですが、働く上で体調管理にも気をつけなければなりません。
特にこの記事を見ている方は技術職の方が多いかと思いますが、体調不良になると生産性に影響が出てしまうかと思います。
巻き返すために夜遅くまで働いていて…では悪循環になってしまいます。

安定したパフォーマンスを保つのも、働く上で大事だと思っています。

健康になるためには

色んな考えがあると思いますが、僕は運動・食事・睡眠が大部分を締めていると思います。

また、肥満(体脂肪が多い状態)になると、生活習慣病などの病気にかかりやすくなると言われているので、体脂肪には注意しなければなりません。逆に体脂肪を落としすぎると免疫力が落ちるのでバランスが大事です。

順に取り組んだ内容を説明していきます。

運動

手軽に出来るのは筋トレです。
(初めはジョギングをしてみたのですが、天候・気温・時間によって出来る出来ないが影響出てしまうこともあり、なかなか定着しませんでした。。筋トレだと1種目5分で終わるのでお手軽です)

筋トレは、健康にいいのはもちろんですが、基礎代謝が増えて痩せやすい体質になります。
効率的に基礎代謝を増やすには、大きな筋肉である胸、背中、尻、太もも鍛えるといいです。

筋トレは様々なメニューありますが、以下の昔ながらの王道なメニューが手軽に効率的に鍛えられて一番かなーと思っています。

プッシュアップ(腕立て伏せ)

誰でもやったことありますね。
プッシュアップバーを使ったり、誰かおんぶしながらやると、さらに負荷を上げられます。

スクワット

テレビ観たりや歯磨きしながらなど、いつでもどこでもできるのでオススメです。
また、消費カロリーも多いので、ダイエットにもつながります。
ダンベルを持ったり、誰か肩車しながらやると、さらに負荷を上げられます。

チンニング(懸垂)

自宅ではできませんが、仕事帰りとかに近所の公園で手軽にできます。
高い鉄棒があればベストですが、低い鉄棒しか無い公園でも足を畳むなど工夫すればなんとかできます。
ただ、夜1人でやっていると、周りから不審者だと思われそうで、ちょっとやりづらいですw

アブローラー(腹筋ローラー)

王道じゃないですが、腹筋だけじゃなく全身の筋肉を鍛えられるのでオススメです。
最初はキツいですが、膝コロ、壁コロ、立ちコロとやり方を変えれば、段階的に強度を上げられます。

筋トレを継続するためには

筋トレのモチベーションを保つのはなかなか難しいものです。
モチベーションは気分によって変わってしまうのでモチベーションには頼らず、歯磨きや風呂に入るのと一緒で習慣として考えるようにしています。

でも、人間弱いもので、やらない理由を考えちゃうんですよね。
「今日は疲れたから」「仕事で遅くなったから」「なんか気分乗らない」など。やらない理由をいくつも頭の中にでてきてしまいます。
ですが、それだと、筋トレが続きません。
なので、僕は「やらない理由を考えたら、やる」というルールにしています。
これで、基本、やることになります。

あと、「月曜日は●●をやる」など、曜日ごとにメニューを決めておくと、1週間のリズムが出来上がってきます。

指標について

体重は筋肉量によって増減してしまいあまり参考にならないので、除脂肪体重(体重 - 脂肪重量(体重 × 体脂肪率 ÷ 100))を指標にするといいと思います。
ただ、その日の水分量などによって変化してしまいやすいので、あくまで参考数値です。
また、ウェストを細くするという目標ならば、毎日腹囲を測るなど、目的に合わせて指標を考えるのがいいと思います。

食事

食事に関しては、5大栄養素をバランスよく摂取できているかが大事だと思っています。

5大栄養素とは

  • 炭水化物(糖質 + 食物繊維)
  • タンパク質
  • 脂質
  • ミネラル(カルシウム、鉄、亜鉛など)
  • ビタミン(ビタミンA, B, C, D…など)

3大栄養素である、炭水化物、タンパク質、脂質に関しては、いろんな食品に栄養成分表示が書いてあるので参考になります。

どれぐらい摂取すればいいのか

3大栄養素に関しては、マクロ計算ページ | DIET GENIUS.jpを参考にするといいと思います。
こちらのサイトで、1日の3大栄養素の必要摂取量が分かります。

日々、摂取している栄養素の割合を見ると分かったのですが、1日にのうち、炭水化物、脂質はすぐ超えてしまい、逆にタンパク質は足りないことが多いです。

ですので、食事の基本は、低糖質 + 低脂質 + 高タンパク質なものをできるだけ選びます。
が、3食全て低糖質 + 低脂質だと辛いので、ゆる〜く夕飯のみこのルールにしています。
※ちなみに炭水化物、脂質も身体を動かす上で必要な栄養素なので完全に抜くはNG

また、ミネラル、ビタミンに関しては種類が多いので、自分が課題だと思っている栄養素を積極的に摂取するのを意識するといいと思っています。
(参考)ビタミン・ミネラル事典 | タケダ健康サイト

普段の食事で5大栄養素をバランスよく摂取できるのがベストですが、たくさん食べないといけなく結構難しいので、プロテインとマルチビタミン+ミネラルのサプリで補うと、効率・経済的です。

睡眠

睡眠時間を増やすのも大事なのですが、睡眠の質を上げるのも重要だと思っています。
が、筋トレをしていれば、睡眠の質は勝手に上がるので、後は早寝することを習慣づけます。

まとめ

こうして書いてみると、すべて当たり前のことばかりですね。
ただ、その当たり前ができなくなってくると、体調にも影響が出てしまうのかなと思います。
今後も、歳をとることに気をつけていきたいです。

改善した結果はどうなったか

  • ここ1、2年は仕事を休むぐらいの体調不良になっていない
  • 風邪をひいても軽度で済む。そしてすぐ治る
  • 肩こり、腰痛が無くなった
  • 体重は変わらないけど、体脂肪率は数%減った(除脂肪体重が増えた)
  • おまけに髪の毛、肌の調子も良くなった気がする

と、悩みはほぼ解決しました。

Fitbitで分析

ようやくQiitaっぽいネタですが、FitbitのFlex2を購入してから約1年経ちデータが溜まってきたので、ちょっと遊んでみます。

Flexはリストバンドを手につけるだけで、消費カロリー、睡眠時間、歩数などの数値を取得できるようになります。またFitbitのアプリを使うことで、体重、体脂肪も管理できるようになります。

Fitbit APIを使う

FitbitではAPIが公開されています。
アクセストークンの取得については、以下記事が参考になりました。
FitbitのAPIを手っ取り早く試してみる方法 - Qiita

なお、公式リファレンスはこちらです。
Fitbit Web API Reference
細かく書いてあるので一通りこちらで理解できます。

ただ、ちょっと残念なことに取得できる日数が最大31日間のみです。
(1年間の記録を元に分析などしたい場合は、IFTTTのアプレットを使って、Googleスプレッドシートに自動保存した方がいいと思います。僕も最近スプレッドシートにログを溜め始めました)

JavaScriptでAPIからデータを取得

普段JavaScriptを使用しているので、JavaScriptでやってみました。
難しいことは特に無く、fetch()で取得するだけです。

※ローカル内だけで確認する用なのでトークンをJavaScript内で埋め込んでいます。外部に公開しないように気をつけましょう

const token = '※発行したトークンを入力※';
const api = {
  url : 'https://api.fitbit.com/1',
  resource : '/user/-/body/log/weight/date/2017-11-01/1m.json', // 11月の体重を1ヶ月間取得したい場合
}

fetch(`${api.url}${api.resource}`, {
  method: 'get',
  headers: { 'Authorization': `Bearer ${token}` }
}).then((response)=>{
  return response.json();
}).then((json)=>{
  console.log(json);
});

すると、こんな形で結果を取得できます。
(実際の数値は伏せていますw)

console.log
weight: {
  0:{ bmi: xx.xx, date: "2017-11-01", fat: xx, logId: xxx, source: "API", time: "23:59:59", weight: xx.x }
  1:{ bmi: xx.xx, date: "2017-11-02", fat: xx, logId: xxx, source: "API", time: "23:59:59", weight: xx.x }
  2:{ bmi: xx.xx, date: "2017-11-03", fat: xx, logId: xxx, source: "API", time: "23:59:59", weight: xx.x }
  3:{ bmi: xx.xx, date: "2017-11-04", fat: xx, logId: xxx, source: "API", time: "23:59:59", weight: xx.x }
  4:{ bmi: xx.xx, date: "2017-11-05", fat: xx, logId: xxx, source: "API", time: "23:59:59", weight: xx.x }
  ...
}

体重(weight)取得のAPIなのですが、BMI、体脂肪率も同時に取得できちゃいます。

グラフにする

console.log()では見づらいので、Chart.jsにデータを投げてグラフを作ってみましょう。

スクリーンショット(1ヶ月のグラフ)

chart.png

※実際の数値はトリミングしています

Chart.jsの使い方説明まですると長くなりそうなので、本記事では割愛します。
以下記事が参考になりました。
chart.js で複数軸の複合グラフを描く - Qiita

このような形でグラフにすると、分析しやすくなります。

今回は体重・体脂肪だけでグラフを作成しましたが、Fitbitアプリでは摂取カロリーも登録できるので、もっと複雑な分析も可能となります。

定期的に観測して、改善していきたいと思います。

最後に

記事を書き終えて思ったのですが、こんな記事を書いた後に体調崩したら恥ずかしいですね。。
なので、引き続き、健康管理に気をつけたいと思います。