火曜日, 6月 10, 2025

Let's start JavaScript 70 
ストロボのGNとISOの換算計算機

写ルンです風撮影道で必要に迫られて、ストロボのGNとISOの換算計算機を作成しました。

ISOとGNの関係は・・・
求めるGN = 基準のGN × √(設定したISO / 基準のISO)
ちなみに通常はISO100の時のGNが基準ですが、最近のデジタルカメラでは最低ISO感度が160などがあり、ISOI160のときのGNという表記もあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GN換算計算機</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
max-width: 400px;
margin: auto;
background: black;
color: white;
}
input {
font-size: 1em;
margin-bottom: 10px;
width: 200px; /* 幅を明示的に200pxに指定 */
display: block;
}
button {
font-size: 1em;
margin-bottom: 10px;
width: 209px; /* 幅を明示的に200pxに指定 */
display: block;
}
label {
margin-top: 10px;
display: block;
}
.result {
font-weight: bold;
margin-top: 15px;
}
.bcolor{
background: yellow;
}
</style>
</head>
<body>
<h3>GN(ガイドナンバー)換算計算機</h3>

<label for="isoA">製品仕様基準のISO感度:</label>
<input type="number" id="isoA" value="100">

<label for="gnA">製品仕様基準に対してのGN:</label>
<input type="number" id="gnA" value="10">

<label for="isoB">変換後のISO感度:</label>
<input type="number" id="isoB" value="400">
<br>
<button class="bcolor"
    onclick="calculateGN()"> GNを計算する </button>

<div class="result" id="result"></div>

<script>
function calculateGN() {
const isoA =
        parseFloat(document.getElementById('isoA').value);
const gnA =
        parseFloat(document.getElementById('gnA').value);
const isoB =
        parseFloat(document.getElementById('isoB').value);

if (isoA > 0 && gnA > 0 && isoB > 0) {
const gnB = gnA * Math.sqrt(isoB / isoA);
document.getElementById('result').innerText =
`ISO${isoB}でのGNは約 ${gnB.toFixed(2)} です。`;
} else {
document.getElementById('result').innerText =
            'すべての値を正しく入力してください。';
}
}
</script>
</body>
</html>

実行するとダミーデータが表示されるので、任意データを入力して「GNを計算する」をクリックすれば・・・

求めるGNが表示されます。