６．天気図の表示の仕方
6-1.天気図画像ファイル名取得用URL
データJSON取得URL：https://www.jma.go.jp/bosai/weather_map/data/list.json
カラー天気図のデータ配列は、下記内容になります。
Array ( [near] => Array ( [now] => Array (
[0] => 20220629021230_0_Z__C_010000_20220629000000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[1] => 20220629051301_0_Z__C_010000_20220629030000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[2] => 20220629080530_0_Z__C_010000_20220629060000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[3] => 20220629110031_0_Z__C_010000_20220629090000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[4] => 20220629141000_0_Z__C_010000_20220629120000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[5] => 20220629200130_0_Z__C_010000_20220629180000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[6] => 20220629230031_0_Z__C_010000_20220629210000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[7] => 20220630020930_0_Z__C_010000_20220630000000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[8] => 20220630050400_0_Z__C_010000_20220630030000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[9] => 20220630081330_0_Z__C_010000_20220630060000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[10] => 20220630110300_0_Z__C_010000_20220630090000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[11] => 20220630141301_0_Z__C_010000_20220630120000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[12] => 20220630201400_0_Z__C_010000_20220630180000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[13] => 20220630230030_0_Z__C_010000_20220630210000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[14] => 20220701020800_0_Z__C_010000_20220701000000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[15] => 20220701050301_0_Z__C_010000_20220701030000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[16] => 20220701080730_0_Z__C_010000_20220701060000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[17] => 20220701110330_0_Z__C_010000_20220701090000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[18] => 20220701140801_0_Z__C_010000_20220701120000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[19] => 20220701200330_0_Z__C_010000_20220701180000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[20] => 20220701230330_0_Z__C_010000_20220701210000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png
[21] => 20220702020900_0_Z__C_010000_20220702000000_MET_CHT_JCIspas_JCP600x581_JRcolor_Tjmahp_image.png )
[ft24] => Array ( [0] => 20220701190200_0_Z__C_010000_20220701120000_MET_CHT_JCIfsas24_Rjp_JCP600x581_JRcolor_Tjmahp_image.png )
[ft48] => Array ( [0] => 20220701190331_0_Z__C_010000_20220701120000_MET_CHT_JCIfsas48_Rjp_JCP600x581_JRcolor_Tjmahp_image.png ) )
6-2.天気図表示のPHPコード
具体的なコードは、下記内容になります。
<?php
$url = "https://www.jma.go.jp/bosai/weather_map/data/list.json";
$json = file_get_contents($url);
$data = json_decode($json,true);
$weather_map = $data['near']['now'][21];
$weather_map1 = $data['near']['ft24'][0];
$weather_map2 = $data['near']['ft48'][0];
$url2 = "https://www.jma.go.jp/bosai/weather_map/data/png/{$weather_map}";
$weather_map3 = file_get_contents($url2);
$url3 = "https://www.jma.go.jp/bosai/weather_map/data/png/{$weather_map1}";
$weather_map4 = file_get_contents($url3);
$url4 = "https://www.jma.go.jp/bosai/weather_map/data/png/{$weather_map2}";
$weather_map5 = file_get_contents($url4);
header('Content-type: image/png');
echo $weather_map3;
echo $weather_map4;
echo $weather_map5;
?>
カラー天気図の最新の実況天気図は、21番目のものになります。
$weather_map = $data['near']['now'][21];
カラー天気図の24時間予想天気図は、下記になります。
$weather_map1 = $data['near']['ft24'][0];
カラー天気図の48時間予想天気図は、下記になります。
$weather_map2 = $data['near']['ft48'][0];
天気図画像ファイル名取得用URL：
https://www.jma.go.jp/bosai/weather_map/data/png/{天気図画像ファイル名}
$url2 = "https://www.jma.go.jp/bosai/weather_map/data/png/{$weather_map}";
HTTPヘッダで、「これは画像です」ということを宣言してファイルを読み込みます。
header('Content-type: image/png');
echo $weather_map3;
echo $weather_map4;
echo $weather_map5;
PHPコードだけの天気図画像表示は、上記のコードだけで可能です。
しかしHTML/CSSでの画像出力は、更に工夫が必要で次の項目でご説明します。
6-3.PHPでbase64の使い方
①base64とは
base64は英数字(64種類)を使用するデータの形式を変更方法の一種です。
base64を用いてデータの形式を変更したり、元に戻したりする事ができます。
②encode(エンコード)とは
encodeはデータの形式を変更する事です。
符号化と呼ばれる場合もあります。
一度encodeしたデータを元に戻す事もできます。
③decode(デコード)とは
データの形式を変更(encode)した後、元に戻す事をdecodeと呼びます。
④imageのencodeを行う
HTML/CSSを付け加えた場合は、そのまま echo で画像を表示することはできません。
以下の様に 、base64 エンコード化して img タグに設定する必要があります。
<?php
$url2 = "https://www.jma.go.jp/bosai/weather_map/data/png/{$weather_map}";
$weather_map3 = file_get_contents($url2);
$img = base64_encode($weather_map2);
?>
<img src="data:image/jpg;base64,<?php echo $img; ?>">
当サイトでは、プラグインを使わずWordPressにSwiperを使ってスライダーを作っています。