<!DOCTYPE html>
<html>
<head>
<title>天気予報アプリ</title>
<meta charset="UTF-8">
<script>
function getWeather(){
const city = "saitama";
const apiKey = "ここにAPIキーを入力";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city},jp&appid=${apiKey}&lang=ja`;
fetch(url)
.then(response => response.json())
.then(data => {
const weather = data.weather[0].description;
const temp = Math.round(data.main.temp - 273.15);
const minTemp = Math.round(data.main.temp_min - 273.15);
const maxTemp = Math.round(data.main.temp_max - 273.15);
const message = `埼玉県の明日の天気は、${weather}です。最低気温は${minTemp}℃、最高気温は${maxTemp}℃で、平均気温は${temp}℃です。`;
speak(message);
})
.catch(error => {
console.log(error);
alert("天気情報の取得に失敗しました。");
});
}
function speak(message){
const synth = window.speechSynthesis;
const utterThis = new SpeechSynthesisUtterance(message);
synth.speak(utterThis);
}
</script>
</head>
<body>
<button onclick="getWeather()">明日の埼玉県の天気を読み上げる</button>
</body>
</html>
