これを見れば実装できる!PHPで無料のAPI『OpenWeatherMap』を使って天気予報サイト構築を解説
今回実際に作成したのがこちら!
5日間の3時間天気予報
このページの仕様は、
- 現在の天気を表示
- 5日間の天気を表示
- 表示する都道府県をユーザーが選択し、動的に変更する
- 現在の天気はSVGアニメーションで動かしてみる
です。
今回はこれベースに解説していきます。
OpenWeatherMapで出来ること

様々な有料プランがありますが、無料でも十分天気予報サイトが作れそうです。
1分あたりの呼び出し回数に制限がありますが、趣味レベルで作る程度なら全く問題ないでしょう。
その中で今回は、
- 現在の天気
- 5日間の3時間予報
を同時に実装していきたいと思います!
まずはAPI keyを取得
APIを利用するためにまずはアカウントを登録して、API keyを取得する必要があります。
API keyを取得するのはとても簡単です。
ユーザー名、メールアドレス、パスワードと必要なチェックボックスをチェックするだけで、すぐ登録できます。
下記リンクから登録画面へ遷移できます。
https://home.openweathermap.org/users/sign_up
その後、ログイン画面から ① 『API keys』へ移動し、②の『Key』からコピーしてください。

早速リクエストを送り、情報を取得する
ここからプログラミングに入ります。
まずはレスポンスが返ってくるか試しましょう。
5日間の3時間天気情報を取得します。
▼ 公式ドキュメント
https://openweathermap.org/forecast5
1 2 3 4 5 6 7 8 9 | function getWeather($api_type, $area_id){ $api_base = 'https://api.openweathermap.org/data/2.5/'; $api_parm = '?id='.$area_id.'&units=metric&appid=【API Key】'; $api_url = $api_base.$api_type.$api_parm; return json_decode(file_get_contents($api_url), true); } var_dump( getWeather('forecast', 1850144) ); |
情報を取得する関数を作りました。
jsonを取得して、PHPで扱えるように連想配列にします。
これでとりあえず取得できたはずです。
ベースURL
ベースのURLは『https://api.openweathermap.org/data/2.5/』で決まりです。
その後にAPI Keyなどのパラメーターを付けてリクエストを送ります。
何の情報を取得するか
ベースURLの直後にURLに含めます。
- 現在の天気 ⇒
weather
- 5日間の3時間予報 ⇒
forecast
ユーザー定義関数getWeather()
の第一引数でforecast
を指定します。
どの都市の情報を取得するか
手法としては、都市名、都市ID、座標、郵便番号で取得できます。
種類 | 記法 | 例 |
---|---|---|
都市名 | ?q={都市名},{国コード} | 【ベースURL】/forecast?q=London,us |
都市ID | ?id={都市ID} | 【ベースURL】/forecast?id=524901 |
地理座標 | ?lat={緯度}&lon={経度} | 【ベースURL】/forecast?lat=35&lon=139 |
郵便番号 | ?zip={郵便番号},{国コード} | 【ベースURL】/forecast?zip=94040,us |
IDがユニークな値で、使いやすそうなので今回はIDで取得することにします。
都市IDを取得
まずはトップページの検索ボックスから表示したい都市名を英語で入力して検索します。

そして、出てきた詳細ページのURLからIDがわかります。
アドレスバーからIDをコピります。

