これを見れば実装できる！PHPで無料のAPI『OpenWeatherMap』を使って天気予報サイト構築を解説

API

PHP

2019/10/19

今回実際に作成したのがこちら！
5日間の3時間天気予報

このページの仕様は、

現在の天気を表示
5日間の天気を表示
表示する都道府県をユーザーが選択し、動的に変更する
現在の天気はSVGアニメーションで動かしてみる

です。
今回はこれベースに解説していきます。

OpenWeatherMapで出来ること

OpenWeatherMap　プラン — https://openweathermap.org/price

様々な有料プランがありますが、無料でも十分天気予報サイトが作れそうです。
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

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) );

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を取得

まずはトップページの検索ボックスから表示したい都市名を英語で入力して検索します。

OpenWeatherMap 都市検索 — https://openweathermap.org/

そして、出てきた詳細ページの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`	緯度
	`coord`	`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`	風速。単位のデフォルト：メートル/秒、メトリック：メートル/秒、帝国：マイル/時間。
	`wind`	`deg`	風向、度（気象）
	`rain`	`3h`	過去3時間の降雨量、mm
	`snow`	`3h`	過去3時間の積雪量
	`dt_txt`		計算のデータ/時間、UTC

5日間天気予報の値を出力

主に天気予報で使えるのは情報はlist配下なので、list配下だけ使っていきます。

// 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;

// 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')で東京を指定

$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'); // 時間

$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

// 日本語に変換
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 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']; // 天気アイコン（公式のアイコンを使用）
をそのまま利用し、アイコンを簡単に出力できます。

<img src="https://openweathermap.org/img/wn/<?php echo $weather_icon; ?>@2x.png" alt="<?php echo $weather; ?>">

1	<img src="https://openweathermap.org/img/wn/<?php echo $weather_icon; ?>@2x.png" alt="<?php echo $weather; ?>">

自分で用意したアイコンを利用

これも力技でdescriptionから加工して、画像ファイル名にして出力したいと思います。
descriptionから加工する理由は、公式だと小雨も大雨も同じアイコンなので、そこの違いの幅を持たせたいからです。

ユーザー定義関数getIcon()を作りました。

// アイコン取得
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 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素材を利用して、天気アイコンを出力します。

<img src="/assets/images/weather/<?php echo $weather_icon; ?>.svg" alt="<?php echo $weather; ?>">

1	<img src="/assets/images/weather/<?php echo $weather_icon; ?>.svg" alt="<?php echo $weather; ?>">

ここまでで、5日間3時間天気予報は出来上がりましたね。

ユーザーが見たい都市に切り替えられるようにする

セレクトボックスでユーザーが都市を切り替えられるようにします。
まずは、都市一覧の連想配列を作りました。

// エリアリスト
$areas = array(
    1850144 => '東京都',
    6940394 => '埼玉県（さいたま市）',
    2130404 => '北海道（江別市）',
    1856035 => '沖縄県（那覇市）',
    1853909 => '大阪府（大阪市）'
);

// エリアリスト

$areas = array(

1850144 => '東京都',

6940394 => '埼玉県（さいたま市）',

2130404 => '北海道（江別市）',

1856035 => '沖縄県（那覇市）',

1853909 => '大阪府（大阪市）'

);

キーが都市IDで、値が都市名です。
これをベースに組んでいきます。

selectボックスを作成

配列エリアリスト$areasからループで作成します。

<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>

<?php foreach($areas as $key => $area): ?>

<?php endforeach; ?>

</select>

都市IDを動的に取得

ユーザーがフォームで送信した先ほどのselectボックスの値を使ってIDをセットします。
三項演算子で$_GET['area']があったら$_GET['area']の値、
なかったら配列エリアリスト$areasの最初のキー、つまり東京都のIDをセットします。

// ID
$area_id = $_GET['area'] ? $_GET['area'] : array_shift( array_keys($areas) );

1 2	// ID $area_id = $_GET['area'] ? $_GET['area'] : array_shift( array_keys($areas) );

try-catchで不正なIDをブロック

get送信で値を受け渡すので、普通にURLでパラメーターでIDをいじられたらAPI取得プログラムにエラーが発生するので、それを防ぎます。

$_GET['area']の値が$areasに含まれているか検証します。
不正の場合エラーを渡し、エラー文を出力させます。

try {
    if( isset($_GET['area']) ){
        if( !array_key_exists($_GET['area'], $areas) ){
            throw new Exception('不正なパラメーターです。 セレクトボックスから選択してください。');
        }
    }

    // ～ メイン処理 ～

} catch (Exception $e) {
    echo $e->getMessage();
}

try {

if( isset($_GET['area']) ){

if( !array_key_exists($_GET['area'], $areas) ){

throw new Exception('不正なパラメーターです。セレクトボックスから選択してください。');

}

// ～メイン処理～

} catch (Exception $e) {

echo $e->getMessage();

}

値を取得

あとは先ほどまで入れていた東京都のID1850144を動的に変数にして、ユーザー定義関数getWeather()に渡すだけです。

// 5日間天気
$response = getWeather('forecast', $area_id);

$weather_list = $response['list']; // list配下

// 5日間天気

$response = getWeather('forecast', $area_id);

$weather_list = $response['list']; // list配下

現在の天気データ

現在の天気データ（Current weather data）値一覧

1	2	概要
`coord`	`lon`	経度
`coord`	`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`	風速。単位のデフォルト：メートル/秒、メトリック：メートル/秒、帝国：マイル/時間。
`wind`	`deg`	風向、度（気象）
`clouds`	`all`	曇り、％
`rain`	`1h`	過去1時間の降雨量、mm
`rain`	`3h`	過去3時間の降雨量、mm
`snow`	`1h`	過去1時間の積雪量、mm
`snow`	`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を指定します。

