4週間前に投稿

気象庁のJSONファイルを利用して天気予報を表示してみる

この記事は約 10 分で読めます。

4.5

気象庁のJSONデータを取得し、
日本地図の都道府県名を
クリックすると天気予報を表示します。
日本地図はJmap jQuery pluginと言う
プラグインを使用しています。

気象庁のJSONデータ

気象庁のWebサイトがリニューアルされ、
それに伴い、天気予報情報が
JSON形式で取得できるようになったようです。
政府標準利用規約に準拠して
利用できるとのことです。

ちなみに、“政府標準利用規約”で要求されていることはだいたいこんな感じのことです。
・出典の記載。編集・加工の際はそれを明記し、国が行ったかのような見せ方をしないこと。
・第三者の権利を侵害しないこと。国の提供するデータには第三者が権利を有するものがあるかもしれません。
・個別に法令で制約が定められているコンテンツに関しては、それに従うこと。

気象庁公式の天気予報API(?)が発見 ~Twitterの開発者界隈に喜びの声が満ちる – やじうまの杜 – 窓の杜 (impress.co.jp)

エンドポイント

13000.jsonは東京の予報区です。
別の予報区で取得したい場合には、
数値の部分を変更してください。

他の都道府県例えば、
群馬県の気象データを取得したいときには
100000.jsonに変更してください。

エリア

上記コードは、
何だか見づらいと言うか、
読みづらいのですが、
気象庁のAPIと予報区のコード
上記事に
「予報区のコード対応表」が
用意されています。

JSONデータのフォーマット

overview_forecast (概要)

  • publishingOffice
    データ配信元。基本的に「気象庁」と入っている。
  • reportDatetime
    報告日時。「+09:00」という部分はタイムゾーン。
  • targetArea
    対象の地域。130000.jsonは基本的に「東京都」。
    13が東京なのは、都道府県コードがそうなっているから。
  • headlineText
    ヘッドライン。
  • text
    詳細な概要情報。改行は「\n\n」なので、
    ブラウザなどに表示するときはbrタグに変更する必要がある。

targetArea

document.querySelector("#time").textContent = json.reportDatetime.replace("T", " ").replace("+09:00", "");

text

document.querySelector("#text").innerHTML = json.text.replace(/\n\n/g, "<br>");

forecast (予報)

こちらのJSONは「overview_forecast」に比べると複数の地域の情報があり、
また、今日・明日・明後日の3日分の天気予報情報がはいっているため、
情報量が多く、階層も深くなっています。

  • weathers
    天気の文字列。「くもり 時々 晴れ」や「くもり」など。
  • weatherCodes
    天気がコード化された情報。

JSONの取得方法

JavaScriptでJSONを外部から取得する際には
fetch() 命令が使えるそうです。
async/await構文でfetchを使う方法
参考にしました。

async function getWeather(code) {
  // データー取得
  const res = await fetch(`https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${code}.json`);
  const json = await res.json();
  // DOM操作
  document.querySelector("h1").textContent = json.targetArea;
  document.querySelector("#time").textContent = json.reportDatetime.replace("T", " ").replace("+09:00", "");
  document.querySelector("#text").innerHTML = json.text.replace(/\n\n/g, "<br>");
}
getWeather(130000);
await

通常の関数でawaitを使うことはできないそうです。
非async関数でawaitを使おうとした場合、
構文エラーになります。
awaitasync functionの中でのみ動作します。

参考: Async/await (javascript.info)

日本地図がクリックされた時の処理

日本地図はJmap jQuery pluginを使用します。

$(document).ready(function () {
  $("#jmap").jmap({
    width: '100%',
    height: '550px',
    showInfobox: true,
    backgroundColor: "#6FCFDD", // 地図の背景色
    prefectureBackgroundColor: "#62B34C", // 地図の色
    // 都道府県が選択された際の処理
    onSelect: function (e, data) {
      getWeather(codelist[data.name]);
    },
  });
});
showInfobox

情報表示エリアの有無 情報表示エリアの表示有無を指定できます 尚、Jmap地図を表示する要素内にjmap-infoboxクラスを持つ要素がある場合、情報表示エリア内に表示されます。

エリアコード

上記では、
変数codelistのリストの中から
エリアコード取得して
getWeather関数の引数へ渡してるそうです。

const codelist = {
  北海道: "016000",
  青森: "020000",
  岩手: "030000",
  宮城: "040000",
  秋田: "050000",
  山形: "060000",
  福島: "070000",
  茨城: "080000",
  栃木: "090000",
  群馬: "100000",
  埼玉: "110000",
  千葉: "120000",
  東京: "130000",
  神奈川: "140000",
  新潟: "150000",
  富山: "160000",
  石川: "170000",
  福井: "180000",
  山梨: "190000",
  長野: "200000",
  岐阜: "210000",
  静岡: "220000",
  愛知: "230000",
  三重: "240000",
  滋賀: "250000",
  京都: "260000",
  大阪: "270000",
  兵庫: "280000",
  奈良: "290000",
  和歌山: "300000",
  鳥取: "310000",
  島根: "320000",
  岡山: "330000",
  広島: "340000",
  山口: "350000",
  徳島: "360000",
  香川: "370000",
  愛媛: "380000",
  高知: "390000",
  福岡: "400000",
  佐賀: "410000",
  長崎: "420000",
  熊本: "430000",
  大分: "440000",
  宮崎: "450000",
  鹿児島: "460100",
  沖縄: "471000",
};

結果

都道府県をクリックすると天気を表示します。
発表時間
今日の天気
明日の天気

出典:気象庁ホームページ

JSONの取得 (forecast)

forecastは情報量が多く、
階層も深くなっているので、
「 あんこエデュケーション 」さんの
記事を参考にしました。

async function getWeather(code) {
  const res = await fetch(`https://www.jma.go.jp/bosai/forecast/data/forecast/${code}.json`);
  const json = await res.json();
  const area = json[0].timeSeries[0].areas[0];
  document.querySelector("#wea_title").textContent = json[0].publishingOffice;
  document.querySelector("#wea_time").textContent = json[0].reportDatetime.replace("T", " ").replace("+09:00", "");
  document.querySelector("#wea_text").textContent = area.weathers[0];
  document.querySelector("#wea_text_2").textContent = area.weathers[1];
}
getWeather(130000);

HTML

<div id="jmap">
  <div class="jmap-infobox">
    <div class="wea_info">都道府県をクリックすると天気を表示します。</div>
    <div class="wea_lap">
      <div id="wea_title"></div>
      <div class="wea_ann">発表時間</div>
      <div id="wea_time"></div>
      <div class="wea_sum">今日の天気</div>
      <div id="wea_text"></div>
      <div class="wea_sum">明日の天気</div>
      <div id="wea_text_2"></div>
    </div>
  </div>
</div>

CSS

.wea_lap {
  display: inline-block;
  border: 1px solid;
  border-color: #bfbfbf;
  border-radius: 3px;
  margin: 10px 0px 5px 0px;
  padding: 10px;
}

#wea_title, .wea_info {
  font-size: 14px;
  font-weight: bold;
}

.wea_ann {
  font-size: 12px;
}

#wea_time, #wea_text, #wea_text_2 {
  font-size: 10px;
}

.wea_sum {
  font-size: 12px;
  font-weight: bold;
}

参考にした記事

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

気象庁のJSONファイルを利用して天気予報を表示してみる