「axios」の記事 - Crieit

気象庁の公開データを 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:

HTMLの文字コード決定プロセス

2018-09-27T15:16:50+09:00

スクレイピングしていたら文字化けしているものがあったので、HTTPでやりとりされるHTMLの文字コード判定が、どのようなプロセスを経て行われているのか調べてみました。

HTTPでやりとりするHTMLでの文字コード

基本的には以下の情報を見ていくようです。

BOM
HTTPのContent-Typeヘッダ
HTMLのmetaタグ
- charset属性
- http-equiv="Content-Type"なもののcontent属性

参考: https://www.w3.org/International/questions/qa-html-encoding-declarations.ja

axiosの場合

元々はnodeでaxiosを使っていて困った部分だったので、axiosで文字コードを考慮してどう処理するかをTypeScriptで書いていきます。

axiosはデフォルトでは上の情報はどれも利用されずにutf-8決め打ちでデコードされてしまいます。なのでoptionにresponseType: 'arraybuffer'を渡しresponse.dataをBufferとして受け取って処理していきます。

最終目標は

import axios from 'axios';
import iconv = require('iconv-lite');
import * as charset from './charset';

(async () => {
    const response = await axios.get(url, { responseType: 'arraybuffer' });
    const body = iconv.decode(response.data, charset.detect(response));
})()

のように使えるcharset.detectを実装することです。

各判定処理ごとに関数にして、決定できなかった場合にはutf-8にフォールバックするようにします。

import { AxiosResponse } from 'axios';

type Charset = string;
type IntermediateResult = Charset | null;

export const detect = (res: AxiosResponse): Charset =>
    fromBOM(res.data) ||
    fromHeader(res.headers["content-type"]) ||
    fromMetaTag(res.data) ||
    Charset.UTF8;

Charsetはきちんとやるなら https://www.iana.org/assignments/character-sets/character-sets.xhtml にあるもののunion typeとかstring enumsとかの方が良いのかもしれません。

BOM

BOMはByte Order Markで先頭数バイトを特定のパターンにすることで、ユニコードであることとそのエンコーディング、エンディアンを示すものです。
https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding から持ってきています。

// to assert elements as tuple (inferred Array)
const bomify = ([c, bytes]) => ([c, Buffer.from(bytes)] as [Charset, Buffer]);
const BOMS: ReadonlyMap = new Map([
    ['utf-8',      [0xEF, 0xBB, 0xBF]],
    ['utf-16be',   [0xFE, 0xFF]],
    ['utf-16le',   [0xFF, 0xFE]],
    ['utf-7',      [0x2B, 0x2F, 0x76, 0x38]],
    ['utf-7',      [0x2B, 0x2F, 0x76, 0x39]],
    ['utf-7',      [0x2B, 0x2F, 0x76, 0x2B]],
    ['utf-7',      [0x2B, 0x2F, 0x76, 0x3F]],
    ['utf-7',      [0x2B, 0x2F, 0x76, 0x38, 0x2D]],
    ['utf-1',      [0xF7, 0x64, 0x4C]],
    ['utf-ebcdic', [0xDD, 0x73, 0x66, 0x73]],
    ['scsu',       [0x0E, 0xFE, 0xFF]],
    ['bocu-1',     [0xFB, 0xEE, 0x28]],
    ['gb-18030',   [0x84, 0x31, 0x95, 0x33]],
].map(bomify));

export const fromBOM = (buf): IntermediateResult => {
    const startsWith = (bom) =>
        buf.slice(0, bom.length).equals(bom)
    for (let [charset, bom] of BOMS) {
        if (startsWith(bom)) return charset;
    }
    return null;
}

Content-Type Header

Content-TypeヘッダのフォーマットはRFC 7231のSection 3.1.1.5で決められています。
それに基づいて実装されているjshttp/content-typeを利用します。

import contentType = require('content-type');
export const fromHeader = (ctype): IntermediateResult => {
    const res = contentType.parse(ctype);
    return res.parameters.charset || null;
}

metaタグ

Bufferをasciiにデコードして

metaタグのcharset属性
http-equiv="Content-Type"なmetaタグのcontent属性

をcheerioを使って探します。

import cheerio = require('cheerio');
export const fromMetaTag = (buf): DetectionResult => {
    const $ = cheerio.load(buf.toString('ascii'));
    let res = $('meta[charset]').attr('charset');
    if (res) return res;
    res = $('meta[http-equiv="Content-Type"]').attr('content');
    if (res) return fromHeader(res);
    return null;
}

まとめ

以上です。全体像を貼っておきます。

import { AxiosResponse } from 'axios';
import contentType = require('content-type');
import cheerio = require('cheerio');

type Charset = string;
type IntermediateResult = Charset | null;

// to assert elements as tuple (inferred Array)
const bomify = ([c, bytes]) => ([c, Buffer.from(bytes)] as [Charset, Buffer]);
const BOMS: ReadonlyMap = new Map([
    ['utf-8', [0xEF, 0xBB, 0xBF]],
    ['utf-16be', [0xFE, 0xFF]],
    ['utf-16le', [0xFF, 0xFE]],
    ['utf-7', [0x2B, 0x2F, 0x76, 0x38]],
    ['utf-7', [0x2B, 0x2F, 0x76, 0x39]],
    ['utf-7', [0x2B, 0x2F, 0x76, 0x2B]],
    ['utf-7', [0x2B, 0x2F, 0x76, 0x3F]],
    ['utf-7', [0x2B, 0x2F, 0x76, 0x38, 0x2D]],
    ['utf-1', [0xF7, 0x64, 0x4C]],
    ['utf-ebcdic', [0xDD, 0x73, 0x66, 0x73]],
    ['scsu', [0x0E, 0xFE, 0xFF]],
    ['bocu-1', [0xFB, 0xEE, 0x28]],
    ['gb-18030', [0x84, 0x31, 0x95, 0x33]],
].map(bomify));

export const fromBOM = (buf): IntermediateResult => {
    const startsWith = (bom) =>
        buf.slice(0, bom.length).equals(bom)
    for (let [charset, bom] of BOMS) {
        if (startsWith(bom)) return charset;
    }
    return null;
}

export const fromHeader = (ctype): IntermediateResult => {
    const res = contentType.parse(ctype);
    return res.parameters.charset || null;
}

export const fromMetaTag = (buf): IntermediateResult => {
    const $ = cheerio.load(buf.toString('ascii'));
    let res = $('meta[charset]').attr('charset');
    if (res) return res;
    res = $('meta[http-equiv="Content-Type"]').attr('content');
    if (res) return fromHeader(res);
    return null;
}

export const detect = (res: AxiosResponse): Charset =>
    fromBOM(res.data) ||
    fromHeader(res.headers["content-type"]) ||
    fromMetaTag(res.data) ||
    'utf-8';

最後に

僕は普段主にRubyを使っているので、Rubyの場合どうなのかも気になって少し調べてみたのですが、標準ライブラリのNet::HTTPでContent-TypeをハンドルすべきかについてのIssueがありました。

現実的には複数の方法で違う文字コードとして指定されていたり、実際使われているものと違ったりということもあるようで、絶対に信用できるメタデータというわけではないようです。

頻度から分類するアプローチもあるようで、現実的にはこちらの方がうまく動くかもしれません。
runk/node-chardet
データがあれば機械学習の実験課題としてちょうど良さそうですね。

最初は雑な正規表現で書いていたのですが、記事を書いているうちに正しいフォーマットはどうなのか気になってRFCを見にいったりして結構勉強になりました。全部utf-8だと嬉しいですね。