以下は、ユーザーの要望に基づいて作成されたHTMLファイルの例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>数値計算アプリ</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<h1>数値計算アプリ</h1>
<div>
<label for="numberInput">自然数を入力してください:</label>
<input type="number" id="numberInput">
<button onclick="calculate()">計算する</button>
</div>
<h2>計算結果:</h2>
<table id="resultsTable">
<tr>
<th>入力値</th>
<th>2倍した値</th>
<th>0.95倍した値</th>
<th>差</th>
</tr>
</table>
<h2>過去の入力:</h2>
<div id="historyButtons"></div>
<script>
var history = [];
function calculate() {
var input = parseInt(document.getElementById("numberInput").value);
if (isNaN(input) || input <= 0) {
alert("自然数を入力してください。");
return;
}
var multiply = input;
var divide = input * 0.95;
var difference = multiply - divide;
var table = document.getElementById("resultsTable");
var row = table.insertRow(-1);
row.insertCell(0).innerHTML = input;
row.insertCell(1).innerHTML = multiply;
row.insertCell(2).innerHTML = divide;
row.insertCell(3).innerHTML = difference;
if (history.indexOf(input) === -1) {
history.push(input);
var button = document.createElement("button");
button.innerHTML = input;
button.onclick = function() {
document.getElementById("numberInput").value = this.innerHTML;
};
document.getElementById("historyButtons").appendChild(button);
}
}
</script>
</body>
</html>
```
ジョークは、このアプリには含まれていません。ご了承ください。