気象庁サイトを利用したビューアの作成 19 防災速報・解説情報(表)

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

今回は、文章の気象情報を表形式で表示するページを作成していきます

気象防災速報・気象解説情報とは

大雨などの災害に対して事前に警戒を呼び掛ける際や、警報・注意報を補足する情報を発表する必要がある際に気象庁が発表する情報です。ニュースの原稿としてそのまま使えるような文章となっています。以下に具体例を示します

気象解説情報

八重山地方気象解説情報（台風第７号） 第3号

2026年06月24日 04時52分 石垣島地方気象台 発表
#台風 #高波 #強風 #落雷

台風第７号は、２５日から２６日にかけて八重山地方に接近する見込みです。八重山地方では２５日は高波に警戒してください。台風の進路等によっては、石垣島地方では、２５日は暴風となるおそれがあります。風が強まる前に早めの台風対策が必要です。

［気象概況］
非常に強い台風第７号は、２４日３時には沖縄の南の北緯２０度１０分、東経１２４度３５分にあって、１時間におよそ１０キロの速さで北へ進んでいます。中心の気圧は９５０ヘクトパスカル、中心付近の最大風速は４５メートル、最大瞬間風速は６０メートルで中心の南東側１１０キロ以内と北西側７５キロ以内では風速２５メートル以上の暴風となっています。また、中心の南東側２８０キロ以内と北西側２２０キロ以内では風速１５メートル以上の強い風が吹いています。
台風は今後、強い勢力で沖縄の南を北よりに進み、２５日から２６日にかけて八重山地方に接近する見込みです。

［波の予想］
２４日に予想される波の高さ
石垣島地方 ５メートル うねりを伴う
与那国島地方 ４メートル うねりを伴う
……

［風の予想］
２５日に予想される風向・最大風速（最大瞬間風速）
石垣島地方 ２０メートル（３０メートル）
与那国島地方 １５メートル（２５メートル）
……

［防災事項］
八重山地方の沿岸の海域では、うねりを伴いしけており、台風の接近に伴い２５日は大しけとなる見込みです。うねりを伴う高波に警戒してください。
八重山地方では２５日から２６日にかけて、荒れた天気となる見込みです。非常に強い風に十分注意してください。なお、石垣島地方では台風の進路等によっては、２５日は暴風となるおそれがあります。
八重山地方では、発達した積乱雲の下での落雷や突風に注意してください。

［補足事項］
今後発表する防災気象情報に留意してください。
次の「八重山地方気象解説情報（台風第７号）」は、２４日１７時頃に発表する予定です。

気象防災速報(線状降水帯発生)

福岡県気象防災速報（線状降水帯発生） 第1号

2026年07月02日 02時28分 気象庁 発表
#線状降水帯発生

福岡県筑後地方では、線状降水帯による非常に激しい雨が同じ場所で降り続いています。命に危険が及ぶ災害発生の危険度が急激に高まっています。

気象防災速報(竜巻注意)

熊本県気象防災速報（竜巻注意） 第1号

2026年07月05日 07時33分 気象庁 発表

熊本地方は、竜巻などの激しい突風が発生しやすい気象状況になっています。空の様子に注意してください。雷や急な風の変化など積乱雲が近づく兆しがある場合には、頑丈な建物内に移動するなど、安全確保に努めてください。落雷、ひょう、急な強い雨にも注意してください。

この情報は、05日08時40分まで有効です

天候情報

梅雨の時期に関する四国地方気象情報 第2号

2026年07月12日 11時00分 高松地方気象台 発表

四国地方は梅雨明けしたと見られます。

　四国地方は、太平洋高気圧に覆われておおむね晴れています。向こう１週間は、太平洋高気圧に覆われておおむね晴れる日が多くなる見込みです。
　このため、四国地方は、７月１２日ごろに梅雨明けしたと見られます。

昨年の梅雨明け ７月１７日ごろ
平年の梅雨明け ６月２７日ごろ

梅雨期間降水量（６月２日から７月１１日まで）（速報値）
 降水量(ミリ) 降水量平年値(ミリ)
松山　 569.5 349.8
多度津 467.0 248.7
高松　 452.0 232.5
宇和島 714.0 406.7
高知　 748.0 497.6
徳島　 457.5 265.9
宿毛　 673.5 448.0
清水　 764.5 497.8
室戸岬 970.0 439.6

（注意事項）
・梅雨は季節現象であり、その入り明けは、平均的に５日間程度の「移り変わり」の期間があります。
・梅雨の時期に関する気象情報は、現在までの天候経過と１週間程度あるいはその先までの天候の見通しをもとに、速報として発表する情報です。後日、春から夏にかけての実際の天候経過に基づいて、梅雨入りと梅雨明けの時期を総合的に検討し確定しています。

