1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@KAI_Mutsumi(甲斐 睦)Team Tea & Water

気象庁サイトを利用したビューアの作成 14 氾濫警報

1
Last updated at Posted at 2026-06-13

目次・全体的な注意点(第1回の記事)

今回は、氾濫警報(指定河川洪水予報)の表示ページを作成していきます

氾濫警報とは

大きな河川の氾濫の危険度を、気象庁と河川管理者(国土交通省または都道府県)が共同して発表するものです。気象庁が予測する雨量と、河川管理者が予測する水位を組み合わせて発表します

2026年5月の防災気象情報の体系整理以降は、大雨・土砂災害・高潮の警報と同様「レベル5特別警報」「レベル4危険警報」「レベル3警報」「レベル2注意報」の段階に整理されました。内閣府や気象庁は、警戒レベル4の情報が発表された際・発表されるまでに、ハザードマップなどで危険が予測される地域から避難することをお勧めしています

防災気象情報と警戒レベルとの対応について(気象庁)

apiのURL

他の情報と同様、ブラウザの開発者ツールでネットワークタブを開いた状態で気象庁ホームページにアクセスし、Fetch/XHRでフィルタするとデータを格納したファイルが見つかります

氾濫警報の発表状況は https://www.jma.go.jp/bosai/flood/data/r8/flood_xml.json に格納されています。なお、電文中に出現する地域ごとのコード番号は https://www.jma.go.jp/bosai/common/const/area.json に格納されています

apiの構造

気象庁ホームページの内部apiの構造は、気象庁防災情報XMLの構造をモデルとしているものが多いです。このため、気象庁防災情報XMLの解説資料が参考になる場合が多いです

氾濫警報の電文の説明は「指定河川洪水予報（氾濫警報・注意報）_解説資料.pdf」としてまとめられており、この資料の内容が参考になります

flood_xml.json
[
  {
    "publishingOffice": "東京都 気象庁",
    "editorialOffice": "気象庁本庁",
    "reportDatetime": "2026-06-03T14:50:00+09:00",
    "infoType": "発表",
    "serial": "2",
    "item": {
      "areas": [
        { "name": "目黒川", "code": "130005000100"}
      ],
      "name": "レベル２氾濫注意報解除",
      "code": "10",
      "condition": "レベル２氾濫注意報解除"
    },
    "pdfFilename": "130005000100_20260602205000_n00.pdf",
    "riverCode": "130005000100",
    "riverName": "目黒川",
    "class20Codes": [ "1310900", "1311000"],
    "class10Codes": [ "130010"],
    "officeCodes": [ "130000"]
  },
  {
    "publishingOffice": "愛知県海部建設事務所 名古屋地方気象台",
    "editorialOffice": "名古屋地方気象台",
    "reportDatetime": "2026-06-03T09:20:00+09:00",
    "infoType": "発表",
    "serial": "2",
    "item": {
      "areas": [
        { "name": "愛知県日光川水系　日光川", "code": "230054000100"}
      ],
      "name": "レベル２氾濫注意報解除",
      "code": "10",
      "condition": "レベル２氾濫注意報解除"
    },
    "pdfFilename": "230054000100_20260602152000_n00.pdf",
    "riverCode": "230054000100",
    "riverName": "愛知県日光川水系　日光川",
    "class20Codes": [ "2310000", "2320300", "2320800", "2322000", "2323200", "2323500", "2323700", "2342500", "2342700"],
    "class10Codes": [ "230010"],
    "officeCodes": [ "230000"]
  }
]

publishingOfficeは発表官署(業務的に電文の作成に責任を持っている官署)、editorialOfficeは編集官署(電文処理の条件分岐に用いる電文作成官署)を表します。単に「どこどこ発表」と表記したいだけなら、publishingOfficeを用いれば良いでしょう

reportDatetimeは発表時刻です。infoTypeは情報形態で「発表」「訂正」「取消」のいずれかが入ります。serialは号数です

riverNameに川の名前が、item.nameに注意報の種類が格納されるので、これらを組み合わせて「愛知県日光川水系　日光川　レベル２氾濫注意報解除」のように表現することができます

