気象庁WebサイトのJSONを使って、風・気温と降水分布を重ねてみる40の手習い

JavaScriptを避けて通ってきた40歳のおじさんが、気象庁のWebサイトのJSONを読み取って、Web地図上に気象情報を表示できるようになるまでの記録。
31

作ったもの

苦節一ヶ月ちょっとで、なんとか当初の目的を達成する事が出来ました。下記から作ったページを見ることが出来ます。

https://www.kobiwa.net/AMeDASmap/
https://kobiwa.github.io/AMeDAS_Radar/

ことの発端

こびわ⚒ @kobiwa_net

LeafletとかOpenLayersを使って、AMeDASの複数の要素とか解析雨量を重ねられる(添付画像みたいな)地図が表示できるサイトを作りたいと思い至るなど。 とはいえ、現状ではLeafletを使って指定されたピンを立てる位しかできないから、色々と勉強しないといけないなぁと。 pic.twitter.com/lZJiUbaqut

2021-04-01 23:29:33
拡大
こびわ⚒ @kobiwa_net

観測値に応じて表示する画像を変えれば、やろうと思っている事はできそう。 day-journal.com/memo/leaflet-0… 例えば矢羽根の画像を先に作っておいて、風向・風速(・気温)に応じて表示する画像を変えるような芸当とか。 JSONの解読をサーバーでやるかクライアントでやるかとか考えることは多そう。

2021-04-01 23:39:14
こびわ⚒ @kobiwa_net

クライアント側でやるならJavaScriptを、サーバー側でやるならPython・PHPあたりを勉強しないとだなぁ・・・。

2021-04-01 23:39:15

少しずつ始めた

こびわ⚒ @kobiwa_net

気象庁Webサイトを見ながらあれこれ試してるけど、そもそも論としてJavaScriptを勉強しないとあかん感じがするなぁ。例えばvarとletの違いとか、変数のスコープとか、そういう基本的なところから。なんとなく読めるには読めても、書こうと思ったらこの辺はおろそかにできない。 pic.twitter.com/JFJdqJI30S

2021-04-06 23:49:47
拡大
こびわ⚒ @kobiwa_net

(何かしらかの言語でプログラムを書いた経験があるとほかの言語のコードも一応読めるけど、この辺の感覚は欧米人がヨーロッパの別の言語を勉強する感じなのかなぁ?)

2021-04-06 23:49:48
こびわ⚒ @kobiwa_net

(かくいう私ですけど、職業プログラマじゃないから、ビジネスレベルではなく日常会話程度に過ぎないけど。)

2021-04-06 23:50:52
こびわ⚒ @kobiwa_net

この時間にコードを書いたりすると、ガチで寝れなくなるから今日は諦めます🥱😪😴💤

2021-04-06 23:53:21
こびわ⚒ @kobiwa_net

この件に関連して、自習してみたことをBlogに書いた。 [JavaScript]JSONの情報を読み取ってみる & 変数宣言(var, let, const) kobiwa.jp/2021/04/07/pos…

2021-04-08 00:00:47

このあたりは非同期処理に手間取っていた

こびわ⚒ @kobiwa_net

個人的メモ続き kobiwa.net/Training_JS/03… 夜更かししてしまった(´っω-`)

2021-04-15 00:59:34

思い通りに動き始めた

こびわ⚒ @kobiwa_net

ここのところ、JavaScriptを勉強しながら気象庁WebサイトのJSONを取得する練習をしてました。 第一段階として、データを表形式で取得できるようになった。 kobiwa.net/Training_JS/04… 次は、取得したデータからGeoJSONを作成かな。 (謝辞)下記サイトを参考にさせて頂きました。 qiita.com/e_toyoda/items… twitter.com/kobiwa_net/sta…

2021-04-16 13:01:10
こびわ⚒ @kobiwa_net

(JavaScriptはHTMLに埋め込んでいるので、ソース表示すれば全部見れるはず。)

2021-04-16 13:01:47

目処が立つと手が止まってしまうのが悪い癖

こびわ⚒ @kobiwa_net

AMeDASのデータを読み取る事が出来るようになったので、Leafletを使って観測点の位置をPlotするようにしてみた。 kobiwa.net/Training_JS/06… ↑から左上の「取得」を押すと観測点の位置にピンが刺さる。Popupが上手く動いてないけど、地物(ピン)の中には観測値(気温)が入ってる。

2021-04-17 11:32:12

半月ぶりの再会

こびわ⚒ @kobiwa_net

連休中にどこにも行けないのと、昨日のサイクリングで疲れているので久しぶりにJavaScriptのお勉強している。 半月ちょっと前に自分で書いたコードを読むのに四苦八苦、てかコードが汚い(´・ω・`) twitter.com/kobiwa_net/sta…

2021-05-04 16:14:34
こびわ⚒ @kobiwa_net

Popupが上手く動かなかったのが直った♪ kobiwa.net/Training_JS/06…

2021-05-04 17:30:55