【学習】WinFormsで作る天気チェッカー（天気API版）

クラスで整理する版では、クラスを使って天気チェッカーを作る基本を学びました。

今回は 天気予報 API（livedoor 天気互換） を使って、気象庁の天気予報を取得する版を作ります。ネットワーク接続が必要ですが、実際の天気が表示されます。

今日作るもの

ComboBox で地域を選ぶと、

今日の天気アイコンが PictureBox に表示される

という動きをします。例：東京都 を選択 → 東京の今日の天気アイコンが表示されます。

使用するAPI

天気予報 API（livedoor 天気互換）を使用します。

データ元: 気象庁の天気予報
認証: 不要（APIキー不要）
URL形式: https://weather.tsukumijima.net/api/forecast/city/{city_id}

※利用時は独自の User-Agent を設定し、連続アクセスは 0.5 秒以上間隔を空けてください。

前提

クラスで整理する版を一通り学んでいること
または、WinForms・クラス・HttpClient の基本を理解していること

都市IDについて

API は 都市ID で地域を指定します。ID の一覧は primary_area.xml で確認できます。

表示名	都市ID
東京都	130010
大阪府	270000
愛知県	230010
福岡県	400010

天気APIのJSON構造

API は forecasts 配列で今日・明日・明後日の天気を返します。今日の天気アイコンは forecasts[0].image.url にあります。

{
  "forecasts": [
    {
      "dateLabel": "今日",
      "telop": "晴れ",
      "image": {
        "url": "https://www.jma.go.jp/bosai/forecast/img/100.svg"
      }
    }
  ]
}

天気情報を表すクラス（WeatherApiResponse）

API のレスポンスに合わせてクラスを定義します。

WeatherApiResponse.cs をプロジェクトに追加します。

using Newtonsoft.Json;
using System.Collections.Generic;

class WeatherApiResponse
{
    [JsonProperty("forecasts")]
    public List<ForecastItem> Forecasts { get; set; }
}

class ForecastItem
{
    [JsonProperty("image")]
    public ImageItem Image { get; set; }
}

class ImageItem
{
    [JsonProperty("url")]
    public string Url { get; set; }
}

Form1.cs の変更点

クラス版からの主な変更は次のとおりです。

API URL を https://weather.tsukumijima.net/api/forecast/city/{city_id} に変更
都市ID を 130010, 270000, 230010, 400010 に変更
HttpClient に User-Agent を設定
今日の天気 を forecasts[0].image.url から取得

private void CitySelected(object sender, EventArgs e)
{
    string selectedName = areaBox.Text;
    CityInfo city = FindCity(selectedName);
    if (city == null) return;

    string url = $"https://weather.tsukumijima.net/api/forecast/city/{city.Code}";

    var client = new HttpClient();
    client.DefaultRequestHeaders.Add("User-Agent", "WeatherChecker/1.0");
    string json = client.GetStringAsync(url).Result;

    var response = JsonConvert.DeserializeObject<WeatherApiResponse>(json);
    string iconUrl = response.Forecasts[0].Image.Url;
    weatherIcon.ImageLocation = iconUrl;
}

完成コード（Form1.cs）

using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Windows.Forms;
using Newtonsoft.Json;

namespace WeatherChecker
{
    public partial class Form1 : Form
    {
        List<CityInfo> cities;

        public Form1()
        {
            InitializeComponent();

            cities = new List<CityInfo>
            {
                new CityInfo { Name = "東京都", Code = "130010" },
                new CityInfo { Name = "大阪府", Code = "270000" },
                new CityInfo { Name = "愛知県", Code = "230010" },
                new CityInfo { Name = "福岡県", Code = "400010" }
            };

            foreach (var city in cities)
            {
                areaBox.Items.Add(city.Name);
            }
        }

        private void CitySelected(object sender, EventArgs e)
        {
            string selectedName = areaBox.Text;
            CityInfo city = FindCity(selectedName);
            if (city == null) return;

            string url = $"https://weather.tsukumijima.net/api/forecast/city/{city.Code}";

            var client = new HttpClient();
            client.DefaultRequestHeaders.Add("User-Agent", "WeatherChecker/1.0");
            string json = client.GetStringAsync(url).Result;

            var response = JsonConvert.DeserializeObject<WeatherApiResponse>(json);
            weatherIcon.ImageLocation = response.Forecasts[0].Image.Url;
        }

        private CityInfo FindCity(string name)
        {
            foreach (var c in cities)
            {
                if (c.Name == name) return c;
            }
            return null;
        }

        private void ExitMenuClicked(object sender, EventArgs e)
        {
            this.Close();
        }
    }
}

重要ポイント

天気予報 API：気象庁のデータを JSON で取得できる
User-Agent：API 利用規約に従い独自の値を設定する
入れ子のJSON：forecasts[0].image.url のようにクラスを分けて定義する
都市ID：primary_area.xml で地域ごとの ID を確認する

発展アイデア

telop（晴れ、曇りなど）や気温を表示する
明日・明後日の天気も表示する
ローカルJSON版と比較して、オフライン対応を学ぶ

まとめ

天気予報 API を使うと、気象庁の天気予報をアプリに表示できます。入れ子になった JSON をクラスで表す方法も、実践的なスキルとして身につきます。