消費カロリーの逆算Webアプリで学ぶ、HTMLでの分数表記

10229 ワード
Electron MathML HTML JavaScript MathJax HTML テキストリンク

健康診断にて...

日頃からデスクワークばかりだと運動不足になりますよね。
自分もエンジニア兼DTPオペレーターという二重職種ですが、デスクワークであることには変わりなく、運動不足です。
運動不足でもお腹は減り、お酒は増え、体脂肪も増量するものです。

20代のころは健康診断でも先生に「ちょっと太り気味なので、運動してくださいねー」と軽く注意される程度でした。

てへぺろ☆(・ω<)
で許されていました。

ところが、30代になった途端に「このままだとヤバいよ」と軽く怒れます…。

もちろん、
てへぺろ☆(・ω<)
と茶目っ気を見せても「運動しましょうねー」とあしらわれてしまします。

これはいよいよ、物理的にも重い腰を上げる時が来たようです...。

ダイエット　はじめました

今はデスクワークバリバリの自分ですが、学生時代はラグビー部所属のもやし型体育会系でした。
筋トレやマラソンは大嫌いですが、痩せる原理は痛感してます。

それは...

「消費カロリー＞摂取カロリー」であること

それだけです。

消費カロリー ＞ 摂取カロリー ＝ 痩せる
消費カロリー ＜ 摂取カロリー ＝ 太る

たった、それだけです。

「これをお腹に巻くだけ！」
「食事にこれを加えるだけ！」なんてのは幻想です。都合のいい夢を見るのは、諦めましょう。
と言いつつ、自分も「たった、それだけです。」と言っている...
※詳細はTestosterone氏の著書にお任せします。

なので、消費カロリーと摂取カロリーを把握する必要があります。
摂取カロリーはググれば簡単に分かります。
一方、消費カロリーも計算サービスやアプリがたくさんあります。

しかし...

カロリー計算ツールは「消費したカロリー」ばっかり

忙しい現代人にとって運動する時間は貴重です。
しかし、どの計算サービスも「運動して消費したカロリー」という結果ばかり。

「どれぐらい運動したら、摂取カロリーを清算できるか」がわかったら計画が立てやすいのに...

また、
「今日も頑張って走ったのに、たったの200kcalか...」
となると、モチベーションも下がってきます。

やはり、消費したいカロリーから運動時間を知りたい...。でもわからない...。

無いのなら　作ってしまえ　ホトトギス

作りました。


「消費したいカロリー」と「運動強度(種類)」と「体重」から運動時間を逆算できます。
トップページに分数表記された計算式も書いていますね。

ようやく分数表記の話か...

通常、htmlで分数表記をしようとすると、

<body>
分子/分母
</body>

と書くしかなく、
消費カロリー(kcal) / (1.05 * METs * 体重(kg) )
のようになります。

あるいは、MathMLに準拠した記述にするという手段もありますが、対応ブラウザが少ないという問題があります。

なので、対応していないブラウザのために、今回はMathJax™を使います。
CDNがあるので、以下の記述をhtmlに追加するだけでMathMLに準拠した記述をサポートしてくれます。

<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>

まずは数式表記をすることを示すため、<math>タグでくくります。

<math>
  ここに数式
</math>

次に、分数表記をする箇所を<mfrac>タグでくくります。

<math>
　<mfrac>
  　ここに分数表記
　</mfrac>
</math>

この中に書かれたタグが分子→分母の順で認識されます。
分子と分母をそれぞれ、<mi>(識別子や文字)タグ、<mn>(数値)タグでくくります。

<math>
  <mfrac>
    <mi>
      ここに分子（文字）
    </mi>
    <mn>
    　ここに分母（数値）
    </mn>
　</mfrac>
</math>

分子と分母が複数の数値や文字で成り立っている場合、<mrow>タグでくくることで、グループであることを明記します。

つまり、最終的には

<math>
  <mi>運動時間(h)</mi>
  <mo>＝</mo> 
  <mfrac>
    <mi>
      消費カロリー(kcal)
    </mi>
    <mrow>
      <mn>1.05</mn>
      <mo>&times;</mo>
      <mi>運動強度(METs)</mi>
      <mo>&times;</mo>
      <mi>体重(kg)</mi>
    </mrow>
  </mfrac>
</math>

こうなります。

その他の部分に関して

プルダウンメニュー(select要素)はbodyの読み込み時にjs上に記載したクラスから生成しています。
詳細はこちら。

そして、今回の肝である運動時間の計算は結構シンプルです。

計算部分.js
// 運動時間を計算するクラス
class Culc{
  constructor(kcal,METs,Weight){
    // 消費カロリー(kcal) ＝ 1.05 * METs * 体重(kg) * 運動時間(h)
    var kcalObj = document.getElementById(kcal);
    var METsObj = document.getElementById(METs);
    var WeightObj = document.getElementById(Weight);
    this.kcal = kcalObj.value;
    this.METs = METsObj.value;
    this.Weight = WeightObj.value;
    this.coefficient = 1.05;
  }

  culcWorkoutTime(){
    // 運動時間(h) ＝ 消費カロリー(kcal) / (1.05 * METs * 体重(kg) )
    var workouttime = this.kcal / (this.coefficient * this.METs * this.Weight);
    console.log("運動時間:",workouttime);
    return (workouttime);
  }
}

ちなみに、本アプリのリポジトリは
https://github.com/Kahiro-M/ConvKcal.git
です。
ご自由に改造してください。

そして、ダイエット開始から半年が経ち...

無事、-5kg減量できました。

やったぜ！