目的

気象庁HPがリニューアルされたので、表示に使われてるデータを使ってみよう。
wgetしてもよいし、xhrで直接読んで来ても使えそう。
（内容は保証しません・・・。）

対象データ

アメダス

対象データの構成

[www.jma.go.jp/bosai/amedas/data/]
- latest_time.txt # 最新時刻
- map/
  - yyyymmddHHMM00.json # 全国の横断データ。10分毎。地図に表示しない要素は省かれる。
- point/
  - [point_code] # アメダス地点コード
    - yyyymmdd_HH # 3時間ごとに区切られたデータ（HH=00,03,06,...）

アメダス地点コードを調べるには、URLのamdnoを見ればよい。
http://www.jma.go.jp/bosai/amedas/#area_type=offices&area_code=130000&amdno=44132&format=table1h

地点データが３時間区切りなのは、入電都度１日分のデータを書き換えるとキャッシュの実効性が下がるから・・・かもしれない。訂正報での訂正範囲も最小化できますし。

データ内容

キー	値	備考
prefNumber,observationNumber	組み合わせるとアメダス地点コード
pressure	現地気圧	hPa
normalPressure	海面更正気圧	hPa
temp	気温	℃
humidity	湿度	％
sun10m	１０分間日照時間
sun1h	１時間日照時間
precipitation10m	前１０分間降水量	mm
precipitation1h	前１時間降水量	mm
precipitation3h	前３時間降水量	mm
precipitation24h	前２４時間降水量	mm
windDirection	風向	0～15の16方位（北から時計回り）
wind	風速	m/s
maxTempTime	この時間までの日最高気温が出た時刻	{hour: HH, minute: MM}
maxTemp	この時間までの日最高気温	℃
minTempTime	この時間までの日最低気温が出た時刻	{hour: HH, minute: MM}
minTemp	この時間までの日最低気温	℃
gustTime	日最大風の時刻	{hour: HH, minute: MM}
gustDirection	日最大風速の風向	0～15の16方位（北から時計回り）
gust	日最大風速	m/s
snow	積雪深	cm
snow1h	１時間降雪量	cm
snow3h	３時間降雪量	cm
snow6h	６時間降雪量	cm
snow12h	１２時間降雪量	cm
snow24h	２４時間降雪量	cm

値は配列になっており、[値, AQC]。AQCは品質情報で、0なら問題なく利用可能。

方針

latest_time.txtから最新の時刻を読み取る
読み取った時刻から実データ(point)以下のファイル名を作成
作成したファイル名を取得
取得した各時刻のファイルを読み取って表示

テーブルを書いてみる

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>気象庁データを使ってみよう</title>
  </head>
  <body>
    <div id="target"></div>
    <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="//www.jma.go.jp/bosai/common/js/jmaweb_utility.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

app.js

$(function () {

  var AMEDAS_POINT = '54841'; // アメダス地点コード
  var ELEM = 'temp'; // 表示要素

  // 最新時刻取得
  $.ajax({ url: '//www.jma.go.jp/bosai/amedas/data/latest_time.txt' })
    .done(function (txt) {
      // JSONのURL作成
      var baseTime = new Date(txt);
      var yesterday = new Date(baseTime);
      yesterday.setDate(yesterday.getDate() - 1);
      var baseStr = JMAWebUtility.date.strftime(baseTime, '%Y%m%d_');
      var yesterdayStr = JMAWebUtility.date.strftime(yesterday, '%Y%m%d_');
      var requests = {};
      ['00', '03', '06', '09', '12', '15', '18', '21'].forEach(function (th) {
        requests[yesterdayStr + th] = '//www.jma.go.jp/bosai/amedas/data/point/' + AMEDAS_POINT + '/' + yesterdayStr + th + '.json';
      });
      ['00', '03', '06', '09', '12', '15', '18', '21'].forEach(function (th) {
        if (Number(th) > baseTime.getUTCHours()) return;
        requests[baseStr + th] = '//www.jma.go.jp/bosai/amedas/data/point/' + AMEDAS_POINT + '/' + baseStr + th + '.json';
      });
      // データの取得
      JMAWebUtility.parallelRequest(requests, function (data) {
        // ３時間ごとでは使いにくいので、１つにまとめる。
        var merged = {};
        Object.keys(data).forEach(function (fkey) {
          Object.keys(data[fkey]).forEach(function (timeStr) {
            merged[timeStr] = data[fkey][timeStr];
          });
        });
        // テーブル作成
        var table = $('<table>').appendTo('#target');
        $('<tr>')
          .appendTo(table)
          .append($('<th>').text('時刻'))
          .append($('<th>').text('気温'));
        Object.keys(merged).sort().forEach(function (timeStr) {
          var time = JMAWebUtility.date.createFromString(timeStr);
          $('<tr>')
            .appendTo(table)
            .append($('<td>').text(JMAWebUtility.date.strftime(time, '%Y/%m/%d %H:%M')))
            .append($('<td>').text(merged[timeStr][ELEM][0]));
        });
      });
    });
});

ES3な書き方でごめんなさい。適当に書いたのでJSTとUTC間違えてるかもです。
時刻文字列作成や$.whenが微妙に面倒なので気象庁のライブラリ使ってしまいます。

気象庁HPのデータを使ってみよう（アメダス編）

目的

対象データ

対象データの構成

データ内容

方針

テーブルを書いてみる

結果