ExchangeRate.host 通貨換算デモ
ExchangeRate.host API を使った
「リアルタイム通貨換算ツール（CodePen対応HTML＋JSデモ）」を紹介します。
See the Pen Untitled by MONO365 -Color your days- (@monoqlo365) on CodePen.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>通貨換算デモ - ExchangeRate.host</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
background: linear-gradient(135deg, #dbeafe, #fef9c3);
color: #222;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 { margin-bottom: 20px; }
.converter {
background: white;
padding: 20px 30px;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
select, input, button {
margin: 5px;
padding: 8px 10px;
font-size: 1rem;
border-radius: 8px;
border: 1px solid #ccc;
}
button {
background: #2563eb;
color: white;
border: none;
cursor: pointer;
transition: 0.2s;
}
button:hover {
background: #1e40af;
}
.result {
margin-top: 15px;
font-size: 1.2rem;
font-weight: bold;
}
</style>
</head>
<body>
<h1>💱 通貨換算ツール（ExchangeRate.host）</h1>
<div class="converter">
<input type="number" id="amount" value="100" min="0" step="any" />
<select id="from">
<option>USD</option>
<option selected>JPY</option>
<option>EUR</option>
<option>GBP</option>
<option>KRW</option>
</select>
→
<select id="to">
<option selected>USD</option>
<option>JPY</option>
<option>EUR</option>
<option>GBP</option>
<option>KRW</option>
</select>
<button id="convertBtn">換算する</button>
<div class="result" id="result">結果がここに表示されます</div>
</div>
<script>
const btn = document.getElementById("convertBtn");
btn.addEventListener("click", async () => {
const amount = document.getElementById("amount").value;
const from = document.getElementById("from").value;
const to = document.getElementById("to").value;
const resultDiv = document.getElementById("result");
resultDiv.textContent = "計算中…";
try {
const url = `https://api.exchangerate.host/convert?from=${from}&to=${to}&amount=${amount}`;
const res = await fetch(url);
const data = await res.json();
if (data.result) {
resultDiv.textContent = `${amount} ${from} = ${data.result.toFixed(2)} ${to}`;
} else {
resultDiv.textContent = "取得に失敗しました";
}
} catch (err) {
resultDiv.textContent = "通信エラーが発生しました";
}
});
</script>
</body>
</html>
特徴
- APIキー不要で即動作（CORS対応なのでブラウザで直接OK）
https://api.exchangerate.host/convert?from=USD&to=JPY&amount=100
でJSON形式の結果が返ります- リアルタイムレートを自動取得（更新頻度：数分ごと）
APIレスポンス例
{
"success": true,
"query": { "from": "USD", "to": "JPY", "amount": 100 },
"info": { "rate": 149.25 },
"result": 14925.0
}
応用アイデア
- グラフ表示（過去1週間レート：
/timeseries?start_date=...&end_date=...） - 自動更新（5秒おきにfetch）
- 複数通貨を同時表示（例：USD→EUR,JPY,GBP）
See the Pen xchangeRate.host Currency Converter #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.
See the Pen Line Chart of Exchange Rates for the Past Week by MONO365 -Color your days- (@monoqlo365) on CodePen.
See the Pen Displaying Cryptocurrency Prices Using the CoinGecko API by MONO365 -Color your days- (@monoqlo365) on CodePen.
