[PYTHON] I made a Chrome extension that displays a graph on an AMeDAS page

Extension "Amedos"


Chrome Web Store GitHub

What you can do

--Amedas hourly observation data page of the Japan Meteorological Agency (Example: [Tokyo]](https://www.jma.go.jp/jp/amedas_h/today-44132.html?areaCode=000&groupCode=30 )) ** Display the graph **. The displayed contents are the temperature of today and yesterday, and the precipitation of today or yesterday. --Display ** links to past observation data ** above the graph. Now you can easily jump to the past weather data search page for that location. By the way, the date of the previous day has already been selected!


How to make

Graph: Chart.js

Chart.js | Open source HTML5 Charts for your website

I used it to draw a graph.

Search past weather data: Create correspondence table

** The AMeDAS observatory number and the observatory code for past meteorological data retrieval are different **, so it was necessary to associate the two.

You can find the observatory number at that point from the URL of the observation data page every hour. The list can be downloaded as csv from Japan Meteorological Agency | About AMeDAS.

On the other hand, the observatory code of the past meteorological data search does not have a mechanism to be seen in the list as far as I searched, so I made a list by ** scraping ** by Python.

The observatory code is represented by a combination of prec_no and block_no. Japan Meteorological Agency | Past Meteorological Data Search From the source, you can see the list of prec_no.


You can see block_no at each link.


I made a list by scraping these pages. I used Beautiful Soup for scraping and operated it on Jupyter Lab.

Beautiful Soup Documentation — Beautiful Soup 4.9.0 documentation

After that, the correspondence table is completed by inner joining the two tables. There are two keys, the prefectural promotion bureau and the name of the observatory. I output it in json format and import it.

Reason and impression of making

My hobby is to watch AMeDAS on a regular basis, and especially in the recent summer, the records are updated so I never get tired of watching it. While looking at the AMeDAS page many times and comparing it with yesterday's temperature and seeing how the temperature drops when it rains, I decided to make it because I thought it would be more interesting if there was a graph. did. There are also sites such as Japan Weather Association that graph using data from the Japan Meteorological Agency, but it is better to see them directly. I thought.

It was almost the first time to touch javascript, let alone create a browser extension, but it became a mechanism to make simple things very easily. When it was completed, I thought I would post it on Qiita for the first time, which also motivated me. The production time was 13 hours without application work and Qiita article creation time.

Reference site


I tried drawing a graph with Chart.js --Qiita Beautiful Soup in 10 minutes --Qiita Scraping with JavaScript --HANAUTA INC. Creating a minimal chrome extension that isn't exposed to the outside world can be done in less than an hour-Qiita

Recommended Posts

I made a Chrome extension that displays a graph on an AMeDAS page
I made an Android application that displays Google Map
I made an anomaly detection model that works on iOS
I made a neural network generator that runs on FPGA
[IOS] I made a widget that displays Qiita trends in Pythonista3. [Python]
A memo that made a graph animated with plotly
I made a LINE Bot that sends recommended images every day on time
I made a Linebot that notifies me of nearby evacuation sites on AWS
[Python] I made a script that automatically cuts and pastes files on a local PC to an external SSD.
I made a random number graph with Numpy
Story that an inexperienced person made a masked solver
I made a VM that runs OpenCV for Python
I made a Python3 environment on Ubuntu with direnv.
〇✕ I made a game
I made an Ansible-installer
I made a program to collect images in tweets that I liked on twitter with Python
I made a method to automatically select and visualize an appropriate graph for pandas DataFrame
A story that stumbled when I made a chatbot with Transformer
I made a class that easily performs unixtime ← → datetime conversion
I made a fucking app that won't let you skip
I made a VGG16 model using TensorFlow (on the way)
I made a rigid Pomodoro timer that works with CUI
I made a plug-in that can "Daruma-san fell" with Minecraft
I made a Line bot that guesses the gender and age of a person from an image
Create a graph that displays an image with a mouse hover using the data visualization library Dash
I made an Xubuntu server.
I made a python text
I made a discord bot
I tried to create a server environment that runs on Windows 10
[Python] I made a Line bot that randomly asks English words.
[Python3] I made a decorator that declares undefined functions and methods.
I made a package that can compare morphological analyzers with Python
I installed Taiga.IO on CentOS7 (I made a script while I was there)
I made a program that solves the spot the difference in seconds
I made a Twitter bot that mutters Pokemon caught by #PokemonGO
I made an AI that crops an image nicely using Salience Map
[Python] I made an image viewer with a simple sorting function.
I made a shuffle that can be reset (reverted) with Python
I made a lo command that is more useful than ls
I made a slack bot that notifies me of the temperature
I made a library that adds docstring to a Python stub file.
I made a program that automatically calculates the zodiac with tkinter
[python] I made a class that can write a file tree quickly
I made a POST script to create an issue on Github and register it in the Project
[Python] I made a bot that tells me the current temperature when I enter a place name on LINE
A note for me that I can't add an external repository with rpm --import on Amazon Linux2