懲りずに KLWP の天気予報機能を使おうという算段。今回は HTML ではなく JSON から情報を取り出す方法で臨みます。
前回のものと問題点
前回は So-net の天気予報のページの HTML から一部を切り取って表示する試みでした。
KLWPに明日一日の降水確率を表示させたい 後編 (成功した - 損するあほう
当時は表示にある程度成功したものの、これには問題がありました。HTML は頻繁に変更される点が大きな障壁として立ちはだかります。
Web ページはコンテンツの追加や表示の都合でよく変更されます。ですが私の書いたスクリプトは固定したキーワードでしか探せないため、こうした変更に弱かったのです。っていうか So-net の天気サービスが2022年度末で終了しちゃってるし。
tenki.jp は「ブラウザ・RSSリーダー以外のものを用いて取得し利用する行為は禁止」らしいです。 KLWP からの wg() ってすごく微妙なラインっぽいんですがどうなんでしょうか。
これを乗り越えるために、もっと扱いやすい別の情報源に頼って天気予報を作る必要があります。
使うサービスと JSON
今回使用するのは 天気予報 API（livedoor 天気互換） というサービス。
簡単にまとめると、気象庁が配信している天気情報を JSON 形式にまとめなおして配信してくれているサービスです。ありがたや。
加えて、天気アイコンも URL で返してくれます。気象庁が用意している SVG 形式のアイコンがそのまま使用できます。
必要そうな情報は以下の通り（順不同）。
- 気象台の場所
- 天気概況
- 天気予報の配列（今日・明日・明後日）
- 日付
- 天気
- 最高・最低気温
- 降水確率（6時間毎）
- 天気アイコン
これら以外にもいろいろな情報がレスポンスには含まれています。
実際の JSON 内でのプロパティ名は、提供元もしくは実物を見て確認してください。
JSON を使うと何がいいのか
読みやすく使いやすいのが JSON の良さです。
JSON とは?って方に少しだけ説明すると、 JSON はプログラミング言語と人間の言語の間みたいな書式です。シンプルな階層構造で出来ており、読み書きもしやすいのです。
実物を見てみるとわかるかもしれませんので置いておきます。
左が JSON 、右が HTML 。パッと見て何が書かれているかわかりやすいのが左の JSON ではないでしょうか。
JSON 形式はアプリケーションが解析しやすい形式ですので、 KLWP 上でも簡単に扱えます。
例えば以下のように、必要な情報をスッキリしたスクリプトで取り出せます。
$wg(gv(wfApi), json, .forecasts[0].date)$この1行で今日の日付テキストが取得可能。なんてすごいんだ。
A[0].B というのは "1番目のA、の中にあるBというパラメータ" を表します。ドットが「の」を意味します。
上の例だと "1つ目の forecasts が持つ、 date の値" を意味しますので、日付が表示されるわけです。
ちなみに以前使った HTML から取得するための KLWP 上のスクリプトはこんなかんじ。
$tc(split, tc(splict, tc(split, wg(gv(wOsaka), raw), "降水</th>
<td>", 1), "</td>
<td>",
if(df(hh)<=4, 0, df(hh)>=5&df(hh)<=10, 1, df(hh)>=11&df(hh)<=16, 2, df(hh)>=17&df(hh)<=23, 3, 0)), "<", 0)$ゲエ出そうなくらい長いし面倒くさい、読みづらい。もう何書いてるのか自分で読めません。
これでいかに JSON が扱いやすいかわかってくれたかと思います。無理にわからなくても大丈夫です。私もなんとなく理解したかなってくらいです。
詳細は MDN の JSON の操作 も参考してみてください。
KLWP で天気予報を作っていく
まずは下ごしらえとして、グローバル変数 wfApi （テキスト）に取得したい URL を設定します。
https://weather.tsukumijima.net/api/forecast/city/aaaaaaaaaaaa の部分に自分の都市の数値を代入します。主要都市は以下に載せます。それ以外は探してください → 1次細分区定義表
- 東京: 130010
- 名古屋: 230010
- 大阪: 270000
- 福岡: 400010
先程のスクリプトを使用して情報が取得できているか確認します。
$wg(gv(wfApi), json, .forecasts[0].date)$テキストアイテムの式エディタにこれを打ち込んで、本日の日付が表示されたら大丈夫。
ではどんどん作っていきましょう。
各項目の forecast[0] を forecasts[1], forecasts[2] にすればそれぞれ明日、明後日のデータになります。必要に合わせて追加してください。
最高最低気温
まずは最低気温。
$wg(gv(wfApi), json, .forecasts[0].temperature.min.celsius)$℃
次に最高気温。
$wg(gv(wfApi), json, .forecasts[0].temperature.max.celsius)$℃仕様として、本日の最低気温が null になるのと、17時以降は最高気温も null となります。こればっかりはどうしようもないので、 私は KLWP の天気機能を使いました。
天気アイコンの取得
画像アイテムのモードを SVG に設定し、 Svg 形式の箇所を数式に変更。以下のスクリプトを入力。
$wg(gv(wfApi), json, .forecasts[0].image.url)$保存して画像が読み込まれたことを確認してください。
降水確率の取得
降水確率はの4つの時間帯に分けられています。
$wg(gv(wfApi), json, .forecasts[0].chanceOfRain.CCCCCC)$CCCCCC の箇所に下の文字列を代入して取得します。
- 00-06時: T00_06
- 06-12時: T06_12
- 12-18時: T12_18
- 18-24時: T18_24
経過した時間帯は "--%" を返して来ます。そのへんを回避するには if() で使い分ければいいんではなかろうかと。
例えば、時間帯によって表示する降水確率を変えるには次のような条件文になるかなと思います。
$if(
df(hh) <= 3, wg(gv(wfApi), json, .forecasts[0].chanceOfRain.T00_06),
df(hh) <= 9, wg(gv(wfApi), json, .forecasts[0].chanceOfRain.T06_12),
df(hh) <= 15, wg(gv(wfApi), json, .forecasts[0].chanceOfRain.T12_18),
df(hh) <= 21, wg(gv(wfApi), json, .forecasts[0].chanceOfRain.T18_24),
wg(gv(wfApi), json, .forecasts[1].chanceOfRain.T00_06)
)$長くなる分岐ですが、内容は以下の通り。
- 0-3時の間は0-6時の降水確率
- 3-9時の間は6-12時の降水確率
- 9-15時の間は12-18時の降水確率
- 15-21時の間は18-24時の降水確率
- 21-24時の間は*翌日*0-6時の降水確率
私は本日の天気予報のところにこれを使っています。これから雨が降るかどうかをざっくり知っておきたいからです。
一日を通してや半日ごとの降水確率は、2025年11月現在提供されていないようです。
完成!
これで最低限天気予報っぽい情報が表示できるようになったはず。作った日がバレますね。
私はもう十分ですが、今回使った方法を応用すれば他の情報も表示できますし、他の情報源から他の情報も引っ張ってこれます。
もっと美しいやり方があれば是非教えてください。
では、またお会いしましょう。