item.code には警報のコード番号が格納されます。対応表は以下のようになっています(解説資料から抜粋)。津波警報等と違って、codeの上1桁がレベルとぴったり対応しているので、色分けなどの条件分岐に使いやすいと思います

name code condition
レベル２氾濫注意報解除 10 レベル２氾濫注意報解除
レベル２氾濫注意報 20 レベル２氾濫注意報（発表）
レベル２氾濫注意報 21 レベル２氾濫注意報
レベル２氾濫注意報（警報解除） 22 レベル２氾濫注意報（警報解除）
レベル３氾濫警報 30 レベル３氾濫警報（発表）
レベル３氾濫警報 31 レベル３氾濫警報
レベル４氾濫危険警報 40 レベル４氾濫危険警報（発表）
レベル４氾濫危険警報 41 レベル４氾濫危険警報
レベル５氾濫特別警報 51 レベル５氾濫特別警報
レベル５氾濫特別警報（氾濫水の予報） 53 レベル５氾濫特別警報

pdfFileNameは水位予測などがプリントされたPDFのファイル名です。発表時には https://www.jma.go.jp/bosai/flood/data/r8/pdf/{pdfFilename} にPDFファイルが格納されます

class20Codes、class10Codes、officeCodesはそれぞれ、警戒対象の都道府県、1次細分区域(○○県南部 等)、市町村を表すコードが列挙された配列です。それぞれがどの地域を表すかは https://www.jma.go.jp/bosai/common/const/area.json に格納されています

