0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-04-27

健康診断にて...

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

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

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

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

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

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

ダイエット はじめました

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

それは...

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

それだけです。

消費カロリー > 摂取カロリー = 痩せる
消費カロリー < 摂取カロリー = 太る

たった、それだけです。

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

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

しかし...

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

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

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

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

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

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

作りました。

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

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

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

.html
<body>
分子/分母
</body>

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

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

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

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

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

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

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

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

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

.html
<math>
  <mfrac>
    <mi>
      ここに分子(文字)
    </mi>
    <mn>
     ここに分母(数値)
    </mn>
 </mfrac>
</math>

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

つまり、最終的には

.html
<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減量できました。

やったぜ!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?