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

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

取得するデータの内容

今回扱う「気象庁公式の天気予報情報」に関しては、内容に関する補足などを以下の記事（冒頭で掲載していた 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

こちらは以前、JavaScript で取得する処理を書いたことがあるものなのですが、その時は jsonData[0].timeSeries[1].areas[0].pops[2] という感じで短く書けていた部分...

作成したプログラムを実行した結果

上記のプログラムを実際に動かしてみた時の動画を掲載しておきます。
地味な内容ですが、ボタン押下後に、M5StickC Plus の画面上に「201」というコードが表示されているのが確認できます。

#UIFlow の HTTPリクエストのブロックで、気象庁公式の天気予報の情報（JSON）を取得して、
さらにその中の weatherCodes の一部を取り出してみる。

201 というコードが得られるはずで、その通りの結果になった。#M5Stack pic.twitter.com/ITjollF2oN
— you (@youtoy) March 6, 2022

おわりに

今回、UIFlow の HTTPリクエストのブロックを使って、気象庁公式の天気予報の情報（JSON）を取得してみました。

jqコマンドや JavaScript で書けば短くすむ部分が、それと比較するとややこしい感じになったのはありつつ、デバイス単体で完結する構成は良い感じではありました。

参考にした情報

今回、UIFlow で JSON のパースをするにあたり、以下の記事を参考にしたりしました。

●第9回 - インターネット編【PLEN5Stackでプログラミング学習】｜PLEN｜note
　https://note.com/plenproject/n/ncd935f974443

【追記】天気予報の情報取得について

こちらについて、「http での情報取得をやろうとした場合に、データが取得できない」とのコメントを SNS 投稿に対していただき（2022年3月21日ごろ）、curl で確認したらその挙動が自分の手元でも確認できました。

以下のコマンドでそれぞれ確認しました。

# http
curl -X GET "http://www.jma.go.jp/bosai/forecast/data/forecast/110000.json"
# https
curl -X GET "https://www.jma.go.jp/bosai/forecast/data/forecast/110000.json"

上記を実行してみた際の画面キャプチャは、以下のとおりです。

そして、記事内では UIFlow で https で指定していたものの、意図通りに動くかを確認しました。
「M5StickC Plus のファームウェア v1.9.4」で試したら、問題なく動作しているようでした。

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