定型的で比較的危険度が高い情報を「気象防災速報」、そうでない情報を「気象解説情報」と分類しています。その他に、長雨や少雨などが長期間続く予想の際に発表される「天候情報」もあります

apiのURL

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

• 全国に発表されている気象情報の一覧は https://www.jma.go.jp/bosai/information/data/r8/information.json
• 個別の情報は https://www.jma.go.jp/bosai/information/data/r8/denbun/{jsonName}.json
  に格納されています。{jsonName}の部分は information.json に格納されています

apiの構造

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

気象情報の電文の説明は

• 気象防災速報(竜巻注意、竜巻目撃)は「竜巻注意情報_解説資料.pdf」
• 気象解説情報と、竜巻関連以外の気象防災速報は「気象解説情報形式_解説資料.pdf」
• 天候情報は「天候情報_解説資料.pdf」
  としてまとめられており、この資料の内容が参考になります

気象情報の一覧(information.json)

information.json

[
  {
    "controlTitle": "全般気象解説情報（潮位）", // 情報名称。「府県気象防災速報」「全般気象解説情報」等
    "editorialOffice": "気象庁本庁", // 発信官署
    "publishingOffice": "気象庁", // 編集官署
    "headTitle": "全般気象解説情報（大潮）", // 標題
    "reportDatetime": "2026-07-10T11:00:00+09:00", // 発表時刻
    "eventId": "ZJPTK260002",
    "infoType": "発表", // 情報形態。「発表」「訂正」「取消」のいずれか
    "serial": "1", // 号数
    "areaType": "japan", // 地域種別。「japan」「centers」「offices」のいずれか
    "areaCode": "010000", // 地域コード
    "areaCodes": ["010000"], // 地域コード(複数の場合がある)
    "jsonName": "20260710020016_0_VMCJ53_010000", // 個別の気象情報のファイル名
    "infoTag": [
      {
        "name": "情報タグ",
        "condition": "大潮" // 情報タグ。「台風 大雨 雷」等複数になる場合もある
      }
    ]
  },
  {
    "controlTitle": "地方気象解説情報（潮位）",
    "editorialOffice": "気象庁本庁",
    "publishingOffice": "気象庁",
    "headTitle": "東海・北陸地方気象解説情報（大潮）",
    "reportDatetime": "2026-07-10T11:05:00+09:00",
    "eventId": "CJPTK260002",
    "infoType": "発表",
    "serial": "1",
    "areaType": "centers",
    "areaCode": "010300",
    "areaCodes": ["010400", "010500"], // 地域コードはこのように複数の場合がある
    "jsonName": "20260710020522_0_VMCJ54_010300",
    "infoTag": [
      {
        "name": "情報タグ",
        "condition": "大潮"
      }
    ]
  },......
]

editorialOfficeは電文処理の条件分岐に用いる電文作成官署、publishingOfficeは業務的に電文の作成に責任を持っている官署を表します。内部の処理はeditorialOfficeによって行い、表示する発表官署はpublishingOfficeとしてください

eventIdは一連の現象の判別のために使用します。同一のcontrolTitle・同一のeditorialOffice・同一のeventIdの情報が新たに発表された際は、以前発表された情報の内容が更新されたことを表します

eventIdにはJPTK230120_2023090717030のように、アンダーバー＋発表時刻が入る場合があります。このような情報は、アンダーバーより前の部分のeventIdを持つ情報を補足する情報を表します。本稿執筆時点では、警戒レベル4以上など切迫した状況となった際に、短文で警戒を呼びかける際に発表されることが多いようです。下の例では、直前の情報では次回は11時頃発表を予定していたところ、急激な気象状況の悪化によって、注意を呼びかける短文の情報を臨時で発表しています

枝番付き情報の例(eventId FJPOS260002_202606260655)

大阪府気象解説情報（台風第７号） 第6号

2026年06月26日 06時55分 大阪管区気象台 発表
#台風 #大雨 #氾濫 #落雷 #突風

前線の活動が活発となっており、大阪市や東部大阪を中心に、重大な浸水害や土砂災害、洪水災害が発生する可能性が高い危険な状況となっています。各自が安全確保を図るなど、迷うことなく適切な防災行動をとってください。

［補足事項］
本文なし。

上の枝番付き情報の直前に発表された情報(eventId FJPOS260002)

大阪府気象解説情報（台風第７号） 第5号

2026年06月26日 06時31分 大阪管区気象台 発表
#台風 #大雨 #氾濫 #落雷 #突風