area.json
{
  "offices": { // 都道府県
    "020000": {
      "name": "青森県",
      "parent": "010200",
      "children": [ "020010", "020020", "020030"]
    },
    "030000": {
      "name": "岩手県",
      "parent": "010200",
      "children": [ "030010", "030020", "030030"]
    },......
  },
  "class10s": { // 1次細分区域
    "020010": {
      "name": "津軽",
      "parent": "020000",
      "children": [ "020011", "020012", "020013", "020014"]
    },
    "020020": {
      "name": "下北",
      "parent": "020000",
      "children": [ "020020"]
    },......
  },
  "class15s": { // (市町村等をまとめた地域)
    "020011": {
      "name": "東青津軽",
      "parent": "020010",
      "children": [ "0220100", "0230100", "0230300", "0230400", "0230700"]
    },
    "020012": {
      "name": "北五津軽",
      "parent": "020010",
      "children": [ "0220500", "0238100", "0238400", "0238700"]
    },......
  },
  "class20s": { // 2次細分区域(市町村等)
    "0220100": { "name": "青森市", "parent": "020011"},
    "0220200": { "name": "弘前市", "parent": "020014"},
    "0220300": { "name": "八戸市", "parent": "020031"},......
  }

表示用のコード

ここまでの内容を表に起こしていきます。今回は全国の氾濫警報の発表状況を表形式で表示するページを作成します

警報の危険度別の配色を定義します。配色は 気象庁ホームページの配色指針 を参考にしました

<style>
  *{ font-family:sans-serif;}
  table, tr, td, th{ border-collapse:collapse; white-space:nowrap;}
  th,td{ padding:2px 8px; border-style:solid; border-width:1px 0; border-color:#d8d8db;}
  th{ background-color:#f1f1f4;}
  .lv5{ background:#0c000c; color:white;}
  .lv4{ background:#aa00aa; color:white;}
  .lv3{ background:#ff2800; color:white;}
  .lv2{ background:#f2e700; color:black;}
</style>

警戒対象の市町村名を表示するために必要な、地域情報を取得します

function getGlobals(){
  fetch("https://www.jma.go.jp/bosai/common/const/area.json")
  .then((response) => response.json())
  .then((response) => {
    areas = response;
    get();
  });
}

氾濫警報の全国一覧ファイルを取得します

function get(){
  fetch("https://www.jma.go.jp/bosai/flood/data/r8/flood_xml.json")
  .then((response) => response.json())
  .then((floods) => display(floods));
}

一覧表を作成します。まず電文を警戒レベル順にソートします(今回は警戒レベル順としましたが、都道府県順でも発表時刻順でも好きにどうぞ)

floods.sort((a,b)=>{
  return b['item']['code'][0] - a['item']['code'][0]; // codeの上1桁が警戒レベルに対応
});

officeCodesを読み取り、対象都道府県を表示します

out += "<tr><td>";
for( let officeCode of flood['officeCodes']){
  let officeName = areas['offices'][officeCode]['name'];
  out += officeName + " ";
}
out += "</td>";

riverNameから河川名を、pdfFilenameからPDFのファイル名を読み取り、PDFファイルへのリンク付きの河川名を表示します。また、item.nameから警報名を、item.codeから警戒レベルを読み取り、警報名を警戒レベルで色付けして表示します

out += "<td><a href='https://www.jma.go.jp/bosai/flood/data/r8/pdf/" + flood['pdfFilename'] + "'>" + flood['riverName'] + "</a></td>";
let warnName = flood['item']['name'], warnLevel = flood['item']['code'][0];
out += "<td class='lv" + warnLevel + "'>" + warnName + "</td>";
out += "<td>" + flood['reportDatetime'].split("+")[0].replaceAll("-","/").replace("T"," ") + "</td>";

reportDatetimeを読み取り発表時刻を、publishingOfficeを読み取り対象市町村を表示します

out += "<td>" + flood['reportDatetime'].split("+")[0].replaceAll("-","/").replace("T"," ") + "</td>";
out += "<td>";
out += flood['publishingOffice'] + " 共同発表<br>";

class20Codesでループして、警戒対象市町村名を表示します

out += "対象市町村：";
for( let class20Code of flood['class20Codes']){
  let class20Name = areas['class20s'][class20Code]['name'];
  out += class20Name + " ";
}
out += "</td>";

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

サンプルページ
(氾濫警報が全国どこにも発表されていないと何も表示されません)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>氾濫警報(指定河川洪水予報)</title>
  <style>
    *{ font-family:sans-serif;}
    table, tr, td, th{ border-collapse:collapse; white-space:nowrap;}
    th,td{ padding:2px 8px; border-style:solid; border-width:1px 0; border-color:#d8d8db;}
    th{ background-color:#f1f1f4;}
    .lv5{ background:#0c000c; color:white;}
    .lv4{ background:#aa00aa; color:white;}
    .lv3{ background:#ff2800; color:white;}
    .lv2{ background:#f2e700; color:black;}
  </style>
</head>
<body>
  <h1>氾濫警報(指定河川洪水予報)</h1>
  <div id="out"></div>
  <script>
    "use strict";
    let areas;

    getGlobals();

    function getGlobals(){
      fetch("https://www.jma.go.jp/bosai/common/const/area.json")
      .then((response) => response.json())
      .then((response) => {
        areas = response;
        get();
      });
    }

    function get(){
      fetch("https://www.jma.go.jp/bosai/flood/data/r8/flood_xml.json")
      .then((response) => response.json())
      .then((floods) => display(floods));
    }

    function display( floods){
      // レベル順にソート
      floods.sort((a,b)=>{
        return b['item']['code'][0] - a['item']['code'][0];
      });
      let out = "";
      out += "<table>";
      out += "<tr><th>都道府県</th><th>河川名</th><th>発表情報</th><th>発表時刻</th><th>詳細</th>";
      for( let flood of floods){
        out += "<tr><td>";
        for( let officeCode of flood['officeCodes']){
          let officeName = areas['offices'][officeCode]['name'];
          out += officeName + " ";
        }
        out += "</td>";
        out += "<td><a href='https://www.jma.go.jp/bosai/flood/data/r8/pdf/" + flood['pdfFilename'] + "'>" + flood['riverName'] + "</a></td>";
        let warnName = flood['item']['name'], warnLevel = flood['item']['code'][0];
        out += "<td class='lv" + warnLevel + "'>" + warnName + "</td>";
        out += "<td>" + flood['reportDatetime'].split("+")[0].replaceAll("-","/").replace("T"," ") + "</td>";
        out += "<td>";
        out += flood['publishingOffice'] + " 共同発表<br>";
        out += "対象市町村：";
        for( let class20Code of flood['class20Codes']){
          let class20Name = areas['class20s'][class20Code]['name'];
          out += class20Name + " ";
        }
        out += "</td>";
      }
      out += "</table>";
      document.getElementById("out").innerHTML = out;
    }
  </script>
</body>
</html>
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?