$response_now = getWeather('weather', $area_id);

1	$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']; // 現在の湿度

$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を使います。

<?php get_template_part( '/weather'.'/'.$now_icon ); // svgアイコン ?>

1	<?php get_template_part( '/weather'.'/'.$now_icon ); // svgアイコン ?>

最終完成版ソース

– PHP、HTML

<?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>';
}
?>

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']; // 現在の湿度

地点を切り替える：

<?php foreach($areas as $key => $area): ?>

<?php endforeach; ?>

</select>

</form>

<h2 class="p-now-weather-mh">現在の天気</h2>

<?php get_template_part( '/weather'.'/'.$now_icon ); // svgアイコン ?>

</p>

</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 ): ?>

<?php endif; ?>

<li>

<?php /* <p class="p-icn"><img src="https://openweathermap.org/img/wn/<?php echo $weather_icon; ?>@2x.png" alt="<?php echo $weather; ?>"> */ ?>

</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の色付けなどを行っています。

// 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');
    });
});

// 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');

});

完成サイト

5日間の3時間天気予報

公式APIドキュメントまとめ

5日間3時間天気予報
https://openweathermap.org/forecast5
現在の天気データ
https://openweathermap.org/current
天気詳細（icon、descriptionなど）
https://openweathermap.org/weather-conditions

これを見れば実装できる！PHPで無料のAPI『OpenWeatherMap』を使って天気予報サイト構築を解説

OpenWeatherMapで出来ること

まずはAPI keyを取得

早速リクエストを送り、情報を取得する

ベースURL

何の情報を取得するか

どの都市の情報を取得するか

都市IDを取得

受け取ったデータ

5日間天気予報

5日間天気予報（Call 5 day / 3 hour forecast data）の値一覧

5日間天気予報の値を出力

タイムスタンプ 協定世界時 (UTC)を日本標準時 (JST)に変換

天気説明（description）を日本語に翻訳

アイコンを出力

公式アイコンをそのまま利用

自分で用意したアイコンを利用

ここまでで、5日間3時間天気予報は出来上がりましたね。

ユーザーが見たい都市に切り替えられるようにする

selectボックスを作成

都市IDを動的に取得

try-catchで不正なIDをブロック

値を取得

現在の天気データ

現在の天気データ（Current weather data）値一覧

現在の天気情報を取得、出力

現在の天気情報を取得

現在の天気情報を出力

『Lazy Line Painter』でアイコンをSVGアニメーションさせる

最終 完成版ソース

– PHP、HTML

– JavaScript

完成サイト

公式APIドキュメント まとめ

シェアする

タイムスタンプ協定世界時 (UTC)を日本標準時 (JST)に変換

最終完成版ソース

公式APIドキュメントまとめ