<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ノギスの測定値を揃えるアプリ</title>
<style>
label {
display: inline-block;
width: 150px;
margin-bottom: 10px;
}
input {
width: 150px;
padding: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>ノギスの測定値を揃えるアプリ</h1>
<form>
<label for="x1">右上x1：</label>
<input type="number" step="0.01" id="x1"><br>
<label for="x2">左上x2：</label>
<input type="number" step="0.01" id="x2"><br>
<label for="x3">右下x3：</label>
<input type="number" step="0.01" id="x3"><br>
<label for="x4">左下x4：</label>
<input type="number" step="0.01" id="x4"><br>
<label for="y1">右上y1：</label>
<input type="number" step="0.01" id="y1"><br>
<label for="y2">右下y2：</label>
<input type="number" step="0.01" id="y2"><br>
<label for="y3">左上y3：</label>
<input type="number" step="0.01" id="y3"><br>
<label for="y4">左下y4：</label>
<input type="number" step="0.01" id="y4"><br>
<button type="button" onclick="calculate()">計算</button>
<button type="button" onclick="showHistory()">履歴</button>
<button type="button" onclick="reset()">リセット</button>
</form>
<div id="result"></div>
<script>
let results = [];
function calculate() {
let x1 = parseFloat(document.getElementById("x1").value);
let x2 = parseFloat(document.getElementById("x2").value);
let x3 = parseFloat(document.getElementById("x3").value);
let x4 = parseFloat(document.getElementById("x4").value);
let y1 = parseFloat(document.getElementById("y1").value);
let y2 = parseFloat(document.getElementById("y2").value);
let y3 = parseFloat(document.getElementById("y3").value);
let y4 = parseFloat(document.getElementById("y4").value);
let result = document.getElementById("result");
let deltaX1 = (x1 - x2) / 2;
let deltaX3 = (x3 - x4) / 2;
let deltaY1 = (y1 - y2) / 2;
let deltaY3 = (y3 - y4) / 2;
let direction = "";
if (deltaX1 < 0) {
direction += "→に";
deltaX1 *= -1;
} else if (deltaX1 > 0) {
direction += "←に";
}
if (deltaX3 < 0) {
direction += "→に";
deltaX3 *= -1;
} else if (deltaX3 > 0) {
direction += "←に";
}
if (deltaY1 < 0) {
direction += "↑に";
deltaY1 *= -1;
} else if (deltaY1 > 0) {
direction += "↓に";
}
if (deltaY3 < 0) {
direction += "↑に";
deltaY3 *= -1;
} else if (deltaY3 > 0) {
direction += "↓に";
}
let resultText = "x1-x2の差：" + deltaX1.toFixed(3) + "<br>"
+ "x3-x4の差：" + deltaX3.toFixed(3) + "<br>"
+ "y1-y2の差：" + deltaY1.toFixed(3) + "<br>"
+ "y3-y4の差：" + deltaY3.toFixed(3) + "<br>"
+ "方向：" + direction;
result.innerHTML = resultText;
let historyText = "x1=" + x1.toFixed(3) + ", x2=" + x2.toFixed(3) + ", x3=" + x3.toFixed(3) + ", x4=" + x4.toFixed(3) + ", y1=" + y1.toFixed(3) + ", y2=" + y2.toFixed(3) + ", y3=" + y3.toFixed(3) + ", y4=" + y4.toFixed(3) + "<br>"
+ resultText.replace(/<br>/g, "\n").replace(/<[^>]*>/g, "");
results.push(historyText);
}
function showHistory() {
let historyText = "";
for (let i = 0; i < results.length; i++) {
historyText += results[i].replace(/\n/g, "<br>") + "<br><br>";
}
document.getElementById("result").innerHTML = historyText;
}
function reset() {
document.getElementById("x1").value = "";
document.getElementById("x2").value = "";
document.getElementById("x3").value = "";
document.getElementById("x4").value = "";
document.getElementById("y1").value = "";
document.getElementById("y2").value = "";
document.getElementById("y3").value = "";
document.getElementById("y4").value = "";
document.getElementById("result").innerHTML = "";
}
</script>
</body>
</html>
