$*nyme

blog of a man, by a man, for a better future

Flicでつくる『筋トレして草を生やす』しくみ (Flic + PHP+ MySQL + cal-heatmap.js)

f:id:d_ymkw:20180109224522j:plain

f:id:d_ymkw:20180109175341p:plain

筋トレ(腹筋ローラー)を継続するモチベーションを保つための1施策として、筋トレの回数を手軽に記録・可視化するしくみを作りました。

材料

今回はありあわせの材料で手早く作ってみました。

f:id:d_ymkw:20180109224710j:plain

  • Flic ✕1
  • Flicアプリをインストールしたスマートフォン ✕1
  • MySQLの使えるレンタルサーバ ✕1

Flicは簡単に言うと、Bluetoothでスマホと繋がるボタンです。詳しくは下記記事で紹介しています。

sonymemo.hateblo.jp

ソース

  • PHP 小さじ1
  • MySQL 少々
  • Javascript 少々
  • HTML 少々

作り方

  1. MySQLで、時刻と回数とを記録するテーブルを作成する
  2. レンタルサーバ上に、1.で作成したテーブルの読み書きを行うWebAPIを作成するPODを用いてMySQLを読み書きするPHPのサンプルコードを、自環境に合わせて適宜書き換えればOKです。具体的には下記の2つのAPIを作成します。
    • WebAPI①:MySQLで現在時刻と回数(固定値 1)を記録する
    • WebAPI②:テーブルの記録をJSON形式に変換して出力する
  3. スマートフォンのFlicアプリで『クリック時にWebAPI①を叩く』ように設定
    f:id:d_ymkw:20180109224734j:plain
    今回は個人的な趣味で、WebAPIを叩くとともに『One more set!!』と喋るように設定しています。
  4. レンタルサーバ上に、cal-heatmap.jsで、WebAPI②を入力データとしてヒートマップを生成する(草を生やす)HTMLファイルを作成する。cal-heatmap.jsのCDNを用いる場合のサンプルソースをコピペでほぼOKです。お好みで初期化関数のパラメータを調整します。

使い方

  • 筋トレ時、筋トレした回数だけFlicをクリックする
  • 手元のスマートフォンやPCで、4.で作成したHTMLファイルを表示する

f:id:d_ymkw:20180109175341p:plain

★TIPS

  • cal-heatmap.jsは、デフォルトで色分けの閾値が10,20,30,40となっている。このため、濃い緑を生やすハードルが高い。自分のふだんの筋トレ回数を基準に、適宜調整すると見栄えが良くなる。
  • つまるところ、cal-heatmap.jsの入力データを記録・生成するWebAPIがあれば良いのでFlic以外の材料は何でもOKです。
    • スマートフォン → FlicSDKを組み込んだLinux端末でOK。(将来的にはFlicHubでOK)
    • MySQLの使えるレンタルサーバ → なんらかの方法でデータを永続的に保存できるクラウドサービスやローカルサーバでOK
  • ぶっちゃけFlicを使わずに、Webアプリで完結させても同じ仕組みはできます。

雑感

筋トレしたときにスマホを操作するのはちょっと億劫だけれども、ボタンをクリックするだけならストレス無くできるので、筋トレ回数の記録のしくみとしては、なかなか良い仕組みを作ったなぁと自画自賛したい気分。

もっとも、このしくみを作ったことより、部屋を整理して、いつでも筋トレできるように

トレーニングマットと腹筋ローラーを常設した

f:id:d_ymkw:20180109224522j:plain

ことのほうが筋トレをするモチベーションアップにつながっている気はする。

参考ページ