SHOEISHA iD

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

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

ComponentZine(ComponentOne)(AD)

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

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

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

FlexGridを表示するページの作成

 最後にFlexGridで表示するRazorページを追加しましょう。

[リスト4]PrefecturesSum.razor
@page "/prefecturessum"
~略~

<FlexGrid Class="custom" ItemsSource="prefectures"
    DefaultColumnWidth="GridLength.Star" AutoGenerateColumns="false"
    ColumnHeaderStyle="@("font-weight:bold;")">
  <FlexGridColumns>
    <GridColumn Binding="Name_ja" Header="都道府県"
      HorizontalAlignment="C1HorizontalAlignment.Center"></GridColumn>
    <GridColumn Binding="Cases" Format="N0" Header="陽性"
      HorizontalAlignment="C1HorizontalAlignment.Right"></GridColumn>
    <GridColumn Binding="CasesHt" Format="N1" Header="10万人"
      HorizontalAlignment="C1HorizontalAlignment.Right"></GridColumn>
~略~
   </FlexGridColumns>
</FlexGrid>

~略~
@code {
  // 都道府県毎の累計
  private PrefectureList[] prefectures;

  protected override async Task OnInitializedAsync()
  {
    // ASP.NET Core Web APIからJSONデータを取得する
    prefectures =
      await Http.GetFromJsonAsync<PrefectureList[]>("api/covid19/prefectures");
    }
}

 FlexGridは、Blazorコンポーネントになっており、最低限データソースをItemsSource属性に設定するだけで表示が可能です。ここでは、<FlexGridColumns>タグで、各項目の名称や書式を設定しています。

 FlexGridのデータソースは、PrefectureListオブジェクトの配列とし、先ほど作成したAPIからGetFromJsonAsyncメソッドで取得しています。

 FlexGridでの表示は、単なるテーブルに見えますが、項目名をクリックすることで、その項目をキーとしたソートが可能です。またセルをクリックすることで、編集可能になります。値を変更すると、PrefectureListクラスで定義された式に応じて、陽性率や死亡率が動的に再計算されることがわかります。

ソートや編集が可能
ソートや編集が可能

FlexChartでオープンデータをグラフ表示する

 次は、FlexChartを使ってみましょう。こちらも、データソースの準備に関しては、FlexGridと同じ流れになります。なお元のデータとして、新型コロナウイルス感染症対策推進室で公開されている日毎の感染者数を利用します。

FlexChartでの表示
FlexChartでの表示

データソースの準備

 FlexChartで表示するデータのエンティティクラスとして、次のように定義しました。

[リスト5]Covid19.cs
// 日毎の陽性者数
public class NewCases
{
    public DateTime Date { get; set; } // 日付
    public int Cases { get; set; }     // 新規陽性者数
    public float Avg7 { get; set; }    // 7日間移動平均(新規陽性者)
}

 このJSONデータを返すWebAPIは、先ほどのCovid19Controllersクラスに、新しいメソッド(GetNewCases)を追加して作成します。

[リスト6]Covid19Controllers.cs
~略~
// 外部APIのJSONデータ参照用クラス
private class JapanAll
{
~略~
}
[Route("newcases/{pref}")]
public IEnumerable<NewCases> GetNewCases(string pref)
{
    // 日毎の累計数
    var japanall =
      Client.GetFromJsonAsync<JapanAll>(
        $"https://opendata.corona.go.jp/api/Covid19JapanAll?dataName={pref}").Result;

    // 日毎の陽性者数
    var list = new List<NewCases>();

    // 日毎の累計数から新規、平均の陽性者を計算する
    for (int i = 0; i < japanall.itemList.Count - 7; i++)
    {
        list.Add(new NewCases
        {
            Date = japanall.itemList[i].date,
            // 前日との累計差が新規陽性者数(1)
            Cases = japanall.itemList[i].npatients -
                japanall.itemList[i + 1].npatients,

            // 過去7日の累計差から7日間移動平均を求める(2)
            Avg7 = (float)Math.Round((japanall.itemList[i].npatients -
                japanall.itemList[i + 7].npatients) / 7f, 1,
                    MidpointRounding.AwayFromZero)
         });
    }
    return list;
}

 追加したGetNewCasesメソッドでは、前述のGetPrefecturesメソッドと同様に、外部のWeb APIから返却されるJSONデータを、いったんC#のオブジェクト(JapanAll[])に変換しています。このAPIでのJSONデータは次のようになっていて、itemListプロパティに、時系列の昇順で陽性者の累計数が入っています。

{
~略~
   "itemList":[
      {
         "date":"2021-02-18",
         "name_jp":"東京都",
         "npatients":"108782"
      },
      {
         "date":"2021-02-17",
         "name_jp":"東京都",
         "npatients":"108337"
      },
~略~

 データには日毎の累計数しかないので、前日と7日前の累計を利用して、新規陽性者数(1)と、新規陽性者数の7日間移動平均(2)を計算して、NewCasesオブジェクトに変換しています。

 Route属性の{pref}は、都道府県名を指定するパラメータです。例えば、/api/covid19/newcases/東京都とアクセスした場合、prefには「東京都」の文字列が設定されます。

FlexChartを表示するページの作成

 FlexChartを表示するページは、次のようなコードになります。

[リスト7]Chart.razor
<FlexChart Class="chart" HeaderContent="日毎の陽性者数"
    HeaderStyle="font-size:20px"
    LegendPosition="Position.Top" LegendStyle="font-size:16px"
    BindingX="Date" ItemsSource="itemssource">
    <SeriesCollection>
      <Series Name="陽性者数" ChartType="ChartType.Column" Binding="Cases" />
      <Series Name="7日間移動平均" ChartType="ChartType.Line" Binding="Avg7" />
    </SeriesCollection>
    <AxisCollection>
      <Axis AxisType="AxisType.X" Position="Position.Bottom" MajorGrid="true" />
      <Axis AxisType="AxisType.Y" Position="Position.Left" MajorGrid="true"
        Min="0" Max="2500" />
    </AxisCollection>
</FlexChart>

@code {
    // 日毎の陽性者数
    private NewCases[] itemssource;

    protected override async Task OnInitializedAsync()
    {
        // ASP.NET Core Web APIからJSONデータを取得する
        itemssource = await Http.GetFromJsonAsync<NewCases[]>(
            "/api/covid19/newcases/東京都");
    }
}

 FlexGrid同様、FlexChartもBlazorコンポーネントになっています。データソースをItemsSource属性、X軸に設定するプロパティをBindingX属性で指定します。

 また、Y軸に表示するデータ系列は、SeriesCollectionタグで指定します。データ系列を複数個指定することも可能で、今回は陽性者数と、7日間移動平均の2つを設定しています。各データ系列は、Seriesタグを使って、名前や対応するプロパティ、グラフの種類などを設定します。グラフ種類で指定している値の意味は、ChartType.Columnが縦の棒グラフ、ChartType.Lineは折れ線グラフを示します。

 AxisCollectionタグは、縦軸(Y軸)、横軸(X軸)の設定です。こちらも複数の軸の指定が可能です。各軸は、Axisタグを使って、表示位置や値の範囲などを設定します。MajorGrid属性は、軸のグリッド線の表示指定です。

最後に

 本記事では、「ComponentOne for Blazor」に同梱されるFlexGrid、FlexChartを利用したBlazorアプリケーションの開発手順を紹介しました。FlexGrid、FlexChart以外にも、業務アプリを効率的に開発できるコントロールがそろっています。ComponentOneは、Blazorであっても、業務システム開発には欠かせない定番ライブラリとなることは間違いないでしょう。

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング