SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)(AD)

業務アプリ開発用UIコンポーネント「ComponentOne」がBlazorに対応! サンプルで体験してみよう

  • X ポスト
  • このエントリーをはてなブックマークに追加

FlexGridでオープンデータを表示する(ローカルWeb APIの作成まで)

 FlexGridを利用して、次のようなページを作成します。

FlexGridサンプル
FlexGridサンプル

 新型コロナウイルス関連のオープンデータとして「COVID-19 Japan Web API」で提供されている都道府県毎の感染者数を利用しています。

プロジェクトの新規作成

 Visual Studioを起動して、新しいプロジェクトの作成を選択し、プロジェクトテンプレートとして、Blazor WebAssemblyアプリを選択します。プロジェクト名(BlazorAppCovid19)を設定した後、次の追加情報ダイアログでは、ターゲットフレームワークを.NET5.0にして、「ASP.NET Coreでホストされた」に必ずチェックを入れます。

追加情報
追加情報

 「ASP.NET Coreでホストされた」にチェックを入れると、生成されるソリューションには、Blazorアプリ単体(BlazorAppCovid19.Client)、ASP.NET Core(BlazorAppCovid19.Server)、さらにソリューション全体で共有するクラスを定義するプロジェクト(BlazorAppCovid19.Shared)と、3つのプロジェクトが生成されます。

 今回は外部サイトのWebAPIを利用しますが、その場合、同一生成元ポリシー(Same-Origin Policy)という考え方に基づき、ブラウザ上で動作するプログラムでは、異なるサイトのアクセスが制約されることがあります。これはセキュリティ攻撃を防止するためのもので、回避するにはサイト側でアクセスを許可する設定(CORS、Cross-Origin Resource Sharingと呼ばれる仕組み)が必要となります。

 そのため、Blazorアプリ単体で直接アクセスするのではなく、ローカルでASP.NET CoreのWeb APIサーバーを作成し(ASP.NET Core hosted)、ASP.NET Coreで外部WebAPIを参照するようにします。ASP.NET Coreのプログラムでは、外部サイトのアクセスに制限はありません。Blazorアプリは、ローカルのWeb APIを通じて、外部サイトとアクセスする形になります。

ASP.NET Core hostedでのプロジェクト構成
ASP.NET Core hostedでのプロジェクト構成

 なお今回のソリューションファイルのうち、編集、追加するファイルは以下の通りです。

BlazorAppCovid19.Client

  • \wwwroot\index.html:トップページ(編集)
  • \Shared\NavMenu.razor:各ページに遷移するメニュー(編集)
  • \Pages\PrefecturesSum.razor:都道府県毎の累計グリッド表示(新規)
  • \Pages\Chart.razor:東京都の日別感染者数グラフ表示(新規)

BlazorAppCovid19.Server

  • \Controllers\Covid19Controller.cs:Web API(コントローラー)クラス(新規)

BlazorAppCovid19.Shared

  • \Covid19.cs:共有オブジェクトの定義(新規)

プロジェクトにパッケージを組み込む

 プロジェクトのひな形が作成できたところで、プロジェクトにFlexGrid、FlexChartのパッケージをNuGetを使って組み込みます。Visual Studioのソリューションエクスプローラーで、先頭のソリューションを選択して右クリックし、表示されたメニューから[ソリューションのNuGet パッケージの管理]を選びます。そして参照タブをクリックし、「C1.Blazor.Grid.Ja」を検索します。右ペインのプロジェクトで、ClientとServerにチェックして、インストールボタンをクリックします。同様に、「C1.Blazor.Chart.Ja」もインストールします。

パッケージを組み込む
パッケージを組み込む

 次に、プロジェクトのwwwrootフォルダにある、index.htmlを開き、<head>タグ内にCSSファイルと、<body>タグ内の最後にJavaScriptファイルのURLを追加します。

[リスト1]index.html
~略~
    <link rel="stylesheet" href="/_content/C1.Blazor.Core/styles.css" />
    <link rel="stylesheet" href="/_content/C1.Blazor.Grid/styles.css" />
    <link rel="stylesheet" href="/_content/C1.Blazor.ListView/styles.css" />
    <link rel="stylesheet" href="/_content/C1.Blazor.Input/styles.css" />
</head>
~略~
    <script src="/_content/C1.Blazor.Core/scripts.js"></script>
    <script src="/_content/C1.Blazor.Input/scripts.js"></script>
    <script src="/_content/C1.Blazor.Grid/scripts.js"></script>
    <script src="/_content/C1.Blazor.Chart/scripts.js"></script>
</body>
~略~

FlexGridで表示するオブジェクトの定義

 今度は、FlexGridで表示するデータを準備します。FlexGridのデータソースとしては、配列やListオブジェクトを設定することができます。ここでは、都道府県毎の累計数を示すエンティティクラスPrefectureListを定義しました。陽性率などは、プロパティを使って計算した値を返すようにしています。

