天気
WebAPIというサービスをいろいろな会社が出している。そのシステムから受け取った情報をウェブに表示することができる。
JS
openweathermapで検索→sign in→新しく作成→名前 メールパスワードを入れ２つ□にチェック→目的は他→APIキー→キーのアルファベットをコピー→一番上のAPIをクリック→下にある５Day/3 Hour forecastのAPI docをクリック
| <script> | |
| APIキーの入力 | const apiKey = "〇〇〇〇"; |
| 都市名 | const city = "Tokyo"; |
| データー読み取り | fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`) .then(response => response.json()) |
| コンソールログに都市、天気、気温を表示 | .then(データ => { console.log(`都市: ${データ.name}`); console.log(`天気: ${データ.weather[0].description}`); console.log(`気温: ${データ.main.temp}°C`); }) |
| 失敗時 | .catch(error => console.error("天気情報の取得に失敗しました:", error)); |
| </script> |
現在地の位置情報の天気
JS
| <script> | |
| 位置情報を取得 | navigator.geolocation.getCurrentPosition( (position) => { |
| 緯度、経度をセット | const latitude = position.coords.latitude; const longitude = position.coords.longitude; |
| APIキー | const apiKey = "〇〇〇〇"; |
| データー読み取り | const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`; fetch(url) .then(response => response.json()) |
| コンソールログに都市、天気、気温を表示 | .then(data => { console.log(`都市: ${data.name}`); console.log(`天気: ${data.weather[0].description}`); console.log(`気温: ${data.main.temp}°C`); }) |
| データー読み取り失敗時コンソールログに失敗表示 | .catch(error => console.error("天気情報の取得に失敗しました:", error)); }, |
| 位置情報失敗時 | (error) => { console.log("位置情報の取得に失敗しました:", error.message); } ); |
| </script> |