WEB API OpenWeatherMapを使用し天気予報サイトを作成してみた
2020.06.24
こんにちは。
生のJavascriptを使用し、WEB API OpenWeatherMapを呼び出し、3日間の天気予報サイトを作成しました。
初めての「WEB API」 所感
恥ずかしながら初めて「WEB API」というものを使用しました。
なんでこんなに便利なものを使用してこなかったのかと驚愕するほど便利なものでした。
ただ、アクセス数に応じて有料のものもあるので、使うのであれば個人的なツールとしてですね。
例えば、OpenWeatherMapを使用してLINE BOTを作成すれば、洗濯物が雨に濡れるなんてことはもうなくなるかもしれません。
今後は色々触ってみよう。
生のJavascriptで作成しました
今回は「WEB API」に触れたいという考えと、 jQuery を使用せずに生の Javascript の勉強をしたいという気持ちもありました。
そこでずいぶん時間がかかってしまいましたが、 Javascript のみで作ってみました。
まず自ら書いたのがこちらのソース。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 |
// 日にちを入れるターゲットを定義する const nowTimeTarget = document.getElementById('nowData'); const nextTimeTarget = document.getElementById('nextData'); const afNextTimeTarget = document.getElementById('afNextData'); // 現在の日時を取得 const now = new Date(); // 取得した日時をターゲットに代入 nowTimeTarget.innerHTML = (now.getMonth() + 1) + '月' + now.getDate() + '日 ' + now.getHours() + '時' + now.getMinutes() + '分'; nextTimeTarget.innerHTML = (now.getDate() + 1); afNextTimeTarget.innerHTML = (now.getDate() + 2); // 位置情報を取得開始 if (navigator.geolocation) { // 位置情報が取得成功した時 navigator.geolocation.getCurrentPosition(function (position) { // 緯度経度を取得 const basePosition = position.coords; const lat = basePosition.latitude; const lng = basePosition.longitude; // WEB API を使用し、現在地の現在の天気を取得 const API_KEY = "////////////////////////////////////////////"; const url = "https://api.openweathermap.org/data/2.5/weather" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY; const request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "json"; // 現在の天気に関する関数 request.onload = function () { const nowData = this.response; // 「現在の天気」「現在の気温」「現在地」を取得 const weatherName = nowData.weather[0].main; const weatherTemp = nowData.main.temp; const cityName = nowData.name; // 取得した現在地が「Suguri」の時の処置 if (cityName === 'Suguri') { alert('現在位置をうまく取得することができませんでした。\nしばらくお待ちいただき、再度アクセスいただけますでしょうか?\n「Suguri」の天気を表示させていただきます。どこかは知りません。') } // 取得したもの入れるターゲットを定義 const geoTarget = document.getElementById('cityName'); const patternTextTarget = document.getElementById('pattern'); const patternImgTarget = document.getElementById('picture'); const patternTempTarget = document.getElementById('temp'); // 現在地、気温をターゲットに代入 geoTarget.innerHTML = cityName; patternTempTarget.innerHTML = weatherTemp + '<span class="unit">℃</span>'; /*取得した天気によって 「天気の名前」「天気の画像を」を挿入*/ if (weatherName === "Thunderstorm") { patternTextTarget.innerHTML = '雷雨'; patternImgTarget.innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (weatherName === "Drizzle") { patternTextTarget.innerHTML = '霧雨'; patternImgTarget.innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (weatherName === "Rain") { patternTextTarget.innerHTML = '雨'; patternImgTarget.innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (weatherName === "Snow") { patternTextTarget.innerHTML = '雪'; patternImgTarget.innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (weatherName === "Atmosphere") { patternTextTarget.innerHTML = '濃霧'; patternImgTarget.innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (weatherName === "Clear") { patternTextTarget.innerHTML = '晴れ'; patternImgTarget.innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (weatherName === "Clouds") { patternTextTarget.innerHTML = '曇り'; patternImgTarget.innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } }; request.send(); // WEB API を使用し、現在地の翌日以降の天気を取得 const nextUrl = "https://api.openweathermap.org/data/2.5/forecast" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY; const nextRequest = new XMLHttpRequest(); nextRequest.open("GET", nextUrl, true); nextRequest.responseType = "json"; // 現在、翌日以降の天気に関する関数 nextRequest.onload = function () { const data = this.response; // 特定の時間の天気情報を取得 const nextWEather_6 = data.list[5].weather[0].main; // 翌日の6時 const nextWEather_9 = data.list[6].weather[0].main; // 翌日の9時 const nextWEather_12 = data.list[7].weather[0].main; // 翌日の12時 const nextWEather_15 = data.list[8].weather[0].main; // 翌日の15時 const nextWEather_18 = data.list[9].weather[0].main; // 翌日の18時 // 取得した天気によって「天気の画像を」を挿入 if (nextWEather_6 === "Thunderstorm") { document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (nextWEather_6 === "Drizzle") { document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (nextWEather_6 === "Rain") { document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (nextWEather_6 === "Snow") { document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (nextWEather_6 === "Atmosphere") { document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (nextWEather_6 === "Clear") { document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (nextWEather_6 === "Clouds") { document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } if (nextWEather_9 === "Thunderstorm") { document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (nextWEather_9 === "Drizzle") { document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (nextWEather_9 === "Rain") { document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (nextWEather_9 === "Snow") { document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (nextWEather_9 === "Atmosphere") { document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (nextWEather_9 === "Clear") { document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (nextWEather_9 === "Clouds") { document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } if (nextWEather_12 === "Thunderstorm") { document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (nextWEather_12 === "Drizzle") { document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (nextWEather_12 === "Rain") { document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (nextWEather_12 === "Snow") { document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (nextWEather_12 === "Atmosphere") { document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (nextWEather_12 === "Clear") { document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (nextWEather_12 === "Clouds") { document.getElementById('nextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } if (nextWEather_15 === "Thunderstorm") { document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (nextWEather_15 === "Drizzle") { document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (nextWEather_15 === "Rain") { document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (nextWEather_15 === "Snow") { document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (nextWEather_15 === "Atmosphere") { document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (nextWEather_15 === "Clear") { document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (nextWEather_15 === "Clouds") { document.getElementById('nextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } if (nextWEather_18 === "Thunderstorm") { document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (nextWEather_18 === "Drizzle") { document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (nextWEather_18 === "Rain") { document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (nextWEather_18 === "Snow") { document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (nextWEather_18 === "Atmosphere") { document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (nextWEather_18 === "Clear") { document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (nextWEather_18 === "Clouds") { document.getElementById('nextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } // 特定の時間の天気情報を取得 const nextTemp_6 = Math.round(data.list[5].main.temp); // 翌日の6時の気温 const nextTemp_9 = Math.round(data.list[6].main.temp); // 翌日の9時の気温 const nextTemp_12 = Math.round(data.list[7].main.temp); // 翌日の12時の気温 const nextTemp_15 = Math.round(data.list[8].main.temp); // 翌日の15時の気温 const nextTemp_18 = Math.round(data.list[9].main.temp); // 翌日の18時の気温 // 特定の時間に気温を代入 document.getElementById('nextTemp_6').innerHTML = nextTemp_6 + '℃'; document.getElementById('nextTemp_9').innerHTML = nextTemp_9 + '℃'; document.getElementById('nextTemp_12').innerHTML = nextTemp_12 + '℃'; document.getElementById('nextTemp_15').innerHTML = nextTemp_15 + '℃'; document.getElementById('nextTemp_18').innerHTML = nextTemp_18 + '℃'; // 特定の時間の天気情報を取得 const afNextWEather_6 = data.list[13].weather[0].main; // 翌翌日の6時 const afNextWEather_9 = data.list[14].weather[0].main; // 翌翌日の9時 const afNextWEather_12 = data.list[15].weather[0].main; // 翌翌日の12時 const afNextWEather_15 = data.list[16].weather[0].main; // 翌翌日の15時 const afNextWEather_18 = data.list[17].weather[0].main; // 翌翌日の18時 // 取得した天気によって「天気の画像を」を挿入 if (afNextWEather_6 === "Thunderstorm") { document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (afNextWEather_6 === "Drizzle") { document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (afNextWEather_6 === "Rain") { document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (afNextWEather_6 === "Snow") { document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (afNextWEather_6 === "Atmosphere") { document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (afNextWEather_6 === "Clear") { document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (afNextWEather_6 === "Clouds") { document.getElementById('afNextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } if (afNextWEather_9 === "Thunderstorm") { document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (afNextWEather_9 === "Drizzle") { document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (afNextWEather_9 === "Rain") { document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (afNextWEather_9 === "Snow") { document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (afNextWEather_9 === "Atmosphere") { document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (afNextWEather_9 === "Clear") { document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (afNextWEather_9 === "Clouds") { document.getElementById('afNextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } if (afNextWEather_12 === "Thunderstorm") { document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (afNextWEather_12 === "Drizzle") { document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (afNextWEather_12 === "Rain") { document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (afNextWEather_12 === "Snow") { document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (afNextWEather_12 === "Atmosphere") { document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (afNextWEather_12 === "Clear") { document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (afNextWEather_12 === "Clouds") { document.getElementById('afNextWEather_12').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } if (afNextWEather_15 === "Thunderstorm") { document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (afNextWEather_15 === "Drizzle") { document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (afNextWEather_15 === "Rain") { document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (afNextWEather_15 === "Snow") { document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (afNextWEather_15 === "Atmosphere") { document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (afNextWEather_15 === "Clear") { document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (afNextWEather_15 === "Clouds") { document.getElementById('afNextWEather_15').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } if (afNextWEather_18 === "Thunderstorm") { document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">'; } else if (afNextWEather_18 === "Drizzle") { document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">'; } else if (afNextWEather_18 === "Rain") { document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/rains.png" alt="雨">'; } else if (afNextWEather_18 === "Snow") { document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/snow.png" alt="雪">'; } else if (afNextWEather_18 === "Atmosphere") { document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">'; } else if (afNextWEather_18 === "Clear") { document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">'; } else if (afNextWEather_18 === "Clouds") { document.getElementById('afNextWEather_18').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">'; } else { return false; } // 特定の時間の気温を取得 const afNextTemp_6 = Math.round(data.list[13].main.temp); // 翌翌日の6時の気温 const afNextTemp_9 = Math.round(data.list[14].main.temp); // 翌翌日の9時の気温 const afNextTemp_12 = Math.round(data.list[15].main.temp); // 翌翌日の12時の気温 const afNextTemp_15 = Math.round(data.list[16].main.temp); // 翌翌日の15時の気温 const afNextTemp_18 = Math.round(data.list[17].main.temp); // 翌翌日の18時の気温 // 特定の時間に気温を代入 document.getElementById('afNextTemp_6').innerHTML = afNextTemp_6 + '℃'; document.getElementById('afNextTemp_9').innerHTML = afNextTemp_9 + '℃'; document.getElementById('afNextTemp_12').innerHTML = afNextTemp_12 + '℃'; document.getElementById('afNextTemp_15').innerHTML = afNextTemp_15 + '℃'; document.getElementById('afNextTemp_18').innerHTML = afNextTemp_18 + '℃'; }; nextRequest.send(); }, // 位置情報の取得失敗した時 function () { alert('位置情報の取得に失敗しました。'); }); } else { alert("位置情報を取得できませんでした……"); } |
動きは実現てきましたけど、あまりにも長く、同じような記述が多い。
何回も同じ処理をしててあまりにもダサい。
その後、フィードバックを受け再度書いた記述がこちら。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
// 天気の表示文字列および画像ファイル名 const WEATHERS = { Thunderstorm: { label: '雷雨', img: 'clouds' }, Drizzle: { label: '霧雨', img: 'rains' }, Rain: { label: '雨', img: 'rains' }, Snow: { label: '雪', img: 'snow' }, Atmosphere: { label: '濃霧', img: 'snow' }, Clear: { label: '晴れ', img: 'clear' }, Clouds: { label: '曇り', img: 'clouds' } }; // 日にちを入れるターゲットを定義する const nowTimeTarget = document.getElementById('nowData'); const nextTimeTarget = document.getElementById('nextData'); const afNextTimeTarget = document.getElementById('afNextData'); // 現在の日時を取得 const now = new Date(); // 取得した日時をターゲットに代入 nowTimeTarget.innerHTML = (now.getMonth() + 1) + '月' + now.getDate() + '日' + now.getHours() + '時' + now.getMinutes() + '分'; nextTimeTarget.innerHTML = (now.getDate() + 1); afNextTimeTarget.innerHTML = (now.getDate() + 2); // 位置情報を取得開始 if (navigator.geolocation) { // 位置情報が取得成功した時 navigator.geolocation.getCurrentPosition(function (position) { // 緯度経度を取得 const basePosition = position.coords; const lat = basePosition.latitude; const lng = basePosition.longitude; // WEB API を使用し、現在地の現在の天気を取得 const API_KEY = "////////////////////////////////////////////"; const url = "https://api.openweathermap.org/data/2.5/weather" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY; const request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "json"; // 現在の天気に関する関数 request.onload = function () { const nowData = this.response; // 「現在の天気」「現在の気温」「現在地」を取得 const weatherName = nowData.weather[0].main; const weatherTemp = nowData.main.temp; const cityName = nowData.name; // 取得した現在地が「Suguri」の時の処置 if (cityName === 'Suguri') { alert('現在位置をうまく取得することができませんでした。\nしばらくお待ちいただき、再度アクセスいただけますでしょうか?\n「Suguri」の天気を表示させていただきます。どこかは知りません。') } // 取得したもの入れるターゲットを定義 const geoTarget = document.getElementById('cityName'); const patternTextTarget = document.getElementById('pattern'); const patternImgTarget = document.getElementById('picture'); const patternTempTarget = document.getElementById('temp'); // 現在地、気温をターゲットに代入 geoTarget.innerHTML = cityName; patternTempTarget.innerHTML = weatherTemp + '<span class="unit">℃</span>'; /*取得した天気によって 「天気の名前」「天気の画像を」を挿入*/ const weather = WEATHERS[weatherName]; if (weather) { const { label, img } = weather; patternTextTarget.innerHTML = label; patternImgTarget.innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`; } else { return false; } }; request.send(); // WEB API を使用し、現在地の翌日以降の天気を取得 const nextUrl = "https://api.openweathermap.org/data/2.5/forecast" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY; const nextRequest = new XMLHttpRequest(); nextRequest.open("GET", nextUrl, true); nextRequest.responseType = "json"; // 現在、翌日以降の天気に関する関数 nextRequest.onload = function () { const data = this.response; // 翌日および翌々日の6,9,12,15,18時の天気情報を取得し、対応する画像と気温を設定 const cells = document.querySelectorAll('.weather-dot-cell'); //[...data.list.slice(7, 12), ...data.list.slice(15, 20)].forEach((e, i) => { const nextWeathers = data.list.slice(5, 10); // 翌日の 6,9,12,15,18 時の天気情報を持つ配列 const afNextWeathers = data.list.slice(13, 18); // 翌々日の 6,9,12,15,18 時の天気情報を持つ配列 const weathers = [ ...nextWeathers, ...afNextWeathers ]; // 上記2つの配列を連結した配列 weathers.forEach((e, i) => { const weather = WEATHERS[e.weather[0].main]; if (weather) { const { label, img } = weather; cells[i].querySelector('.weather-dot').innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`; cells[i].querySelector('.weather-temp').textContent = `${e.main.temp}℃`; } }); }; nextRequest.send(); }, // 位置情報の取得失敗した時 function () { alert('位置情報の取得に失敗しました。'); }); } else { alert("位置情報を取得できませんでした……"); } |
……200行くらい短くなりました。
あまりにも自分の力不足を痛感しました。
基本的にサイトを作るうえでJavascriptをゴリゴリに書く必要はありません。
(たしか、動きはCSSでトリガーをJavascriptでっていうのが推奨されてた気が……誰が推奨してたかは忘れましたが)
でも書けるに越したことはないので、勉強しよう。