[リスト2]Covid19.cs
~略~
    // 都道府県毎の累計
    public class PrefectureList
    {
        public string Name_ja { get; set; }  // 都道府県
        public int Population { get; set; }  // 人口
        public int Cases { get; set; }       // 陽性者数
        public int Deaths { get; set; }      // 死亡者数
        public int Pcr { get; set; }         // 検査数
        public int Hospitalize { get; set; } // 入院患者数
        public int Severe { get; set; }      // 重症者数
        // 陽性率
        public float Positive_rate => Cases * 100f / Pcr;
        // 死亡率
        public float Deaths_rate  => Deaths * 100f / Cases;
        // 人口10万人あたりの陽性者数
        public float CasesHt  => Cases * 100000f / Population;
    }
~略~

 このクラスを定義するファイルは、Blazorアプリ単体とASP.NET Coreサーバーで共通して利用できるように作成します。ソリューションエクスプローラーで、プロジェクト名.Sharedフォルダを選択して、右クリックして表示されるメニューから、[追加]-[新しい項目]を選びます。次にクラスを選択し、ファイル名(本記事ではCovid19.cs)を入力して追加します。

ローカルのWeb APIを作成する

 次は、このPrefectureListの配列をJSONデータとして返すWeb APIを作成しましょう。ASP.NET Coreサーバープロジェクトに処理を追加します。大部分は、ひな形のフレームワーク(ASP.NET Core Web API)でまかなえますので、追加するコードは多くありません。

 ソリューションエクスプローラーで、プロジェクト名.ServerにあるControllersフォルダを選択して、右クリックして表示されるメニューから、[追加]-[コントローラー]を選びます。

 次の画面では、APIコントローラー-空を選択して、追加ボタンをクリックします。さらにファイル名(Covid19Controller.cs)を入力して、追加ボタンをクリックします。追加されるファイルは、ControllerBaseクラスを継承した、Web APIのコントローラークラスです。クラスの内容を次のように変更します。

[リスト3]Covid19Controller.cs
~略~
[ApiController]
[Route("api/[controller]")]
public class Covid19Controller : ControllerBase
{
    static readonly HttpClient Client = new HttpClient();

    // 外部APIのJSONデータ参照用クラス
    private class Prefecture
    {
~略~
    }
~略~

    [Route("Prefectures")]
    public IEnumerable<PrefectureList> GetPrefectures()
    {
        // JSONデータをPrefectureオブジェクトの配列に変換する(1)
        var prefecture =
          Client.GetFromJsonAsync<Prefecture[]>(
            "https://covid19-japan-web-api.now.sh/api/v1/prefectures").Result;

        var list = new List<PrefectureList>();
        foreach (Prefecture p in prefecture)
        {
            // PrefectureListオブジェクトに変換する(2)
            list.Add(new PrefectureList
            {
                Name_ja = p.name_ja,
                Pcr = p.pcr,
                Cases = p.cases,
                Deaths = p.deaths,
                Hospitalize = p.hospitalize,
                Severe = p.severe,
                Population = p.population
            });
        }
        return list;
    }
}
~略~

 都道府県毎の感染者数APIからは、次のようなJSONデータが返却されるので、GetFromJsonAsyncメソッドを使って、いったんC#のオブジェクト(Prefecture[])に変換します(1)。

[
  {
    "id":1,
    "name_ja":"北海道",
    "name_en":"Hokkaido",
    "lat":43.46722222,
    "lng":142.8277778,
    "population":5248552,
    "last_updated":{
~略~
    },
    "cases":18674,
    "deaths":647,
    "pcr":361220,
    "hospitalize":798,
    "severe":13,
    "discharge":17229,
    "symptom_confirming":0
  },
~略~

 その後に必要なデータのみを参照して、PrefectureListオブジェクトに変換します(2)。

 Prefectureクラスは、一時的にJSONデータを保持するためのエンティティクラスで、Visual Studioの機能を利用して作成可能です。このAPIのURLをブラウザ等でアクセスし、得られたJSONデータをコピーします。そして、Visual Studioの編集メニューから、[形式を選択して貼り付け]-[JSONをクラスとして貼り付ける]を選ぶと、JSONデータの内容に応じたエンティティクラスが自動で生成できます。

 なお、コントローラークラスのメソッドのルーティングは、Route属性で指定しています。GetPrefecturesメソッドは、[https://localhost:44383/]api/covid19/prefecturesというURLで呼び出されるようになります。またこのメソッドでは、単にListオブジェクトを返しているだけですが、これだけでJSON文字列を返すWeb APIとなります。

次のページ
FlexGridでオープンデータを表示する(ページの作成から)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 高江 賢(タカエ ケン)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/13722 2021/03/25 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング