Blazorでドラクエウォークのお土産近いところ調べるサイト作った話

Qiita Advent Calendar 2019　C# の記事です。C#でWEBアプリケーションが作成できるBlazorの良いところとか、ロードマップとか記載しようと思いましたが、ドラクエウォークでお土産近いところ調べたいなと思って、気づいたらコード書いてました！今は反省している。。。

Demo

何県人かばれてしまう。。

概要

現在地から、ドラクエウォークのお土産に近い順に表示します。 PCのブラウザはほとんど大丈夫だと思うのですが、ブラウザによっては、動かないかもです。 GeoLocation情報はブラウザから取得しており、JavaScriptを使用しています。デバイスによってはGPSの精度にばらつきがありますので、必ずしも正確な距離が出ない場合があります。
BlazorはJavaScriptレスをウリにしている感じですが、現状はJavaScriptとは切っても切れない関係ですね。

Blazorの説明。HTMLにインラインでC#コーディング

Razor構文に慣れると非常に楽です。C#を使って、要素に対し直感的に扱うことができるので、この辺はすんなりと書けるようになると思います。また、LINQもバシバシ使うことができます。

Index.Razor

@page "/"
@inject HttpClient Http

@using AspNetMonsters.Blazor.Geolocation
@inject LocationService  LocationService
<h3>ドラクエウォーク　現在地から近いところTop20</h3>

@*データがある場合、表示*@
@if(Datas.Any())
{
    @foreach (var d in Datas)
    {
        <SurveyPrompt Title="@(Pres.Where(p=>p.Id==d.Pre).First().Name)" Data="@d"/>
    }
}

@functions
{
    Location location;

    private Omiyage[] Datas = new Omiyage[0];

    private Pre[] Pres = new Pre[0];


    protected async override Task OnInitializedAsync()
    {
        // 現在地取得
        location = await LocationService.GetLocationAsync();

        // お土産データ取得
        Datas = await Http.GetJsonAsync<Omiyage[]>("data.json");

        // 県名取得
        Pres = await Http.GetJsonAsync<Pre[]>("pre.json");

        //データのセット
        SetData();
    }

    //データのセット
    void SetData()
    {
        // 現在地の取得
        var lat1 = (double)location?.Latitude;
        var lon1 = (double)location?.Longitude;

        // 現在地との距離を計算
        foreach(var data in Datas)
        {
            data.SetKyori(lat1, lon1);
        }

        // 近い順に20個まで取得
        Datas = Datas.OrderBy(p => p.Kyori).Take(20).ToArray();
    }

}

Blazorの説明。.Netのライブラリが豊富！

Blazor Client-Sideアプリケーションは、WebAssembly によりブラウザ上で実行されます。現時点ではプレビュー版ではあるのですが、ほぼ実用レベルに近いところまで行っているのではないでしょうか。もちろんブラウザでできること以外のことはできませんが、nugetパッケージは適用できるパッケージが多く、既存のノウハウを活かした開発ができるようになっています。

2点間距離の計算も、一発。。これ、ブラウザ上で動いているわけですから、違和感さえ覚えます。

Model.cs

/// <summary>
/// 現在地との距離
/// </summary>
public double Kyori { get; set; }

/// <summary>
/// 距離を算出する
/// </summary>
/// <param name="lat2">現在の緯度</param>
/// <param name="lon2">現在の経度</param>
public void SetKyori(double lat2,double lon2)
{
    Kyori = new System.Device.Location.GeoCoordinate(Lat, Lon).GetDistanceTo(new System.Device.Location.GeoCoordinate(lat2, lon2));
}

Blazorに興味を持ったら。。。

このアプリケーションの作成には、それほど時間をかけてません（位置情報の収集には時間がかかりましたが。。）Blazorに興味を持ったら、BlazorのQiita Advent Calendarにアクセスしてみてください。