はじめに
クックパッドを見ながら、料理を作るのが好きなのですが、ふと記載されている分量を作る人数に応じて変更できたら、便利かなと思い、人数に応じて分量を計算できる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(/[0-9]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 65248);
});
}
さいごに
-
以下のような課題はありますが、まあまあ満足してます
- 人数の記載がない場合、分量の計算はできない
- 人数に1〜2といった記載がある場合、計算できない
- 分量で複数の数値(大さじ1〜2)のような記載があるものは計算されない
-
今回、chrome拡張を初めて作成しましたが、以下のリンクがとても役に立ちました。ありがとうございます。
-
一応、ソースコードをgithubにおいてます