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

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

# TL;DR

作ったchrome拡張はこちら

![image.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103774/c1d80319-e2ae-9a87-a311-244395844443.gif)

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


# 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拡張を初めて作成しましたが、以下のリンクがとても役に立ちました。ありがとうございます。
    - [Chrome拡張の作り方 (超概要)](https://qiita.com/RyBB/items/32b2a7b879f21b3edefc)
    - [JavaScriptで数字のみ取り出す](https://qiita.com/HorikawaTokiya/items/42a027ed51018caa8575)
    - [JavaScriptで英数を全角/半角に変換する方法](https://qiita.com/yamikoo@github/items/5dbcc77b267a549bdbae)

- 一応、ソースコードをgithubにおいてます
    - [change-the-amount-of-cookpad-recipe](https://github.com/kazu-ando129/change-the-amount-of-cookpad-recipe.git)