Upgrade to Pro — share decks privately, control downloads, hide ads and more …

天気予報の情報を取得する話 / IoTLT vol.81

天気予報の情報を取得する話 / IoTLT vol.81

you(@youtoy)

November 16, 2021
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. JavaScriptを使って
    p5.js による 3D描画

    Anime.js によるイージング等

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. もう少し詳しく

    View Slide

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

    View Slide

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

    View Slide

  16. 先ほどの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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. 天気予報
    3日分・週間

    View Slide

  22. 気象庁のサイト上
    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週間の
    天気

    View Slide

  23. JavaScriptで取得して取り出し

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. 終わり!

    View Slide