Slide 1

Slide 1 text

天気予報の情報を取得する話 2021年11月16日 (火) IoT縛りの勉強会! IoTLT vol.81 @オンライン   豊田 陽介 ( @youtoy )

Slide 2

Slide 2 text

豊田陽介(@youtoy) 自己紹介 普段は、某通信会社勤務 自宅にたくさん ガジェット好き その他 IT系イベント主催、登壇や運営なども 子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ビジュアルプログラミング・ IoTに関するコミュニティなど

Slide 3

Slide 3 text

余談 最近の取り組みの1つ

Slide 4

Slide 4 text

JavaScriptを使って p5.js による 3D描画 + Anime.js によるイージング等

Slide 5

Slide 5 text

余談2 ヒーローズ・リーグへの 応募作品

Slide 6

Slide 6 text

前に作ったもののバージョン2 某アニメの悪役が使う禁呪法が なんとあなたの手に!

Slide 7

Slide 7 text

今日の話題は 「天気予報情報の取得」

Slide 8

Slide 8 text

何を使う? という話題が定期的に 出る気がする (API廃止とかのタイミングで)

Slide 9

Slide 9 text

よく見かける気がするもの

Slide 10

Slide 10 text

そんな中、 今年の2月ごろに...

Slide 11

Slide 11 text

話題になってた「気象庁の情報の取得」 中の人からこんなツイートがされてた

Slide 12

Slide 12 text

気象庁の天気予報などの 情報が取得できる話

Slide 13

Slide 13 text

もう少し詳しく

Slide 14

Slide 14 text

Webサイトリニューアルが2/24に

Slide 15

Slide 15 text

そしてTwitter上にこのような話が

Slide 16

Slide 16 text

先ほどの2つ目のツイートのURL 天気予報(明後日まで・週 間):https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json 天気概況(明後日まで): https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json 天気概況(週間) :https://www.jma.go.jp/bosai/forecast/data/overview_week/130000.json

Slide 17

Slide 17 text

先ほどの1つ目のURLをブラウザで開く

Slide 18

Slide 18 text

ユーザ登録や APIキー等は不要

Slide 19

Slide 19 text

URLの数字の意味や取得された情報 天気予報(明後日まで・週 間):https://www.jma.go.jp/bosai/forecast/data/forecast/130000. json エリアに対応

Slide 20

Slide 20 text

エリアを指定する数字 https://www.jma.go.jp/bosai/common/const/area.json 一部抜粋 080000 水戸地方気象台 090000 宇都宮地方気象台 100000 前橋地方気象台 110000 熊谷地方気象台 120000 銚子地方気象台 130000 気象庁 140000 横浜地方気象台 190000 甲府地方気象台 200000 長野地方気象台

Slide 21

Slide 21 text

天気予報 3日分・週間

Slide 22

Slide 22 text

気象庁のサイト上 https://www.jma.go.jp/bosai/forecast/ #area_type=offices&area_code=130000 https://www.jma.go.jp/bosai/forecast/ #area_type=offices&area_code=110000 3日間の 天気 1週間の 天気

Slide 23

Slide 23 text

JavaScriptで取得して取り出し

Slide 24

Slide 24 text

取得した情報の中を検索してみたり

Slide 25

Slide 25 text

p5.jsのオンライン開発環境で取得

Slide 26

Slide 26 text

天気に応じた楽しい感じの 描画ができると良いかも

Slide 27

Slide 27 text

このあたりの話はQiitaの記事に

Slide 28

Slide 28 text

M5Stack系のデバイスを 使うと良いかなと思い ググったら

Slide 29

Slide 29 text

いろいろ事例が 出てきたので 何かやってみたいな...

Slide 30

Slide 30 text

終わり!