気象庁の公開データを node.js と chrome ブラウザ (browserify) で表示する。

2022-04-26T17:01:11+09:00

雨なので気象庁の公開データを Javascript を使って見てみる。

pathCode (json) を表示してみる

気象データを問い合わせるのに、定数になっている日本全国の場所のコード（ pathCode ）を見てみる。
なぜなら、それをしらないとエリアごとの気象データを問い合わせできない。

javascript

tenki_area.js

const axios = require("axios");
const url = "https://www.jma.go.jp/bosai/common/const/area.json";

(get_area = async () => {
  try {
    const response = await axios.get(url);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
})();

terminal:

> node tenki-area.js > tenki-area.json

Rf:
https://mindtech.jp/?p=1754

Ruby

require "json"
require "net/http"
area_code_url = "https://www.jma.go.jp/bosai/common/const/area.json"
response = Net::HTTP.get_response(URI.parse(area_code_url))
h_area = JSON.parse(response.body)
pp h_area["offices"]

tenki_area.rb

require "json"
require "net/http"
area_code_url = "https://www.jma.go.jp/bosai/common/const/area.json";

response1 = Net::HTTP.get_response(URI.parse(area_code_url))
h_area_code = JSON.parse(response1.body)

uri = "https://www.jma.go.jp/bosai/forecast/data/forecast/"
#area = "260000" #Kyoto

h_area_code["offices"].each {|v|
  area = v[0]
  begin
    response2 = Net::HTTP.get_response(URI.parse("#{uri}#{area}.json"))
    h_area_data = JSON.parse(response2.body)
    h_area_data.each {|vv|
      pp vv["publishingOffice"]
      pp vv["reportDatetime"]
      vv["timeSeries"].each {|x|
        x["areas"].each {|xx| pp xx['area']}
      }
      puts
      puts "--------------------------------------------------"
      puts
    }
  rescue
    puts
  end
}

Python

tenki_area.py

import requests
import json

area_code_url = "https://www.jma.go.jp/bosai/common/const/area.json";
headers = {"content-type": "application/json; charset=utf-8"}
response = requests.get(area_code_url, headers=headers)
data = response.json()

print(json.dumps(data['offices'],ensure_ascii=False,indent = 4))

Nim

#nim -d:ssl

import httpclient,strutils,uri
import json

const area_code_url = "https://www.jma.go.jp/bosai/common/const/area.json"

let client0  = newHttpClient()
let response = client0.get(area_code_url)
let jsObj = parseJson(response.body)
client0.close()
echo jsObj["offices"].pretty()

get weather data

Rf:
https://qiita.com/youtoy/items/932bc48b03ced5a45c71

Ruby

tenki.rb

例えば京都という場所の天気を問い合わせる。

javascript

tenki.js

const axios = require("axios");

const url = "https://www.jma.go.jp/bosai/forecast/data/forecast/";
const area = "260000"; // Kyoto

(getWeatherForecast = async () => {
  try {
    const response = await axios.get(`${url}${area}.json`);

    console.log(response.data);
    console.log(response.data[0].publishingOffice);
    console.log(response.data[0].timeSeries[0].areas);

    for(const area of response.data[0].timeSeries[0].areas){
        console.log(`----${area.area.name}----`);
        for(const weather of area.weathers){
            console.log(weather);
        }
    }
  } catch (error) {
    console.error(error);
  }
})();

terminal:

> node tenki.js

> node tenki.js

[
  {
    publishingOffice: '京都地方気象台',
    reportDatetime: '2022-04-26T17:00:00+09:00',
    timeSeries: [ [Object], [Object], [Object] ]
  },
  {
    publishingOffice: '京都地方気象台',
    reportDatetime: '2022-04-26T17:00:00+09:00',

    timeSeries: [ [Object], [Object] ],
    tempAverage: { areas: [Array] },
    precipAverage: { areas: [Array] }
  }
]
京都地方気象台
[
  {
    area: { name: '南部', code: '260010' },
    weatherCodes: [ '300', '311', '100' ],
    weathers: [
      '雨　所により　夜遅く　雷を伴い　激しく　降る',
      '雨　昼前　から　くもり　後　晴れ　所により　明け方　まで　雷を伴い　激しく　降る',
      '晴れ'
    ],
    winds: [ '南の風　後　南西の風', '南西の風　後　北西の風', '北の風' ]
  },
  {
    area: { name: '北部', code: '260020' },
    weatherCodes: [ '300', '311', '100' ],
    weathers: [
      '雨　所により　夜遅く　雷を伴い　激しく　降る',
      '雨　昼前　から　くもり　後　晴れ　所により　明け方　まで　雷を伴い　激しく　降る',
      '晴れ'
    ],
    winds: [ '南の風　やや強く　海上　では　南の風　強く', '南西の風　後　北東の風　 海上　では　南西の風　やや強く', '北の風' ],
    waves: [ '１．５メートル　後　２メートル', '２メートル　後　１．５メートル', '１ ．５メートル' ]
  }
]
----南部----
雨　所により　夜遅く　雷を伴い　激しく　降る
雨　昼前　から　くもり　後　晴れ　所により　明け方　まで　雷を伴い　激しく　降る
晴れ
----北部----
雨　所により　夜遅く　雷を伴い　激しく　降る
雨　昼前　から　くもり　後　晴れ　所により　明け方　まで　雷を伴い　激しく　降る
晴

これをサンプルにして Javascript を学習する。

browserify

node.js で動いたプログラムを browserify によってブラウザで動作するようにする。

https://browserify.org/

Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.

インストール
terminal:

> npm install -g browserify

tenki_2.js

他の言語である println のように使っているコンソール.ログがブラウザでどうなるのかわからないので、require しておいてみる。

const console = require("console");
const axios = require("axios");

const url = "https://www.jma.go.jp/bosai/forecast/data/forecast/";
const area = "260000"; // Kyoto

(getWeatherForecast = async () => {
  try {
    const response = await axios.get(`${url}${area}.json`);

//    console.log(response.data);
//    console.log(response.data[0].publishingOffice);
//    console.log(response.data[0].timeSeries[0].areas);

    for(const area of response.data[0].timeSeries[0].areas){
        console.log(`----${area.area.name}----`);
        for(const weather of area.weathers){
            console.log(weather);
        }
    }
  } catch (error) {
    console.error(error);
  }
})();

tenki_2.js をブラウザ仕様の javascript ファイル bundle.js に変換する。

terminal:

> browserify tenki_2.js -o bundle.js

bundle.js
https://pastebin.com/szscGNsR

html ファイルを作って、 bundle.js を読み込むようにする。
例えば tenki という名前でフォルダを作って、index.html, bundle.js を tenki フォルダに配置する。

index.html





tenki_area browserify example

chrome ブラウザーで tenki フォルダの中の html ファイルを開く。

chrome browser:

CTRL + shift + i

DevTools

index.html:

「気象」の記事 - Crieit

気象庁の公開データを node.js と chrome ブラウザ (browserify) で表示する。