💪

MyFitnessPal のフード作成時に塩分相当量をナトリウムにかんたん変換するスクリプト

2021/05/05に公開

JavaScript

bookmarklet

効率化

tech

なにこれ

MyFitnessPal は食事や運動を管理できるウェブサービスです。
アプリ版もありますが、ウェブでも使え、パソコンからでもスマホからでも一元管理されたデータにアクセスできる利便性があります。

私はこの MyFitnessPal を使ってレコーディングダイエットをしているのですが、このとき、些細な課題がありました。
それは、フード作成時に「塩分相当量」を「ナトリウム」に変換する手間です。

MyFitnessPal はレコーディングダイエットにも使いやすいサービスで、日々食べたフードを記録することができます。
会員が共有している「フードデータベース」に登録されているデータを参照して各種栄養成分を記録することもできますし、自分で「マイフード」として登録することもできます。
説明として不十分ですが、本質ではないのでこのくらいに留めておきます。

そして、そのフード登録時の項目として「ナトリウム」があります。

MyFitnessPal 栄養情報を入力ページ

この「ナトリウム」が、なかなか厄介です。
日本の食品に表記されている栄養成分には、おおよそ「塩分相当量」という別の単位での表記しかありません。
塩分相当量はナトリウムに変換可能ですが、ちょっと暗算するには難しい（少なくとも私には）計算をしないといけません。

食塩相当量　（g/100g）　＝　ナトリウム　（mg/100g）　×　2.54　／　1000

食塩つまり塩化ナトリウム（NaCl）は、質量数が23のナトリウム（Na）と質量数が35.5の塩素（Cl）からなる分子量58.5の化合物である。食塩相当量は、ナトリウム量に換算係数である2.54（=58.5/23）をかけることで求めることができる。

引用元：http://www.mac.or.jp/mail/161001/03.shtml

せっかく便利にレコーディングダイエットをしているのに、フード登録時に苦労するのは面倒だなぁと思い、ここを便利にするスクリプトを作りました。
言語は JavaScript です。
わりと雑ですが、個人的には便利なのでここに記録しておきます。

スクリプト

まず結論です。

ブックマークレット版

javascript:(() => { const tr = document.querySelector('tr.last'); tr.querySelectorAll('td.col-1')[1].textContent = '塩分相当量'; const td = tr.querySelectorAll('td.col-2')[1]; td.innerHTML = '<input class="text" autocomplete="off" tabindex="19" type="number" step="0.01">g'; td.querySelector('input').addEventListener('input', e => { const elem = document.getElementById('nutritional_content_sodium'); const saltEquivalent = parseFloat(e.target.value); if (isNaN(saltEquivalent)) { return }; elem.value = Math.round(saltEquivalent * 1000 / (58.5 / 23)) }) })();

改行していないので見づらいと思いますが、これはブックマークレットに登録するためです。
このブックマークレットを https://www.myfitnesspal.com/ja/food/new で実行すると、下図のようにタンパク質の下に「塩分相当量」の項目が生えてきます。

MyFitnessPal 栄養情報を入力ページブックマークレット実行後

生えてきた「塩分相当量」に数値を入力すると、先述の変換計算を自動的にしてくれて、その計算結果を「ナトリウム」の input に入力してくれるようになります。便利です。

また、ブックマークレットではなく ScriptAutoRunner を使うこともできますので、それ向けのスクリプトは以下です。

ScriptAutoRunner

(() => {
  if (!/\/food\/(new|edit)/.test(location.pathname)) return

  const tr = document.querySelector('tr.last')
  tr.querySelectorAll('td.col-1')[1].textContent = '塩分相当量'

  const td = tr.querySelectorAll('td.col-2')[1]
  td.innerHTML = '<input class="text" autocomplete="off" tabindex="19" type="number" step="0.01">g'

  td.querySelector('input').addEventListener('input', e => {
    const elem = document.getElementById('nutritional_content_sodium');
    const saltEquivalent = parseFloat(e.target.value);
    if (isNaN(saltEquivalent)) return
    elem.value = Math.round(saltEquivalent * 1000 / (58.5 / 23))
  })
})()

説明

やっていることは単純で、そして雑です。
フード作成ページの構成は固定化されているので、それを利用して雑に querySelector しまくっていますし、添字も決め打ちです。

処理の流れは、以下のとおりです。

塩分相当量の入力要素を追加する
入力された値を自動計算して、ナトリウムに入力する

まず、以下のコードでタンパク質の下に「塩分相当量」の項目を追加しています。
たまたまそこに空欄があったので、それを利用しています。

const tr = document.querySelector('tr.last')
tr.querySelectorAll('td.col-1')[1].textContent = '塩分相当量'

const td = tr.querySelectorAll('td.col-2')[1]
td.innerHTML = '<input class="text" autocomplete="off" tabindex="19" type="number" step="0.01">g'

次に、以下で「塩分相当量」に入力された値を自動計算して「ナトリウム」に入力しています。
換算係数は 2.54 でも良かったのですが、もとの計算式では =58.5/23 だったので、それを使っています。

td.querySelector('input').addEventListener('input', e => {
  const elem = document.getElementById('nutritional_content_sodium')
  const saltEquivalent = parseFloat(e.target.value)
  if (isNaN(saltEquivalent)) return
  elem.value = Math.round(saltEquivalent * 1000 / (58.5 / 23))
})

以上がこのスクリプトの説明となります。

もし、レコーディングダイエットで MyFitnessPal を使っていて、同じ面倒さを感じている人がいましたら、ご利用ください。

なにこれ

スクリプト

説明

Discussion