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

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

材料

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

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

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

sonymemo.hateblo.jp

ソース

• PHP 小さじ1
• MySQL 少々
• Javascript 少々
  • ※ cal-heatmap.jsが決め手です。
• HTML 少々

作り方

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

使い方

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

★TIPS

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

雑感

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

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

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

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

参考ページ

• lolipopで、PHPとPDOを使用してDBに接続する
• cal-heatmapで草を生やす - Programming