<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ノギスの測定値を揃えるアプリ</title>
</head>
<body>
<h1>ノギスの測定値を揃えるアプリ</h1>
<form>
<h2>製品寸法の入力</h2>
<label>製品寸法A:</label>
<input type="number" id="dimensionA">
<label>製品寸法A'：</label>
<input type="number" id="dimensionAprime">
<label>製品寸法B：</label>
<input type="number" id="dimensionB">
<label>製品寸法B'：</label>
<input type="number" id="dimensionBprime">
<label>製品寸法C：</label>
<input type="number" id="dimensionC">
<label>製品寸法C'：</label>
<input type="number" id="dimensionCprime">
<label>製品寸法D：</label>
<input type="number" id="dimensionD">
<label>製品寸法D'：</label>
<input type="number" id="dimensionDprime">
<br>
<br>
<button type="button" onclick="calculate()">計算</button>
<button type="button" onclick="reset()">リセット</button>
</form>
<br>
<h2>ノギスの測定値の入力</h2>
<label>x1：</label>
<input type="number" id="x1">
<label>x2：</label>
<input type="number" id="x2">
<label>x3：</label>
<input type="number" id="x3">
<label>x4：</label>
<input type="number" id="x4">
<label>y1：</label>
<input type="number" id="y1">
<label>y2：</label>
<input type="number" id="y2">
<label>y3：</label>
<input type="number" id="y3">
<label>y4：</label>
<input type="number" id="y4">
<br>
<br>
<button type="button" onclick="calculate()">計算</button>
<button type="button" onclick="reset()">リセット</button>
<br>
<br>
<label>A-z:</label>
<output id="resultAminusZ"></output>
<label>A'-z'：</label>
<output id="resultAprimeMinusZprime"></output>
<label>B-z'：</label>
<output id="resultBminusZprime"></output>
<label>B'-z：</label>
<output id="resultBprimeMinusZ"></output>
<label>C-v'：</label>
<output id="resultCminusVprime"></output>
<label>C'-v'：</label>
<output id="resultCprimeMinusVprime"></output>
<label>D-v：</label>
<output id="resultDminusV"></output>
<label>D'-v'：</label>
<output id="resultDprimeMinusVprime"></output>
<br>
<br>
<button type="button" onclick="showHistory()">履歴</button>
<ul id="historyList"></ul>
<script>
let history = [];
function calculate() {
let dimensionA = document.querySelector('#dimensionA').value;
let dimensionAprime = document.querySelector('#dimensionAprime').value;
let dimensionB = document.querySelector('#dimensionB').value;
let dimensionBprime = document.querySelector('#dimensionBprime').value;
let dimensionC = document.querySelector('#dimensionC').value;
let dimensionCprime = document.querySelector('#dimensionCprime').value;
let dimensionD = document.querySelector('#dimensionD').value;
let dimensionDprime = document.querySelector('#dimensionDprime').value;
let x1 = document.querySelector('#x1').value;
let x2 = document.querySelector('#x2').value;
let x3 = document.querySelector('#x3').value;
let x4 = document.querySelector('#x4').value;
let y1 = document.querySelector('#y1').value;
let y2 = document.querySelector('#y2').value;
let y3 = document.querySelector('#y3').value;
let y4 = document.querySelector('#y4').value;
// 入力値の検証
if (dimensionA === '' || dimensionAprime === '' || dimensionB === '' || dimensionBprime === '' || dimensionC === '' || dimensionCprime === '' || dimensionD === '' || dimensionDprime === '' || x1 === '' || x2 === '' || x3 === '' || x4 === '' || y1 === '' || y2 === '' || y3 === '' || y4 === '') {
alert('入力値に不足があります');
return;
}
if (isNaN(dimensionA) || isNaN(dimensionAprime) || isNaN(dimensionB) || isNaN(dimensionBprime) || isNaN(dimensionC) || isNaN(dimensionCprime) || isNaN(dimensionD) || isNaN(dimensionDprime) || isNaN(x1) || isNaN(x2) || isNaN(x3) || isNaN(x4) || isNaN(y1) || isNaN(y2) || isNaN(y3) || isNaN(y4)) {
alert('入力値に数字以外が含まれています');
return;
}
// 計算
let AminusZ = dimensionA - ((+x1 - +x2) / 2);
let AprimeMinusZprime = dimensionAprime - ((+x3 - +x4) / 2);
let BminusZprime = dimensionB - ((+y1 - +y2) / 2);
let BprimeMinusZ = dimensionBprime - ((+y3 - +y4) / 2);
let CminusVprime = dimensionC - ((+y1 - +y4) / 2);
let CprimeMinusVprime = dimensionCprime - ((+y2 - +y3) / 2);
let DminusV = dimensionD - ((+x1 - +x4) / 2);
let DprimeMinusVprime = dimensionDprime - ((+x2 - +x3) / 2);
document.querySelector('#resultAminusZ').value = AminusZ;
document.querySelector('#resultAprimeMinusZprime').value = AprimeMinusZprime;
document.querySelector('#resultBminusZprime').value = BminusZprime;
document.querySelector('#resultBprimeMinusZ').value = BprimeMinusZ;
document.querySelector('#resultCminusVprime').value = CminusVprime;
document.querySelector('#resultCprimeMinusVprime').value = CprimeMinusVprime;
document.querySelector('#resultDminusV').value = DminusV;
document.querySelector('#resultDprimeMinusVprime').value = DprimeMinusVprime;
// 履歴の保存
let calculation = {
dimensionA: dimensionA,
dimensionAprime: dimensionAprime,
dimensionB: dimensionB,
dimensionBprime: dimensionBprime,
dimensionC: dimensionC,
dimensionCprime: dimensionCprime,
dimensionD: dimensionD,
dimensionDprime: dimensionDprime,
x1: x1,
x2: x2,
x3: x3,
x4: x4,
y1: y1,
y2: y2,
y3: y3,
y4: y4,
resultAminusZ: AminusZ,
resultAprimeMinusZprime: AprimeMinusZprime,
resultBminusZprime: BminusZprime,
resultBprimeMinusZ: BprimeMinusZ,
resultCminusVprime: CminusVprime,
resultCprimeMinusVprime: CprimeMinusVprime,
resultDminusV: DminusV,
resultDprimeMinusVprime: DprimeMinusVprime
};
history.push(calculation);
}
function showHistory() {
let historyList = document.querySelector('#historyList');
let li;
while (historyList.firstChild) {
historyList.removeChild(historyList.firstChild);
}
for (let i = 0; i < history.length; i++) {
li = document.createElement('li');
li.textContent = '製品寸法A: ' + history[i].dimensionA + ', 製品寸法A\': ' + history[i].dimensionAprime + ', 製品寸法B: ' + history[i].dimensionB + ', 製品寸法B\': ' + history[i].dimensionBprime + ', 製品寸法C: ' + history[i].dimensionC + ', 製品寸法C\': ' + history[i].dimensionCprime + ', 製品寸法D: ' + history[i].dimensionD + ', 製品寸法D\': ' + history[i].dimensionDprime + ', x1: ' + history[i].x1 + ', x2: ' + history[i].x2 + ', x3: ' + history[i].x3 + ', x4: ' + history[i].x4 + ', y1: ' + history[i].y1 + ', y2: ' + history[i].y2 + ', y3: ' + history[i].y3 + ', y4: ' + history[i].y4 + ', 計算結果(A-z): ' + history[i].resultAminusZ + ', (A\'-z\'): ' + history[i].resultAprimeMinusZprime + ', (B-z\'): ' + history[i].resultBminusZprime + ', (B\'-z): ' + history[i].resultBprimeMinusZ + ', (C-v\'): ' + history[i].resultCminusVprime + ', (C\'-v\'): ' + history[i].resultCprimeMinusVprime + ', (D-v): ' + history[i].resultDminusV + ', (D\'-v\'): ' + history[i].resultDprimeMinusVprime;
historyList.appendChild(li);
}
}
function reset() {
document.querySelector('#dimensionA').value = '';
document.querySelector('#dimensionAprime').value = '';
document.querySelector('#dimensionB').value = '';
document.querySelector('#dimensionBprime').value = '';
document.querySelector('#dimensionC').value = '';
document.querySelector('#dimensionCprime').value = '';
document.querySelector('#dimensionD').value = '';
document.querySelector('#dimensionDprime').value = '';
document.querySelector('#x1').value = '';
document.querySelector('#x2').value = '';
document.querySelector('#x3').value = '';
document.querySelector('#x4').value = '';
document.querySelector('#y1').value = '';
document.querySelector('#y2').value = '';
document.querySelector('#y3').value = '';
document.querySelector('#y4').value = '';
document.querySelector('#resultAminusZ').value = '';
document.querySelector('#resultAprimeMinusZprime').value = '';
document.querySelector('#resultBminusZprime').value = '';
document.querySelector('#resultBprimeMinusZ').value = '';
document.querySelector('#resultCminusVprime').value = '';
document.querySelector('#resultCprimeMinusVprime').value = '';
document.querySelector('#resultDminusV').value = '';
document.querySelector('#resultDprimeMinusVprime').value = '';
history = [];
let historyList = document.querySelector('#historyList');
while (historyList.firstChild) {
historyList.removeChild(historyList.firstChild);
}
}
</script>
</body>
</html>
