気象庁サイトを利用したビューアの作成 1 天気概況

Last updated at 2026-04-25Posted at 2026-03-18

目次(関連記事一覧)

はじめに

気象庁のホームページでは天気予報や警報・注意報、アメダスによる雨量や気温の観測値、地震情報など、さまざまな防災・生活情報を得ることができます

このホームページで使用されている内部apiは、気象庁から公式に仕様は公開されていないものの、データの取得や加工表示がしやすい作りとなっています

今回は、このapiを利用して、天気概況の表示ページを作成してみます。
(本職のエンジニアではありませんので、稚拙なコードがあったらごめんなさい)

正式に仕様が公開されているわけではありませんので、apiの内容等に関して気象庁への問い合わせはお控えください

仕様が公開されたデータを安定的に入手したい場合は、気象庁防災情報XMLのPULL型提供ページ(無償 https://xml.kishou.go.jp/xmlpull.html )や、気象業務支援センター(有償 https://www.jmbsc.or.jp/jp/ )から入手することが可能です

天気概況とは？

各都道府県の現在の天気や今後の天気予報を短い文章でまとめたもので、テレビやラジオの天気予報コーナーで読み上げられていることがあります。気象庁ホームページでは天気予報のページから、「○○県の天気概況を表示する」の折り畳みを開くと見ることができます

apiのURL

ブラウザの開発者ツールでネットワークタブを開き、その状態で取得したい情報があるページにアクセスすると、開発者ツール上にページの表示に使用したファイルが並んでいます。
気象庁ホームページでは、多くの防災気象情報のデータはjson形式で格納されており、Fetch/XHRでフィルターすると大抵目当てのファイルが見つかります

天気概況の場合は、https://www.jma.go.jp/bosai/forecast/data/overview_forecast/{officeCode}.json に格納されています。
{officeCode}の部分は都道府県ごとの地域コードで、その一覧は同じく表示時に読み込まれる https://www.jma.go.jp/bosai/common/const/area.json に格納されています。
(たとえば福島県の場合は「070000」)

apiの構造

天気概況のapiはシンプルな構造をしています。

要素名	説明
publishingOffice	発表官署名
reportDatetime	発表時刻
targetArea	対象府県
headlineText	見出し文(現在は運用されていない)
text	概況の本文

表示用のコード

天気概況apiの取得

現在のところ、気象庁ホームページのapiにはドメイン制限等がかけられておらず、サーバー等を建てなくてもfetch APIで容易に取得できます

fetch("https://www.jma.go.jp/bosai/forecast/data/overview_forecast/070000.json")
.then((response) => response.json())
.then((overview) => {
  display( overview);
});

天気概況の表示

天気概況apiから、対象地域、発表時刻、発表官署名、本文を取得して表示します

let out = "";
out += "<h2>" + overview['targetArea'] + "の天気概況</h2>";
let reportDatetime = overview['reportDatetime'];
out += "<p>";
out += reportDatetime.substring(0,4) + "年" + reportDatetime.substring(5,7) + "月" + reportDatetime.substring(8,10) + "日" + reportDatetime.substring(11,13) + "時" + reportDatetime.substring(14,16) + "分 ";
out += overview['publishingOffice'] + "発表";
out += "</p>";
out += "<p>" + overview['text'].replaceAll("\n","<br>") + "</p>";

表示ページ全体のソースコード

サンプルページ

府県選択部分は前述のapiから取得することも可能ですが、今回はソースコード内に列挙する形としています

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>天気概況</title>
  <style>
    *{ font-family:sans-serif;}
  </style>
</head>
<body>
  <h1>天気概況</h1>
  <div id="menu">
    <select id="officeSelect">
      <option value="011000">宗谷地方</option>
      <option value="012000">上川・留萌地方</option>
      <option value="013000">オホーツク地方</option>
      <option value="014100">釧路・根室・十勝地方</option>
      <option value="015000">胆振・日高地方</option>
      <option value="016000">石狩・空知・後志地方</option>
      <option value="017000">渡島・檜山地方</option>
      <option value="020000">青森県</option>
      <option value="030000">岩手県</option>
      <option value="040000">宮城県</option>
      <option value="050000">秋田県</option>
      <option value="060000">山形県</option>
      <option value="070000">福島県</option>
      <option value="080000">茨城県</option>
      <option value="090000">栃木県</option>
      <option value="100000">群馬県</option>
      <option value="110000">埼玉県</option>
      <option value="120000">千葉県</option>
      <option value="130000">東京都</option>
      <option value="140000">神奈川県</option>
      <option value="190000">山梨県</option>
      <option value="200000">長野県</option>
      <option value="150000">新潟県</option>
      <option value="160000">富山県</option>
      <option value="170000">石川県</option>
      <option value="180000">福井県</option>
      <option value="210000">岐阜県</option>
      <option value="220000">静岡県</option>
      <option value="230000">愛知県</option>
      <option value="240000">三重県</option>
      <option value="250000">滋賀県</option>
      <option value="260000">京都府</option>
      <option value="270000">大阪府</option>
      <option value="280000">兵庫県</option>
      <option value="290000">奈良県</option>
      <option value="300000">和歌山県</option>
      <option value="310000">鳥取県</option>
      <option value="320000">島根県</option>
      <option value="330000">岡山県</option>
      <option value="340000">広島県</option>
      <option value="360000">徳島県</option>
      <option value="370000">香川県</option>
      <option value="380000">愛媛県</option>
      <option value="390000">高知県</option>
      <option value="350000">山口県</option>
      <option value="400000">福岡県</option>
      <option value="410000">佐賀県</option>
      <option value="420000">長崎県</option>
      <option value="430000">熊本県</option>
      <option value="440000">大分県</option>
      <option value="450000">宮崎県</option>
      <option value="460100">鹿児島県</option>
      <option value="471000">沖縄本島地方</option>
      <option value="472000">大東島地方</option>
      <option value="473000">宮古島地方</option>
      <option value="474000">八重山地方</option>
    </select>
    <button id="update">表示</button>
  </div>
  <div id="out"></div>
  <script>
    "use strict";
    let areas = {};

    get();

    document.getElementById("update").addEventListener("click",function(e){
      get();
    });

    function get(){
      let officeCode = document.getElementById("officeSelect").value;
      fetch("https://www.jma.go.jp/bosai/forecast/data/overview_forecast/" + officeCode + ".json")
      .then((response) => response.json())
      .then((overview) => {
        display( overview);
      });
    }

    function display( overview){
      let out = "";
      out += "<h2>" + overview['targetArea'] + "の天気概況</h2>";
      let reportDatetime = overview['reportDatetime'];
      out += "<p>";
      out += reportDatetime.substring(0,4) + "年" + reportDatetime.substring(5,7) + "月" + reportDatetime.substring(8,10) + "日" + reportDatetime.substring(11,13) + "時" + reportDatetime.substring(14,16) + "分 ";
      out += overview['publishingOffice'] + "発表";
      out += "</p>";
      out += "<p>" + overview['text'].replaceAll("\n","<br>") + "</p>";
      document.getElementById("out").innerHTML = out;
    }
  </script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up