気象庁天気予報JSONを取得して天気予報を表示させてみた

半年以上ぶりの久々の投稿です。
今回は、気象庁ホームページから天気予報JSONデータを取得し、ESP32やM5Stackを使ったArduinoプログラミングで今日と明日の天気予報を表示させることができたので報告したいと思います。

実は、去年の夏頃から諸事情でいろいろと忙しくなり、電子工作もプログラミングも殆どできなくなりました。
今後もウクライナ情勢の悪化やコロナ情勢で物価上昇して生活も益々苦しくなってきて、とにかく自分みたいな貧乏人には辛いだけの日々。いつまで続くことやらって感じです。

さて、実はTwitterでもつぶやいていましたが、ここ数か月はESP32やM5Stackから離れ、ラズパイでLinuxとPythonを使ってWebサーバーを構築して、細々と実験していました。
その時に Visual Studio 2019 や Visual Studio Code素晴らしさを知って、感動しまくっていました。さらにラズパイもほんと素晴らし過ぎて、何で今まで使わなかったんだろうと後悔するほどでした。
本来はこれらについてブログを書きたかったんですが、時間に余裕が無くて全然手を付けられない状態でした。

そんなこんなですが、実は、今までこのブログで紹介してきたYahoo! Japan RSS 天気予報が2022/03/31で配信終了してしまい、自分の作ったM5Stack電光掲示板に天気予報が表示されなくなってしまったんです。ショック！！！
困っていたところ、Twitterでたなかまさゆきさんから、「気象庁のWebサイトからJSONデータを取得できる」という有益な情報を教えて頂きました。
いつもありがとうございま～す。m(_ _)m

それで実際にやってみると、なかなか手間取りましたね。
client.available() を使うと取得できなかったり、Arduino core ESP32 のバージョンによってフォントが表示されなかったりと、、、。

いろいろ苦戦しましたが、ようやく気象庁サイトから天気予報JSONデータを取得できて、過去の自分の自作ライブラリも完全移行できたので、ここで報告しておきます。

なお、いつも言っておりますが、私はプログラミングに関しては素人ですので、誤り等ありましたらコメント投稿でご連絡いただけると助かります。
ここで掲載するコードは無保証です。

【目次】

1. 気象庁のサイトから天気予報JSONデータの取得方法
   • ブラウザで地域コード一覧JSONデータを取得する
   • 自分の地方のofficeコードを確認する
   • 自分の地域の天気予報JSONデータを取得し、areaコードをメモっておく
2. 天気予報JSONデータから今日と明日の天気予報コード(weatherCode)を抽出する
3. weatherCodesを天気アイコンを基に分類
4. ESP32開発ボードでArduinoプログラミングしてみる
   • 使用したもの
   • 予め、Arduino core for the ESP32 をインストールしておく
   • 気象庁ホームページのルートCA証明書の公開鍵を取得しておく
   • スケッチ（サンプルプログラム）
   • コンパイル書き込み、実行
5. （おまけ）降水確率について
6. 過去のM5Stack版Yahoo! ニュース電光掲示板コードを天気予報を気象庁に移行
   • 自作ライブラリを beta ver 1.0.81 に更新する
   • Arduino core for the ESP32 のバージョンに注意。(ver 2.0.2は動作不良なので注意)
   • 修正版サンプルスケッチ
     • M5Stack Yahoo電光掲示板の修正プログラム
     • M5Stack 電波時計合わせYahoo電光掲示板の修正プログラム
7. まとめ

気象庁のサイトから天気予報JSONデータの取得方法

実は、気象庁のサイトではプログラマが利用できるAPIは今の時点では公式リリースされていないそうです。
どうやら、賢い先人がJSONを取得してしまって、ネット上に情報が流れたのでしょうか？

というわけで、JSON取得方法は以下の２つのサイトを参考にさせていただきました。

https://qiita.com/michan06/items/48503631dd30275288f7

https://news.mynavi.jp/techplus/article/excelvbaweb-3/

これらにも書かれていましたが、気象庁ホームページの情報を利用する場合は、利用規約に従う必要があります。

気象庁ホームページ利用規約

ブラウザで地域コード一覧JSONデータを取得する

ブラウザで JSONデータ取得できるか確認します。

まず、以下のURLをブラウザのURL入力欄に入力します。
これは、気象庁が提供している地域コード一覧JSONデータです。

（気象庁ホームページより）
https://www.jma.go.jp/bosai/common/const/area.json

すると、以下の様な感じで表示されます。

(図01)

気象庁ホームページからブラウザでarea.jsonを表示

