気象庁の週間天気予報（JSON）をWebAPIのように呼び出して表示してみた

毎朝、秋葉原（東京都）の天気をつぶやくのですが、その参照元として必ずWeb上の天気予報を確認します。もう慣れたとはいえ、少しでも自動化できるのであれば改善したい。そんな思いから今回は天気予報のデータを参照するプログラムをつくってみようと思います。

- advertisement -

- advertisement -

目次

• 実装内容
• 週間予報の表示
• 自動化
• さいごに

実装内容

調べてみるとどうやら2021年2月に気象庁のサイトが大幅リニューアルされたことを機にJSONで天気予報データが取得できるようになったようです。

気象庁のかた曰く「仕様の継続性や運用状況のお知らせを気象庁はお約束していないという意味で、APIではない」とのことですが、政府標準利用規約に準拠してご利用いただけるということなので、このデータを参照することにします。

実装したいものは以下

• 週間天気予報をブログ（Webサイト）内で表示
• 当日の天気と予想最高気温をTwitterで自分自身にダイレクトメッセージ送信

これらを備忘も兼ね、手順や実装メモを以下に記します。

週間予報

まずは週間予報、フロント側で呼び出しと表示を行うしくみにしようと思います。

データ取得は単純で以下のURLにアクセスすれば取得することができます。認証やパラメータは不要です。

1. 天気予報概要
2. 今日・明日・明後日の天気予報

JSONの「130000」部分が東京地方をあらわしており、別の都道府県コードに置き換えればほかの場所のデータも同様に取得可能。

今回は週間天気予報なので「2」を参照、JavaScriptで非同期に呼び出し、結果をhtmlに反映という感じで実装してみます。

まず、このJSONの中には「weatherCodes」という、「晴れ」などの天気を定義したコードがあるため、以下でデータを確認してみます。

• https://www.jma.go.jp/bosai/forecast/

Chromeのコンソールから「Forecast.Const.TELOPS」と入力すると確認することができ、詳細は以下のように表現されているようです。

• 昼用アイコン
  例）”100.svg”
• 夜用アイコン
  例）”500.svg”
• 天気コード（100～は晴れ、200～は曇り、300～は雨、400～は雪）
  例）”100″
• 日本語表記
  例）晴
• 英語表記
  例）CLEAR

呼び出し例：

Forecast.Const.TELOPS[100]

結果：

[
"100.svg",
"500.svg",
"100",
"晴",
"CLEAR"
]

次にJSONからデータを抜き出してみます。ざっくり以下の情報を参照します。

1. 配列の最初の要素は、直近の天気予報 →ここではweather[0]とする
2. 配列のつぎの要素は、週間の天気予報 →ここではweather[1]とする

参照例：

• 発表元
  weather[0].publishingOffice
• 対象地域
  weather[0].timeSeries[0].areas[0].area.name
• 発表日時
  weather[0].reportDatetime
• 週間予報の日付
  weather[1].timeSeries[0].timeDefines
• 週間予報の天気
  weather[1].timeSeries[0].areas[0].weatherCodes
• 週間予報の予想最高気温
  weather[1].timeSeries[1].areas[0].tempsMax
• きょう、あすの日付
  weather[0].timeSeries[0].timeDefines
• きょう、あすの天気
  weather[0].timeSeries[0].areas[0].weatherCodes

これらの情報を取得して、表示させたものが以下

▼、より「」発表

発表時間により、週間天気予報の基準となる開始日が本日からだったり、翌日からだったりに変わるため、これらを判断し条件を付けて処理をしています。

ダウンロード：

• weather.zip

上記「weather.zip」をダウンロード後に解凍し「weather.html」の内容をブログやWebサイトの好きな場所に貼り付けます。

注意点：

• 日付の表示フォーマットを正規表現で雑に変換しているところがあります。
• ひとつのファイルにしたかったため、htmlタグに直接styleを記述しています。

履歴：

• ver.1.0.0 新規リリース（2021/11/16）
• ver.1.0.1 アイコンの取得不具合を修正（2021/12/14）

まだまだ改善点はありますが、何かの参考になればと思います。不具合やご要望あればご連絡ください。

自動化

次に、バックグラウンドの処理であさのつぶやきのテンプレートをつくり、Twitterのダイレクトメッセージで送るようにします。

今朝の秋葉原、「ニャンだよ？おまえ」と一瞬興味を示してくれたけど面倒くさそうにまた日向ぼっこに戻るねこ。予報では千代田区、晴れの天気、予想最高気温19℃だそうです｜ツルミロボBlog https://t.co/xLWEmyczyB pic.twitter.com/8RVuMtyD0g

— ﾂﾙﾐﾛﾎﾞ (@kaztsu) November 13, 2021

まず、毎朝のつぶやきは上記の内容になります。ここの天気の部分と予想最高気温の部分を変換します。

1. 週間予報とおなじように、PHPで気象庁のサイトからJSONを取得
2. その日の天気や予想最高気温を抜き出し、テンプレートの文字列に置き換え
3. 自分自身のTwitterアカウントに上記で置き換えた文字列をダイレクトメッセージで送信
4. cronで上記を起動するようスケジューリング

これにより、毎朝、気象庁の天気予報が届くようにします。しくみや、そもそも毎朝のつぶやき自体まだまだ改善の余地がありそうですが、いままでの天気予報サイトにアクセスして天気や予想最高気温を転記するやり方よりはだいぶ楽になるはずです。

さいごに

簡単ではありますが、ひさしぶりのプログラミングたのしかったです。やり方さえ思い浮かべられれば、実装はあっという間ですね。

気象庁のJSONから当日の天気を表示するサンプルはよく見かけたのですが、週間予報を表示するものが見当たらなかったので自分で書いてみました。

誰かの何かの参考になればとてもうれしいです。

関連リンク：

• 気象庁 Japan Meteorological Agency