台風第７号は、２７日昼過ぎから夕方にかけて大阪府に最も接近する見込みです。２６日朝にかけて低い土地の浸水に、２６日昼前にかけて土砂災害、河川の増水や氾濫に厳重に警戒してください。また、落雷や竜巻などの激しい突風にも注意してください。

［気象概況］
　台風第７号は、２６日４時には久米島の北北西にあって……

～（中略）～

［防災事項］
　大阪府では、局地的に雷を伴った激しい雨や非常に激しい雨が降っています。
　２６日６時現在、レベル４土砂災害危険警報、レベル４大雨危険警報、レベル４氾濫危険警報を発表している市町があります。災害発生の危険を察知し、安全なうちに避難するために、キキクルで現在地の危険度を確認するようにしてください。
　２６日朝にかけて低い土地の浸水に、２６日昼前にかけて土砂災害、河川の増水や氾濫に厳重に警戒してください。
　……

［補足事項］
今後発表する防災気象情報に留意してください。
次の「大阪府気象解説情報（台風第７号）」は、２６日１１時頃に発表する予定です。

areaTypeとareaCode／areaCodesを気象庁ホームページ内の地域情報ファイル( https://www.jma.go.jp/bosai/common/const/area.json )と組み合わせることで、情報の対象地域を判定することができます。潮位情報などではareaCodesは複数となることがあるのでこれを読み、すべての対象地域で表示するのが良いでしょう

個別の気象情報({jsonName}.json)

{jsonName}.json

{
  "controlTitle": "全般気象解説情報",
  "editorialOffice": "気象庁本庁",
  "publishingOffice": "気象庁",
  "headTitle": "全般気象解説情報（高温）",
  "reportDatetime": "2026-07-17T15:00:00+09:00",
  "eventId": "ZJPTK260025",
  "infoType": "発表",
  "serial": "1",
  "headlineText": "東日本では２０日から２４日頃にかけて、西日本では２４日頃にかけて気温の高い状態が続くため、熱中症など健康管理に注意してください。", // 見出し
  "headlineInfo": [
    {
      "type": "情報タグ",
      "kind": [
        {
          "name": "情報タグ",
          "condition": "高温"
        }
      ]
    }
  ],
  "meteorologicalInfos": [ // 予報・観測情報
    // ～（中略）～
  ],
  "commentText": "［気象概況］<br>東日本では２０日から２４日頃にかけて、西日本では２４日頃にかけて高気圧に覆われる日や、暖かい空気に覆われる日があるため、気温が３５度以上となる所がある見込みです。<br><br>［防災事項］……" // 文章化された本文
}

meteorologicalInfos部は極めて複雑な構造をしています。読み取ることによって予想される雨量や各地で観測された風速などを機械的に読み取ることができますが、commentText部分にこれを文章化した内容が含まれているため、文章で表示するだけならそちらを読めば良いでしょう

表示用のコード

ここまでの内容を使って、表示用のコードを書いていきます

情報リスト

書式を指定します

  <style>
    *{ font-family:sans-serif;}
    table, tr, td, th{ border-collapse:collapse; text-align:center; border-style:solid; border-width:1px 0; border-color:#d8d8db;}
    th,td{ padding:2px 8px;}
    th{ background-color:#f1f1f4;}
    th.japan  { color:black; background:#bfe4ff;} /* 全国(japan)の情報の背景色 */
    th.centers{ color:black; background:#ffff80;} /* 地方(centers)の情報の背景色 */
    th.offices{ color:black; background:#ffcabf;} /* 府県(offices)の情報の背景色 */
    strong{ color:#ff4b00; font-weight:bold;}
    .bbt{ border-top-width:3px;} /* 地域の区切りで上罫線を太くするためのクラス(bbt=boldBorderTop) */
  </style>

地域の選択欄を作成します。今回は、カンマで区切って「japan」「centers」「offices」の各対象地域を指定する形式としています

たとえば 010000,010100,011000|012000|013000|014030|014100|015000|016000|017000 ならば、
areaType:japan(全般情報)、areaCode:010000(気象庁発表)
areaType:centers(地方情報)、areaCode:010100(札幌管区気象台発表)
areaType:offices(府県情報)、areaCode:011000|012000|013000|014030|014100|015000|016000|017000(道内の各気象台発表)
を表します(地域コードは area.json に記載)

<!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; text-align:center; border-style:solid; border-width:1px 0; border-color:#d8d8db;}
    th,td{ padding:2px 8px;}
    th{ background-color:#f1f1f4;}
    th.japan  { color:black; background:#bfe4ff;}
    th.centers{ color:black; background:#ffff80;}
    th.offices{ color:black; background:#ffcabf;}
    strong{ color:#ff4b00; font-weight:bold;}
    .bbt{ border-top-width:3px;}
  </style>
</head>
<body>
  <h1>防災速報・解説情報(一覧)</h1>
  <div id="menu">
    <select id="area">
      <option value="010000,010100|010200|010300|010400|010500|010600|010700|010800|010900|011000|011100,">全般・地方</option>
      <option value="010000,010100,011000|012000|013000|014030|014100|015000|016000|017000">北海道</option>
      <option value="010000,010200,020000|030000|040000|050000|060000|070000">東北</option>
      <option value="010000,010300,080000|090000|100000|110000|120000|130000|140000|190000|200000">関東甲信</option>
      <option value="010000,010400,210000|220000|230000|240000">東海</option>
      <option value="010000,010500,150000|160000|170000|180000">北陸</option>
      <option value="010000,010600,250000|260000|270000|280000|290000|300000">近畿</option>
      <option value="010000,010700,310000|320000|330000|340000">中国地方</option>
      <option value="010000,010800,360000|370000|380000|390000">四国</option>
      <option value="010000,010900,350000|400000|410000|420000|430000|440000">九州北部</option>
      <option value="010000,011000,450000|460040|460100">九州南部・奄美</option>
      <option value="010000,011100,471000|472000|473000|474000">沖縄</option>
    </select>
  </div>
  <div id="out"></div>
  <script>
    "use strict";
    let params = new URLSearchParams(window.location.search);
    let areaInfos = {};

    initialize();

    function initialize(){
      if( params.get("area")!=null){
        document.getElementById("area").value = params.get("area");
      }
      getAreaInfos();
    }

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

    document.getElementById("area").addEventListener("change",function(e){
      get();
    });

    function get(){
      fetch("https://www.jma.go.jp/bosai/information/data/r8/information.json")
      .then((response) => response.json())
      .then((reports) => analyse(reports));
    }

    function analyse(reports){
      let infos = {"japan":{}, "centers":{}, "offices":{}};
      for( let report of reports){
        let areaType = report['areaType'], areaCodes = report['areaCodes'];
        for( let areaCode of areaCodes){
          if( infos[areaType][areaCode]==undefined){
            infos[areaType][areaCode] = [];
          }
          infos[areaType][areaCode].push( report);
        }
      }
      display( infos);
    }

    function display( infos){
      let out = "";

      let targetAreas = document.getElementById("area").value.split(",");

      out += "<table>";
      for( let i=0; i<targetAreas.length; i++){
        let areaType;
        if( i==0){
          areaType = "japan";
        }else if( i==1){
          areaType = "centers";
        }else if( i==2){
          areaType = "offices";
        }else{
          continue;
        }
        for( let areaCode of targetAreas[i].split("|")){
          let areaName;
          if( areaType=="japan" && areaCode=="010000"){
            areaName = "全国";
          }else if( areaInfos[areaType]!=undefined && areaInfos[areaType][areaCode]!=undefined){
            areaName = areaInfos[areaType][areaCode]['name'];
          }
          if( areaName==undefined){
            continue;
          }
          if( infos[areaType][areaCode]==undefined){
            out += "<tr class='bbt'><th class='" + areaType + "'>" + areaName + "</th><td></td><td></td><td></td></tr>";
          }else{
            infos[areaType][areaCode].reverse();
            for( let j=0; j<infos[areaType][areaCode].length; j++){
              let info = infos[areaType][areaCode][j];
              if( j==0){
                out += "<tr class='bbt'><th class='" + areaType + "' rowspan='" + infos[areaType][areaCode].length + "'>" + areaName + "</th>";
              }else{
                out += "<tr>";
              }
              let headTitle = info['headTitle'], serial = info['serial'];
              headTitle += " " + serial + "号";
              if( info['controlTitle']!=undefined && (info['controlTitle'].includes("気象防災速報") || info['controlTitle'].includes("竜巻注意情報"))){
                out += "<th><strong>" + headTitle + "</strong></th>";
              }else{
                out += "<th>" + headTitle + "</th>";
              }
              let reportDatetime = info['reportDatetime'].replaceAll("-","/").replaceAll("T"," ").substring(5,16);
              out += "<td>" + reportDatetime + "</td>";
              out += "<td><a href='./info.html?jsonName=" + info['jsonName'] + "'>詳細</a></td>";
              out += "</tr>";
            }
          }
        }
      }
      out += "</table>";

      document.getElementById("out").innerHTML = out;
    }
  </script>
</body>
</html>