自分の地方のofficeコードを確認する

上記の地域コード一覧JSONデータをVisual Studio Code (VSCode) 等のエディタやJSON整形ツールにコピペして、データを見やすくします。

そして、以下のように”offices”というキーワードを検索します。
北海道の宗谷地方ならば、下図の様な部分のコード”011000”をメモっておきます。

（図02）

気象庁ホームページからarea.jsonを取り込んで整形表示

東京都ならば、下図の様に130000となります。
このコードは必ず６桁です。

（図03）

area.json中の東京都を表示

自分の地域の天気予報JSONデータを取得し、areaコードをメモっておく

上記の自分の地方のofficeコードを確認したら、それを使って自分の地域の天気予報JSONデータを取得します。
以下のURLのxxxxxx部分にofficeコードを入力して、ブラウザのURLに入力してGETします。

https://www.jma.go.jp/bosai/forecast/data/forecast/xxxxxx.json

東京都の場合のURLは以下のようになります。
https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json>

すると、下図のように表示されると思います。

（図04）（東京都の場合のURL）

気象庁ホームページから取得した東京地方(130000.json)のJSONデータ

そうしたら、同じようにこのテキスト全体をVSCodeなどのエディタにコピペして、JSONコード整形します。

そして、下図の様に”areas”の項目の”area”にある、自分の地域のコードをメモっておきます。ただ、例えば東京都の場合、下の方をスクロールしてみると東京地方中に伊豆諸島北部や伊豆諸島南部、小笠原諸島なども同梱されているので、自分の欲しい地域のエリアコードをメモっておきます。天気予報コード(weatherCodes)は後で紹介するプログラミングで必要になりますが、ここでは特にメモらなくて良いです。あとで詳しく説明します。

（図05）

東京 130000.json中のweatherCodesを検索したところ

残念ながら、もっと詳細な地域（例えば新宿区）の天気予報などは現時点では取得できませんでした。officesコードで取得した地域の天気予報だけでした。

以前、このブログで紹介したYahoo RSS天気予報を取得した時は、天気予報の文章を取得して、その文字列から天気アイコンに変換していましたが、”weathers”の項目にあるように、文章が複雑すぎて、それから天気アイコンに変換するのは現実的ではありません。

その代わり、”weatherCodes”を使えば、天気アイコンに変換するプログラミングは作り易そうなので、それでやってみることにしました。

天気予報JSONデータから今日と明日の天気予報コード(weatherCode)を抽出する

ここでは、weatherCodeの抽出方法の概要を説明します。Arduinoコードは後で紹介します。

上記の気象庁から取得したJSONデータをよく見てみると、weatherCodesと天気アイコンと紐づければ良さそうです。
先に取得した自分の地域のエリアコードのweatherCodesを抽出するには、ネットの情報ではArduino JSONライブラリを使うと良いらしいのですが、今回はそれを使わない方法を模索してみます。

JSONデータを一気に文字列データとして取得するとメモリを喰いすぎるため、鍵閉じ括弧’]’までの文字列を関数 client.readStringUntil を 使って逐次取得します。
そして、その文字列中から以下の文字列をキーワードとして関数 string.indexOf を使って検索することにしました。
xxxxxxのところに自分の地域のareaコードを入れ込みます。

（例：東京都の場合）
"code":"xxxxxx"},"weatherCodes":["

このキーワードにマッチして検出した文字列は以下のようになります。

,"areas":[{"area":{"name":"東京地方","code":"130010"},"weatherCodes":["300","201","201"]

これからweatherCodesの数値文字列を取得し、数値に変換すれば良いわけです。
weatherCodesは左から順番に、今日、明日、明後日という順番に天気予報コードが並んでいます。
この場合、
今日の weatherCode = 300
明日の weatherCode = 201
明後日の weatherCode = 201
となります。

weatherCodesを天気アイコンを基に分類

上記の weatherCode を使って、液晶ディスプレイやM5Stackに天気アイコンを表示させるためには、weatherCode を天気アイコンと紐づけます。
weatherCodeの意味は以下の記事を参考にさせて頂きました。

https://www.t3a.jp/blog/web-develop/weather-code-list/

ただ、これだと種類が多く、プログラミングしにくいので、アイコンファイルごとにExcelを使って分類しました。
こんな感じです。

（図06）以下の画像には気象庁ホームページのアイコンの一部を貼り付けています。

weatherCodeをExcelで分類してみた

これでプログラミングする目途が立ちました。
では、次ページでは実際にArduinoプログラミングしてみます。