UIFlow の HTTPリクエスト のブロックで気象庁公式の天気予報の情報（JSON）を取得

以前、JavaScript やコマンドで扱ったことがあった「気象庁公式の天気予報情報（JSON で取得できるもの）」を、UIFlow で扱ってみた時のメモです。
なお、以前やった内容は、以下の記事で手順などを書いていたりします。

• 気象庁公式の天気予報の情報（JSON）を curl・Node.js で取得し Node.js での処理を試す - Qiita
• curl で取得した気象庁公式の天気予報の情報（JSON）を jqコマンドで処理する - Qiita
• 気象庁公式の天気予報の情報を Node.js で取得し中身を検索する（ライブラリに Got を用いる） - Qiita
• p5.js Web Editor上に気象庁の天気予報情報を表示してみる（HTTPリクエストには axios を利用） - Qiita

取得するデータの内容

今回扱う「気象庁公式の天気予報情報」に関しては、内容に関する補足などを以下の記事（冒頭で掲載していた 4つの中の 1つ目）に書いています。

●気象庁公式の天気予報の情報（JSON）を curl・Node.js で取得し Node.js での処理を試す - Qiita
　https://qiita.com/youtoy/items/932bc48b03ced5a45c71

HTTPリクエストで取得するデータ

そこで以下のように書いていた、埼玉の天気情報を使うことにします。

上記のとおり https://www.jma.go.jp/bosai/forecast/data/forecast/110000.json という URL を指定することで取得できます。
（簡単にこのデータの内容を確かめてみる方法として、ブラウザの URL欄にこれを入力する方法があります）

パースをして取り出すデータ

先ほどの URL を用いて取得できるデータの中で、今回は以下の「weatherCodes」の2番目の値を取得してみることにします。

今回の記事執筆時点で、その値がどうなっているかを、以下の記事（冒頭で掲載していた 4つの中の 2つ目）に書いた方法で確かめておきます。

●curl で取得した気象庁公式の天気予報の情報（JSON）を jqコマンドで処理する - Qiita
　https://qiita.com/youtoy/items/db5b515d400d2aa96420

curl 'https://www.jma.go.jp/bosai/forecast/data/forecast/110000.json' | jq .[0].timeSeries[0].areas[0].weatherCodes[2] というコマンドを実行してみます。

上記の画像のとおり、「201」という数字が得られる部分です。

気象庁のページ上でも確かめてみる

ちなみに、埼玉の天気予報を掲載している気象庁のページでは、以下に該当する部分です。

UIFlow で天気予報の情報を取得する

それでは、UIFlow で上記の「weatherCode」を取得してみることにします。

作成したブロックのプログラム

作成したブロックのプログラムはこのような感じです。

M5StickC Plus の画面上に、情報表示用のラベルを 1つ配置しています。
そして、Aボタンの押下をトリガーとしてHTTPリクエストを実行するような処理を、ブロックで組んでいます。
（あと、見た目で処理中の流れが分かるよう、ディスプレイの色を変える処理も加えています）

HTTPリクエストにより取得した JSON は、以下の処理を行って、先ほど curl で取り出してみていたのと同じ部分のコードを取得しています。

なお、見た目を分かりやすくするために、変数を多用した多段の処理にしています。

jqコマンドでの取得だと jq .[0].timeSeries[0].areas[0].weatherCodes[2] という、短い処理ですむのですが...

別の部分を取り出した事例

それと、上記とは別の部分を取り出した事例があるので、それも掲載しておきます。

#UIFlow の HTTPリクエストのブロックで取得した JSON、JavaScript だと「jsonData[0].timeSeries[1].areas[0].pops[2]」という感じで取得している値がこうなるのか...
（見た目の都合で、変数を多用した形ではあるけれど...）#M5Stack pic.twitter.com/QL3EX2ykkm

— you (@youtoy) March 6, 2022