１４．夜アイコンの表示の仕方
気象庁の今日の天気予報では、夜になると月アイコンの表示に変わります。
それに伴い表示も、今日の天気から今夜の天気になります。
昼夜変更時刻を１７時以降、翌朝５時までを夜として、設定します。
その天気テロップコードは、以下になります。
<?php
// 夜間天気アイコン
date_default_timezone_set('Asia/Tokyo'); //日本時間を指定
// 現在の時間を取得
$currentHour = date('G'); // 24時間形式の時間（0-23）
// 夜間かどうかを判定
$isNight = ($currentHour >= 17 || $currentHour < 5); // 17時から翌朝5時までを夜間とする
// 今日、今夜の天気設定
$todayweather = '';
if($isNight){
$todayweather = '今夜の天気';
}else{
$todayweather = '今日の天気';
}
// 天気コードに対応する夜間バージョンの画像を取得
$weatherImages = [
100 => ["100.svg", "500.svg"], // 晴れ
101 => ["101.svg", "501.svg"], // 晴れ時々曇り
102 => ["102.svg", "502.svg"], // 晴れ一時雨
103 => ["102.svg", "502.svg"], // 晴れ時々雨
104 => ["104.svg", "504.svg"], // 晴れ一時雪
105 => ["104.svg", "504.svg"], // 晴れ時々雪
106 => ["102.svg", "502.svg"], // 晴れ一時雨か雪
107 => ["102.svg", "502.svg"], // 晴れ時々雨か雪
108 => ["102.svg", "502.svg"], // 晴れ一時雨か雷雨
110 => ["110.svg", "510.svg"], // 晴れ後時々曇り
111 => ["110.svg", "510.svg"], // 晴れ後曇り
112 => ["112.svg", "512.svg"], // 晴れ後一時雨
113 => ["112.svg", "512.svg"], // 晴れ後時々雨
114 => ["112.svg", "512.svg"], // 晴れ後雨
115 => ["115.svg", "515.svg"], // 晴れ後一時雪
116 => ["115.svg", "515.svg"], // 晴れ後時々雪
117 => ["115.svg", "515.svg"], // 晴れ後雪
118 => ["112.svg", "512.svg"], // 晴れ後雨か雪
119 => ["112.svg", "512.svg"], // 晴れ後雨か雷雨
120 => ["102.svg", "502.svg"], // 晴れ朝夕一時雨
121 => ["102.svg", "502.svg"], // 晴れ朝の内一時雨
122 => ["112.svg", "512.svg"], // 晴れ夕方一時雨
123 => ["100.svg", "500.svg"], // 晴れ山沿い雷雨
124 => ["100.svg", "500.svg"], // 晴れ山沿い雪
125 => ["112.svg", "512.svg"], // 晴れ午後は雷雨
126 => ["112.svg", "512.svg"], // 晴れ昼頃から雨
127 => ["112.svg", "512.svg"], // 晴れ夕方から雨
128 => ["112.svg", "512.svg"], // 晴れ夜は雨
130 => ["100.svg", "500.svg"], // 朝の内霧後晴れ
131 => ["100.svg", "500.svg"], // 晴れ明け方霧
132 => ["101.svg", "501.svg"], // 晴れ朝夕曇り
140 => ["102.svg", "502.svg"], // 晴れ時々雨と雷
160 => ["104.svg", "504.svg"], // 晴れ一時雪か雨
170 => ["104.svg", "504.svg"], // 晴れ時々雪か雨
181 => ["115.svg", "515.svg"], // 晴れ後雪か雨
200 => ["200.svg", "200.svg"], // 曇り
201 => ["201.svg", "601.svg"], // 曇り時々晴れ
202 => ["202.svg", "202.svg"], // 曇り一時雨
203 => ["202.svg", "202.svg"], // 曇り時々雨
204 => ["204.svg", "204.svg"], // 曇り一時雪
205 => ["204.svg", "204.svg"], // 曇り時々雪
206 => ["202.svg", "202.svg"], // 曇り一時雨か雪
207 => ["202.svg", "202.svg"], // 曇り時々雨か雪
208 => ["202.svg", "202.svg"], // 曇り一時雨か雷雨
209 => ["200.svg", "200.svg"], // 霧
210 => ["210.svg", "610.svg"], // 曇り後時々晴れ
211 => ["210.svg", "610.svg"], // 曇り後晴れ
212 => ["212.svg", "212.svg"], // 曇り後一時雨
213 => ["212.svg", "212.svg"], // 曇り後時々雨
214 => ["212.svg", "212.svg"], // 曇り後雨
215 => ["215.svg", "215.svg"], // 曇り後一時雪
216 => ["215.svg", "215.svg"], // 曇り後時々雪
217 => ["215.svg", "215.svg"], // 曇り後雪
218 => ["212.svg", "212.svg"], // 曇り後雨か雪
219 => ["212.svg", "212.svg"], // 曇り後雨か雷雨
220 => ["202.svg", "202.svg"], // 曇り朝夕一時雨
221 => ["202.svg", "202.svg"], // 曇り朝の内一時雨
222 => ["212.svg", "212.svg"], // 曇り夕方一時雨
223 => ["201.svg", "601.svg"], // 曇り日中時々晴れ
224 => ["212.svg", "212.svg"], // 曇り昼頃から雨
225 => ["212.svg", "212.svg"], // 曇り夕方から雨
226 => ["212.svg", "212.svg"], // 曇り夜は雨
228 => ["215.svg", "215.svg"], // 曇り昼頃から雪
229 => ["215.svg", "215.svg"], // 曇り夕方から雪
230 => ["215.svg", "215.svg"], // 曇り夜は雪
231 => ["200.svg", "200.svg"], // 曇り海岸霧か霧雨
240 => ["202.svg", "202.svg"], // 曇り時々雨と雷
250 => ["204.svg", "204.svg"], // 曇り時々雪と雷
260 => ["204.svg", "204.svg"], // 曇り一時雪か雨
270 => ["204.svg", "204.svg"], // 曇り時々雪か雨
281 => ["215.svg", "215.svg"], // 曇り後雪か雨
300 => ["300.svg", "300.svg"], // 雨
301 => ["301.svg", "701.svg"], // 雨時々晴れ
302 => ["302.svg", "302.svg"], // 雨時々止む
303 => ["303.svg", "303.svg"], // 雨時々雪
304 => ["300.svg", "300.svg"], // 雨か雪
306 => ["300.svg", "300.svg"], // 大雨
308 => ["308.svg", "308.svg"], // 雨で暴風を伴う
309 => ["303.svg", "303.svg"], // 雨一時雪
311 => ["311.svg", "711.svg"], // 雨後晴れ
313 => ["313.svg", "313.svg"], // 雨後曇り
314 => ["314.svg", "314.svg"], // 雨後時々雪
315 => ["314.svg", "314.svg"], // 雨後雪
316 => ["311.svg", "711.svg"], // 雨か雪後晴れ
317 => ["313.svg", "313.svg"], // 雨か雪後曇り
320 => ["311.svg", "711.svg"], // 朝の内雨後晴れ
321 => ["313.svg", "313.svg"], // 朝の内雨後曇り
322 => ["303.svg", "303.svg"], // 雨朝晩一時雪
323 => ["311.svg", "711.svg"], // 雨昼頃から晴れ
324 => ["311.svg", "711.svg"], // 雨夕方から晴れ
325 => ["311.svg", "711.svg"], // 雨夜は晴れ
326 => ["314.svg", "314.svg"], // 雨夕方から雪
327 => ["314.svg", "314.svg"], // 雨夜は雪
328 => ["300.svg", "300.svg"], // 雨一時強く降る
329 => ["300.svg", "300.svg"], // 雨一時みぞれ
340 => ["400.svg", "400.svg"], // 雪か雨
350 => ["300.svg", "300.svg"], // 雨で雷を伴う
361 => ["411.svg", "811.svg"], // 雪か雨後晴れ
371 => ["413.svg", "413.svg"], // 雪か雨後曇り
400 => ["400.svg", "400.svg"], // 雪
401 => ["401.svg", "801.svg"], // 雪時々晴れ
402 => ["402.svg", "402.svg"], // 雪時々止む
403 => ["403.svg", "403.svg"], // 雪時々雨
405 => ["400.svg", "400.svg"], // 大雪
406 => ["406.svg", "406.svg"], // 風雪強い
407 => ["406.svg", "406.svg"], // 暴風雪
409 => ["403.svg", "403.svg"], // 雪一時雨
411 => ["411.svg", "811.svg"], // 雪後晴れ
413 => ["413.svg", "413.svg"], // 雪後曇り
414 => ["414.svg", "414.svg"], // 雪後雨
420 => ["411.svg", "811.svg"], // 朝の内雪後晴れ
421 => ["413.svg", "413.svg"], // 朝の内雪後曇り
422 => ["414.svg", "414.svg"], // 雪昼頃から雨
423 => ["414.svg", "414.svg"], // 雪夕方から雨
425 => ["400.svg", "400.svg"], // 雪一時強く降る
426 => ["400.svg", "400.svg"], // 雪後みぞれ
427 => ["400.svg", "400.svg"], // 雪一時みぞれ
450 => ["400.svg", "400.svg"], // 雪で雷を伴う
];
$nightImage = $weatherImages[$today_code][$isNight ? 1 : 0]; // 夜間バージョンの画像を取得
$nurl = "https://www.jma.go.jp/bosai/forecast/img/{$nightImage}";
<h2><?php echo $todayweather;?></h2>
<?php echo "<img src=\"$nurl\">";?>
?>
気象庁の天気アイコンをそのまま利用します。
<?php
// 天気コードに対応する夜間バージョンの画像を取得
$weatherImages = [
100 => ["100.svg", "500.svg"], // 晴れ
101 => ["101.svg", "501.svg"], // 晴れ時々曇り
// 他の天気コードに対応する画像もここに追加
];
?>
連想配列に、100と言う天気コードに対応する、 [“100.svg”, “500.svg”]の2つの画像ファイル名が配列で格納されています。
100.svgが、昼
500.svgが、夜
のアイコンになります。
その判別を下記コードで、行っています。
<?php
// 夜間かどうかを判定
$isNight = ($currentHour >= 17 || $currentHour < 5); // 17時から翌朝5時までを夜間とする
$nightImage = $weatherImages[$today_code][$isNight ? 1 : 0]; // 夜間バージョンの画像を取得
?>
条件式 ［$isNight ? 1 : 0］によって、夜間であれば配列の1番目（夜間用の画像）、そうでなければ配列の0番目（通常の画像）が選択されます。
14-1.夜アイコンの表示
<?php
$nurl = "https://www.jma.go.jp/bosai/forecast/img/{$nightImage}"; //気象庁サイトより天気アイコン画像の取得
<?php echo "<img src=\"$nurl\">";?> //画像の表示
?>
気象庁のサイトより、直接天気アイコン画像を取得しています。
この方法だと、天気アイコンを一括でダウンロードする必要もなく、夜アイコンの表示も簡単です。
しかし、ここまでやり抜いたあなたは、正しく勇者です‼️
よくぞここまで、辿り着きましたね‼️
今後は、雨雲レーダーのアニメーション化や、台風情報などに挑戦してみたいと思います。
乞うご期待‼️