サンプルでは『shinjuku』と入力して出てきた、東京都のページです。
東京都のIDは1850144
ということが分かったので、これをユーザー定義関数getWeather()
の第二引数で指定します。
受け取ったデータ
こんな感じの連想配列を受け取れます。
array(5) { [“cod”]=> string(3) “200” [“message”]=> float(0.009) [“cnt”]=> int(40) [“list”]=> array(40) { [0]=> array(8) { [“dt”]=> int(1571454000) [“main”]=> array(8) { [“temp”]=> float(20.46) [“temp_min”]=> float(20.46) [“temp_max”]=> float(21.04) [“pressure”]=> float(1014.57) [“sea_level”]=> float(1014.57) [“grnd_level”]=> float(1011.64) [“humidity”]=> int(70)…….省略
あとはこれをこっちで整形して、視覚的に人間がちゃんと見れるようにしていきます。
5日間天気予報
5日間天気予報(Call 5 day / 3 hour forecast data)の値一覧
まとめるとこんな感じです。
1 | 2 | 3 | 概要 |
---|---|---|---|
code | 内部パラメーター | ||
message | 内部パラメーター | ||
city | id | 都市ID | |
name | 市の名前 | ||
coord | lat | 緯度 | |
lon | 経度 | ||
country | 国コード(GB、JPなど) | ||
timezone | UTCから秒単位でシフト | ||
cnt | このAPI呼び出しによって返された行数 | ||
list | dt | 予測されるデータの時間、Unix、UTC | |
main | temp | 温度。単位のデフォルト:ケルビン、メトリック:摂氏、帝国:華氏。 | |
temp_min | 計算時の最低温度。 | ||
temp_max | 計算時の最高温度。 | ||
pressure | デフォルトでの海面の気圧、hPa | ||
sea_level | 海面の気圧、hPa | ||
grnd_level | 地上レベルの気圧、hPa | ||
humidity | 湿度、% | ||
temp_kf | 内部パラメーター | ||
weather | id | 気象条件ID | |
main | 気象パラメータのグループ(雨、雪、極端など) | ||
description | グループ内の気象条件 | ||
icon | 天気アイコンID | ||
clouds | all | 曇り、% | |
wind | speed | 風速。単位のデフォルト:メートル/秒、メトリック:メートル/秒、帝国:マイル/時間。 | |
deg | 風向、度(気象) | ||
rain | 3h | 過去3時間の降雨量、mm | |
snow | 3h | 過去3時間の積雪量 | |
dt_txt | 計算のデータ/時間、UTC |
5日間天気予報の値を出力
主に天気予報で使えるのは情報はlist
配下なので、list
配下だけ使っていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // 5日間天気 $response = getWeather('forecast', 1850144); $weather_list = $response['list']; // list配下 foreach( $weather_list as $items ): $temp = $items['main']['temp']; // 気温 $temp_max = $items['main']['temp_max']; // 最高気温 $temp_min = $items['main']['temp_min']; // 最低気温 $humidity = $items['main']['humidity']; // 湿度 $weather = $items['weather'][0]['main']; // 天気 $weather_des = getTranslation($items['weather'][0]['description']); // 天気説明 $weather_icon = getIcon($items['weather'][0]['description']); // 天気アイコン(自分用) // $weather_icon = $items['weather'][0]['icon']; // 天気アイコン(公式のアイコンを使用) $datetime = new DateTime(); $datetime->setTimestamp( $items['dt'] )->setTimeZone(new DateTimeZone('Asia/Tokyo')); // 日時 - 協定世界時 (UTC)を日本標準時 (JST)に変換 $date = $datetime->format('Y年m月d日'); // 日付 $time = $datetime->format('H:i'); // 時間 endforeach; |
foreach
でループさせ、foreach内で変数に格納した値をHTMLに組み込んでください。
タイムスタンプ 協定世界時 (UTC)を日本標準時 (JST)に変換
APIが返してくる日時(タイムスタンプ)はUTCで、日本時間ではないので、これを日本時間に変換します。
new DateTime
でインスタンスを生成setTimestamp
でAPIが返したタイムスタンプをセットsetTimeZone
でnew DateTimeZone('Asia/Tokyo')
で東京を指定
1 2 3 4 | $datetime = new DateTime(); $datetime->setTimestamp( $items['dt'] )->setTimeZone(new DateTimeZone('Asia/Tokyo')); // 日時 - 協定世界時 (UTC)を日本標準時 (JST)に変換 $date = $datetime->format('Y年m月d日'); // 日付 $time = $datetime->format('H:i'); // 時間 |
天気説明(description)を日本語に翻訳
海外のAPIなので、返ってくる値も英語です。
自力で翻訳することにします。
– 近いうちに別の翻訳APIを使って翻訳しようと思います。。
ユーザー定義関数getTranslation()
を作りました。
下記公式ドキュメントから、どんなdescriptionがあるか記載されているので、ここを参照して力技で翻訳します。
https://openweathermap.org/weather-conditions
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 | // 日本語に変換 function getTranslation($arg){ switch ($arg) { case 'overcast clouds': return 'どんよりした雲<br class="nosp">(雲85~100%)'; break; case 'broken clouds': return '千切れ雲<br class="nosp">(雲51~84%)'; break; case 'scattered clouds': return '散らばった雲<br class="nosp">(雲25~50%)'; break; case 'few clouds': return '少ない雲<br class="nosp">(雲11~25%)'; break; case 'light rain': return '小雨'; break; case 'moderate rain': return '雨'; break; case 'heavy intensity rain': return '大雨'; break; case 'very heavy rain': return '激しい大雨'; break; case 'clear sky': return '快晴'; break; case 'shower rain': return 'にわか雨'; break; case 'light intensity shower rain': return '小雨のにわか雨'; break; case 'heavy intensity shower rain': return '大雨のにわか雨'; break; case 'thunderstorm': return '雷雨'; break; case 'snow': return '雪'; break; case 'mist': return '靄'; break; case 'tornado': return '強風'; break; default: return $arg; } } |
アイコンを出力
公式アイコンをそのまま利用
下記公式ドキュメントに出力されるアイコンも記載されています。
https://openweathermap.org/weather-conditions
$weather_icon = $items['weather'][0]['icon']; // 天気アイコン(公式のアイコンを使用)
をそのまま利用し、アイコンを簡単に出力できます。
1 | <img src="https://openweathermap.org/img/wn/<?php echo $weather_icon; ?>@2x.png" alt="<?php echo $weather; ?>"> |
自分で用意したアイコンを利用
これも力技でdescriptionから加工して、画像ファイル名にして出力したいと思います。
descriptionから加工する理由は、公式だと小雨も大雨も同じアイコンなので、そこの違いの幅を持たせたいからです。
ユーザー定義関数getIcon()
を作りました。
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 | // アイコン取得 function getIcon($arg){ switch ($arg) { case 'clear sky': return 'sun'; break; case 'few clouds': return 'few_sun'; break; case 'overcast clouds': return 'clouds'; break; case 'broken clouds': case 'scattered clouds': return 'few_clouds'; break; case 'light rain': case 'light intensity shower rain': return 'light_rain'; break; case 'moderate rain': case 'shower rain': return 'moderate_rain'; break; case 'heavy intensity rain': case 'very heavy rain': case 'heavy intensity shower rain': return 'heavy_rain'; break; case 'thunderstorm': return 'thunderstorm'; break; case 'snow': return 'snow'; break; case 'mist': return '靄'; break; case 'tornado': return 'tornado'; break; default: return $arg; } } |
フリーのSVG素材を利用して、天気アイコンを出力します。
1 | <img src="/assets/images/weather/<?php echo $weather_icon; ?>.svg" alt="<?php echo $weather; ?>"> |
ここまでで、5日間3時間天気予報は出来上がりましたね。
ユーザーが見たい都市に切り替えられるようにする
セレクトボックスでユーザーが都市を切り替えられるようにします。
まずは、都市一覧の連想配列を作りました。
1 2 3 4 5 6 7 8 | // エリアリスト $areas = array( 1850144 => '東京都', 6940394 => '埼玉県(さいたま市)', 2130404 => '北海道(江別市)', 1856035 => '沖縄県(那覇市)', 1853909 => '大阪府(大阪市)' ); |
キーが都市IDで、値が都市名です。
これをベースに組んでいきます。
selectボックスを作成
配列エリアリスト$areas
からループで作成します。
1 2 3 4 5 | <select name="area" class="p-select"> <?php foreach($areas as $key => $area): ?> <option value="<?php echo $key; ?>" <?php if($area_id == $key){ echo 'selected'; } ?>><?php echo $area; ?></option> <?php endforeach; ?> </select> |
都市IDを動的に取得
ユーザーがフォームで送信した先ほどのselectボックスの値を使ってIDをセットします。
三項演算子で$_GET['area']
があったら$_GET['area']
の値、
なかったら配列エリアリスト$areas
の最初のキー、つまり東京都のIDをセットします。
1 2 | // ID $area_id = $_GET['area'] ? $_GET['area'] : array_shift( array_keys($areas) ); |
try-catchで不正なIDをブロック
get送信で値を受け渡すので、普通にURLでパラメーターでIDをいじられたらAPI取得プログラムにエラーが発生するので、それを防ぎます。
$_GET['area']
の値が$areas
に含まれているか検証します。
不正の場合エラーを渡し、エラー文を出力させます。
1 2 3 4 5 6 7 8 9 10 11 12 | try { if( isset($_GET['area']) ){ if( !array_key_exists($_GET['area'], $areas) ){ throw new Exception('不正なパラメーターです。 セレクトボックスから選択してください。'); } } // ~ メイン処理 ~ } catch (Exception $e) { echo $e->getMessage(); } |
値を取得
あとは先ほどまで入れていた東京都のID1850144
を動的に変数にして、ユーザー定義関数getWeather()
に渡すだけです。
1 2 3 4 | // 5日間天気 $response = getWeather('forecast', $area_id); $weather_list = $response['list']; // list配下 |
現在の天気データ
現在の天気データ(Current weather data)値一覧
1 | 2 | 概要 |
---|---|---|
coord | lon | 経度 |
lat | 緯度 | |
weather | id | 気象条件ID |
main | 気象パラメータのグループ(雨、雪、極端など) | |
description | グループ内の気象条件 | |
icon | 天気アイコンID | |
base | 内部パラメーター | |
main | temp | 温度。単位のデフォルト:ケルビン、メトリック:摂氏、帝国:華氏。 |
pressure | 大気圧(海面上、sea_levelまたはgrnd_levelデータがない場合)、hPa | |
humidity | 湿度、% | |
temp_min | 現時点での最低気温。 | |
temp_max | 現時点での最高温度。 | |
sea_level | 海面の気圧、hPa | |
grnd_level | 地上レベルの気圧、hPa | |
wind | speed | 風速。単位のデフォルト:メートル/秒、メトリック:メートル/秒、帝国:マイル/時間。 |
deg | 風向、度(気象) | |
clouds | all | 曇り、% |
rain | 1h | 過去1時間の降雨量、mm |
3h | 過去3時間の降雨量、mm | |
snow | 1h | 過去1時間の積雪量、mm |
3h | 過去3時間の積雪量、mm | |
dt | データ計算の時間、Unix、UTC | |
sys | type | 内部パラメーター |
id | 内部パラメーター | |
message | 内部パラメーター | |
country | 国コード(GB、JPなど) | |
sunrise | 日の出時間、Unix、UTC | |
sunset | 日没時間、Unix、UTC | |
timezone | UTCから秒単位でシフト | |
id | 都市ID | |
mane | 市の名前 | |
cod | 内部パラメーター |
現在の天気情報を取得、出力
▼ 公式ドキュメント
https://openweathermap.org/current
リクエスト方法は5日間天気と同様です。
- 現在の天気 ⇒
weather
- 5日間の3時間予報 ⇒
forecast
現在の天気情報を取得
ユーザー定義関数getWeather()
の第一引数でweather
を指定します。
1 | $response_now = getWeather('weather', $area_id); |
現在の天気情報を出力
1 2 3 4 5 | $now_des = getTranslation($response_now['weather'][0]['description']); // 現在の天気説明 $now_icon = getIcon($response_now['weather'][0]['description']); // 現在の天気アイコン(自分用) // $now_icon = $response_now['weather'][0]['icon']; // 現在の天気アイコン(公式のアイコンを使用) $now_temp = $response_now['main']['temp']; // 現在の気温 $now_humidity = $response_now['main']['humidity']; // 現在の湿度 |
使用ユーザー定義関数などは5日間天気と同様です。
『Lazy Line Painter』でアイコンをSVGアニメーションさせる
SVGアニメーションは『Lazy Line Painter』を利用して楽します。
SVGフリー素材を入手して、それを『Lazy Line Painter』を使って動かします。
SVGがソースコードにあると邪魔で可読性が落ちるので、アイコン1つ毎に別ファイル化させました。
そのインクルード先を動的に変更することによってアイコンを出し分けます。
wordpressなので、get_template_part
を使います。
1 | <?php get_template_part( '/weather'.'/'.$now_icon ); // svgアイコン ?> |
最終 完成版ソース
– PHP、HTML
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 | <?php // エリアリスト $areas = array( 1850144 => '東京都', 6940394 => '埼玉県(さいたま市)', 2130404 => '北海道(江別市)', 1856035 => '沖縄県(那覇市)', 1853909 => '大阪府(大阪市)' ); // 日本語に変換 function getTranslation($arg){ switch ($arg) { case 'overcast clouds': return 'どんよりした雲<br class="nosp">(雲85~100%)'; break; case 'broken clouds': return '千切れ雲<br class="nosp">(雲51~84%)'; break; case 'scattered clouds': return '散らばった雲<br class="nosp">(雲25~50%)'; break; case 'few clouds': return '少ない雲<br class="nosp">(雲11~25%)'; break; case 'light rain': return '小雨'; break; case 'moderate rain': return '雨'; break; case 'heavy intensity rain': return '大雨'; break; case 'very heavy rain': return '激しい大雨'; break; case 'clear sky': return '快晴'; break; case 'shower rain': return 'にわか雨'; break; case 'light intensity shower rain': return '小雨のにわか雨'; break; case 'heavy intensity shower rain': return '大雨のにわか雨'; break; case 'thunderstorm': return '雷雨'; break; case 'snow': return '雪'; break; case 'mist': return '靄'; break; case 'tornado': return '強風'; break; default: return $arg; } } // アイコン取得 function getIcon($arg){ switch ($arg) { case 'clear sky': return 'sun'; break; case 'few clouds': return 'few_sun'; break; case 'overcast clouds': return 'clouds'; break; case 'broken clouds': case 'scattered clouds': return 'few_clouds'; break; case 'light rain': case 'light intensity shower rain': return 'light_rain'; break; case 'moderate rain': case 'shower rain': return 'moderate_rain'; break; case 'heavy intensity rain': case 'very heavy rain': case 'heavy intensity shower rain': return 'heavy_rain'; break; case 'thunderstorm': return 'thunderstorm'; break; case 'snow': return 'snow'; break; case 'mist': return '靄'; break; case 'tornado': return 'tornado'; break; default: return $arg; } } function getWeather($type, $area_id){ $api_base = 'https://api.openweathermap.org/data/2.5/'; $api_parm = '?id='.$area_id.'&units=metric&appid=【API Key】'; $api_url = $api_base.$type.$api_parm; return json_decode(file_get_contents($api_url), true); } // メイン処理 try { if( isset($_GET['area']) ){ if( !array_key_exists($_GET['area'], $areas) ){ throw new Exception('不正なパラメーターです。 セレクトボックスから選択してください。'); } } // ID $area_id = $_GET['area'] ? $_GET['area'] : array_shift( array_keys($areas) ); // 5日間天気 $response = getWeather('forecast', $area_id); $weather_list = $response['list']; // list配下 $cnt = 0; $city_id = $response['city']['id']; $city = $areas[$city_id]; // 現在の天気 $response_now = getWeather('weather', $area_id); $now_des = getTranslation($response_now['weather'][0]['description']); // 現在の天気説明 $now_icon = getIcon($response_now['weather'][0]['description']); // 現在の天気アイコン(自分用) // $now_icon = $response_now['weather'][0]['icon']; // 現在の天気アイコン(公式のアイコンを使用) $now_temp = $response_now['main']['temp']; // 現在の気温 $now_humidity = $response_now['main']['humidity']; // 現在の湿度 ?> <form action="./" method="get" class="p-form"> 地点を切り替える: <select name="area" class="p-select"> <?php foreach($areas as $key => $area): ?> <option value="<?php echo $key; ?>" <?php if($area_id == $key){ echo 'selected'; } ?>><?php echo $area; ?></option> <?php endforeach; ?> </select> </form> <h2 class="l-mh"><?php echo $city; ?></h2> <div class="p-now-weather-wrap"> <h2 class="p-now-weather-mh">現在の天気</h2> <div class="p-now-weather"> <p class="p-now-icon"> <?php get_template_part( '/weather'.'/'.$now_icon ); // svgアイコン ?> </p> <div class="p-now-detail"> <p class="p-now-des"><?php echo $now_des; ?></p> <p class="p-now-temp"><?php echo $now_temp; ?>℃</p> <p class="p-now-humidity">湿度:<?php echo $now_humidity; ?></p> </div> </div> </div> <?php foreach( $weather_list as $items ): $temp = $items['main']['temp']; // 気温 $temp_max = $items['main']['temp_max']; // 最高気温 $temp_min = $items['main']['temp_min']; // 最低気温 $humidity = $items['main']['humidity']; // 湿度 $weather = $items['weather'][0]['main']; // 天気 $weather_des = getTranslation($items['weather'][0]['description']); // 天気説明 $weather_icon = getIcon($items['weather'][0]['description']); // 天気アイコン(自分用) // $weather_icon = $items['weather'][0]['icon']; // 天気アイコン(公式のアイコンを使用) $datetime = new DateTime(); $datetime->setTimestamp( $items['dt'] )->setTimeZone(new DateTimeZone('Asia/Tokyo')); // 日時 - 協定世界時 (UTC)を日本標準時 (JST)に変換 $date = $datetime->format('Y年m月d日'); // 日付 $time = $datetime->format('H:i'); // 時間 ?> <?php if( substr($time, -5) == '00:00' ): $cnt = 0; ?> </ul> <?php endif; ?> <?php if ( $cnt == 0 ): ?> <h3 class="l-sh"><?php echo $date; ?></h3> <ul class="p-box"> <?php endif; ?> <li> <p class="p-time"><?php echo $time; ?></p> <div class="p-inner"> <?php /* <p class="p-icn"><img src="https://openweathermap.org/img/wn/<?php echo $weather_icon; ?>@2x.png" alt="<?php echo $weather; ?>"> */ ?> <p class="p-icn"><img src="/assets/images/weather/<?php echo $weather_icon; ?>.svg" alt="<?php echo $weather; ?>"></p> <div class="p-detail"> <p class="p-weather"><?php echo $weather_des; ?></p> <p class="p-temp"><?php echo $temp; ?>℃</p> <p class="p-temp-sub">湿度: <span><?php echo $humidity; ?>%</p> </div> </div> </li> <?php $cnt++; endforeach; ?> </ul> <?php } catch (Exception $e) { echo '<p class="m-normal-txt">'. $e->getMessage(). '</p>'; } ?> |
– JavaScript
selectボックスで都市を選択したらフォーム送信と、SVGアニメーション用に使ってます。
『Lazy Line Painter』はコールバック関数もあり、アニメーション終了後に処理させることができます。
今回はアニメーション後にクラスを追加して、SVGのfill
やstroke
の色付けなどを行っています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // selectボックスで都市を選択したらフォーム送信 document.querySelector('.p-select').onchange = function(){ document.querySelector('.p-form').submit(); } // SVGアニメーション document.addEventListener('DOMContentLoaded', function(){ let el = document.querySelector('#now-weather'); let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":2,"strokeOpacity":1,"strokeColor":"#333","strokeCap":"square"}); myAnimation.paint(); myAnimation.on('complete', function(){ el.classList.add('is-done'); document.querySelector('.p-now-detail').classList.add('is-show'); }); }); |
完成サイト
公式APIドキュメント まとめ
- 5日間3時間天気予報
https://openweathermap.org/forecast5 - 現在の天気データ
https://openweathermap.org/current - 天気詳細(icon、descriptionなど)
https://openweathermap.org/weather-conditions