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

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

- [気象庁公式の天気予報の情報（JSON）を curl・Node.js で取得し Node.js での処理を試す - Qiita](https://qiita.com/youtoy/items/932bc48b03ced5a45c71)
- [curl で取得した気象庁公式の天気予報の情報（JSON）を jqコマンドで処理する - Qiita](https://qiita.com/youtoy/items/db5b515d400d2aa96420)
- [気象庁公式の天気予報の情報を Node.js で取得し中身を検索する（ライブラリに Got を用いる） - Qiita](https://qiita.com/youtoy/items/c7dba010ab7d0763e879)
- [p5.js Web Editor上に気象庁の天気予報情報を表示してみる（HTTPリクエストには axios を利用） - Qiita](https://qiita.com/youtoy/items/1a8ba048a3798c7875a6)

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

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

### HTTPリクエストで取得するデータ
そこで以下のように書いていた、埼玉の天気情報を使うことにします。

![埼玉の展開.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5f4afcd3-45e0-7960-49bb-027f358a3851.jpeg)

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

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

![JSONの中で取得してみる部分.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/319a0d65-aefa-9c42-8e54-7a8018f23dd5.jpeg)

今回の記事執筆時点で、その値がどうなっているかを、以下の記事（冒頭で掲載していた 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]` というコマンドを実行してみます。
![curlで取得したデータ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/770f39bc-4c38-c5f5-c4a0-b4656652413c.jpeg)

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

#### 気象庁のページ上でも確かめてみる
ちなみに、[埼玉の天気予報を掲載している気象庁のページ](https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=110000)では、以下に該当する部分です。
![取得した天気の情報（気象庁のページ）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/43583578-5a39-c4d3-abc5-771e6c91c94e.jpeg)

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

#### 作成したブロックのプログラム
作成したブロックのプログラムはこのような感じです。
![UIFlowのプログラム（weatherCodeの取得）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dacd7e8e-87b9-da3a-a0f0-1d177df95ff1.jpeg)

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

HTTPリクエストにより取得した JSON は、以下の処理を行って、先ほど curl で取り出してみていたのと同じ部分のコードを取得しています。
![UIFlowのプログラム（weatherCodeの取得）の一部抜粋.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dc2b8a9f-6975-1f94-6d07-5c16ba6c42f2.jpeg)

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

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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> の HTTPリクエストのブロックで取得した JSON、JavaScript だと「jsonData[0].timeSeries[1].areas[0].pops[2]」という感じで取得している値がこうなるのか...<br>（見た目の都合で、変数を多用した形ではあるけれど...）<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/QL3EX2ykkm">pic.twitter.com/QL3EX2ykkm</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1500497215168860161?ref_src=twsrc%5Etfw">March 6, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> の HTTPリクエストのブロックで、気象庁公式の天気予報の情報（JSON）を取得して、<br>さらにその中の weatherCodes の一部を取り出してみる。<br><br>201 というコードが得られるはずで、その通りの結果になった。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/ITjollF2oN">pic.twitter.com/ITjollF2oN</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1500507288335163394?ref_src=twsrc%5Etfw">March 6, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

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

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

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

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

```bash
# 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"
```

上記を実行してみた際の画面キャプチャは、以下のとおりです。
![httpとhttpsでコマンド実行.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/15f87c98-fea9-365e-4ba3-1634567fbac2.jpeg)

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