はじめに

クックパッドを見ながら、料理を作るのが好きなのですが、ふと記載されている分量を作る人数に応じて変更できたら、便利かなと思い、人数に応じて分量を計算できるchrome拡張を作成しました

TL;DR

作ったchrome拡張はこちら

人数を変更して、「分量表示」ボタンをクリックすると、入力した人数で作る際に必要な分量を計算して、表示します

chrome拡張作成の流れ

manifest.jsonを作成します

manifest.json

{
  "name": "クックパッドのレシピの分量を計算するchrome拡張",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Change the amount of cookpad recipe chrome extension",
  "content_scripts": [{
    "matches": [
      "https://cookpad.com/recipe/*"
    ],
    "js": [
      "js/main.js"
    ]
  }]
}

次に処理を行うJavaScriptを書く
材料の横に人数の記載があれば、分量を計算できるようにしています

js/main.js

const color = 'color: #ff8c1a;';
let baseServing = 0;
let servingsFor = document.getElementsByClassName('servings_for yield');
if (servingsFor.length != 0) {
  baseServing = getNum(changeHalf(servingsFor[0].textContent));

  const label1 = document.createElement('label');
  label1.textContent = '→';
  servingsFor[0].appendChild(label1);

  const input1 = document.createElement('input');
  input1.type = 'text';
  input1.name = 'servings';
  input1.maxLength = 2;
  input1.size = 2;
  input1.value = baseServing;
  input1.style = color;
  servingsFor[0].appendChild(input1);

  const label2 = document.createElement('label');
  label2.textContent = '人分';
  label2.style = color;
  servingsFor[0].appendChild(label2);

  const btn1 = document.createElement('input');
  btn1.type = 'button';
  btn1.value = '分量表示';
  btn1.className = 'submit button small';
  btn1.onclick = function() {
    let values = document.getElementsByClassName('ingredient_quantity amount');
    for(i = 0; i < values.length; i++) {
      let changeAmount = values[i].parentNode.getElementsByClassName('ingredient_quantity change_amount');
      if (changeAmount.length != 0) {
        values[i].parentNode.removeChild(changeAmount[0]);
      }
      let halfValue = changeHalf(values[i].textContent);
      let baseQuantity = getNum(halfValue);
      if (baseQuantity != '') {
        let serving = document.getElementsByName('servings')[0].value;
        let per = serving / baseServing;
        let quantity = baseQuantity * per;

        const label3 = document.createElement('div');
        label3.className = 'ingredient_quantity change_amount';
        label3.style = color;
        label3.textContent = halfValue.replace(baseQuantity, quantity);
        values[i].parentNode.appendChild(label3);
      }
    }
  };
  servingsFor[0].appendChild(btn1);
}

function getNum(data) {
  return data.replace(/[^0-9]/g, '');
}

function changeHalf(str) {
  return str.replace(/[０-９]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
  });
}

さいごに

以下のような課題はありますが、まあまあ満足してます
- 人数の記載がない場合、分量の計算はできない
- 人数に1〜2といった記載がある場合、計算できない
- 分量で複数の数値（大さじ1〜2)のような記載があるものは計算されない
今回、chrome拡張を初めて作成しましたが、以下のリンクがとても役に立ちました。ありがとうございます。
一応、ソースコードをgithubにおいてます
- change-the-amount-of-cookpad-recipe

クックパッドのレシピの分量を計算するchrome拡張を作りました

はじめに

TL;DR

chrome拡張作成の流れ

さいごに