WindowsFormsアプリケーションとして作成したOpen Map WeatherのAPIを用いて全国各地の天気予報を取得するをBlazor WebAssemblyで作成してみました。
オリジン間共有仕様になっているのでそのまま呼び出しが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
@page "/" @inject HttpClient httpClient @using Newtonsoft.Json; <h1>OpenWeatherMap で 天気予報を取得</h1> <div class="form-group"> <input type="button" @onclick="Search" value="検索" /> <select name="area" @bind="@SelectedValue"> @foreach (var pair in KeyValuePairs) { <option value="@pair.Value">@pair.Key</option> } </select> <select name="count" @bind="@SelectedCount"> <option value="8">24時間</option> <option value="16">48時間</option> <option value="24">72時間</option> <option value="32">96時間</option> </select> </div> <hr /> @if (weatherResult != null && weatherResult.List.Length != 0) { <div>CityName: @weatherResult.City.Name</div> <table class="table"> <thead> <tr> <th scope="col">日時</th> <th scope="col">天気</th> <th scope="col">気温</th> <th scope="col">湿度</th> <th scope="col">気圧</th> <th scope="col">風</th> </tr> </thead> <tbody> @foreach (var weatherSummary in weatherResult.List) { <tr> <td>@weatherSummary.DtTxt.DateTime.AddHours(9).ToString("M月d日 HH時mm分")</td><!-- 時刻 --> <td>@GetWeather(@weatherSummary.Weather[0].Main)</td><!-- 天気 --> <td>@weatherSummary.Main.Temp ℃</td><!-- 気温 --> <td>@weatherSummary.Main.Humidity ％</td><!-- 湿度 --> <td>@weatherSummary.Main.Pressure hPa</td><!-- 気圧 --> <td>@WindDirect(@weatherSummary.Wind.Deg) @weatherSummary.Wind.Speed (m/sec)</td><!-- 風 --> </tr> } </tbody> </table> } @code { string apiKey = "apiキーは各自で取得してください"; Dictionary<string, string> KeyValuePairs = new Dictionary<string, string>(); string SelectedValue = ""; string SelectedCount = ""; private WeatherResult weatherResult { get; set; } = null; protected override async Task OnInitializedAsync() { await Task.Run( () => { InitKeyValuePairs(); SelectedValue = "1850147"; // 最初は「東京」を選択 SelectedCount = "16"; // 最初は「2日」分を取得する設定にする }); } public async void Search() { string url = String.Format("https://api.openweathermap.org/data/2.5/forecast?id={0}&units=metric&cnt={1}&APPID={2}", SelectedValue, SelectedCount, apiKey); string str = await httpClient.GetStringAsync(url); this.weatherResult = JsonConvert.DeserializeObject<WeatherResult>(str); this.StateHasChanged(); } } |
void InitKeyValuePairs()メソッドはOpen Map WeatherのAPIを用いて全国各地の天気予報を取得するで使用しているものと同じです。
また、GetWeather(string str)メソッドとWindDirect(double ang)メソッド、WeatherResultクラスとその関連のクラス（Cityクラス、Coordクラス、WeatherSummaryクラス、Cloudsクラス、MainClassクラス、Snowクラス、Sysクラス、Weatherクラス、Windクラス）はOpen Map WeatherのAPIを用いて天気予報を取得するで使用しているものと同じです。
