BlazorでのWebアプリケーション開発手法１【C#】B06_最新の値でデータを更新する

ここまでの計測画面は、計測値・計測日時・計測場所のいずれも固定値を表示しているだけでした。本レクチャーでは、ボタンを押すたびに最新の計測値と計測日時がリアルタイムに切り替わるように機能を追加していきます。

Measureメソッドを作成する

まず、画面にボタンを配置し、そのボタンを押したときに「今の計測値」と「今の時間」が設定されるようにしたいと思います。そのための処理をまとめるメソッドとして、MeasurePage.razorの@codeブロックに private void Measure() を追加します。

図1　MeasurePage.razorのcodeブロックにMeasure()メソッドを追加したところ

ランダムな値を計測値として使う

計測処理の中身ですが、実際のセンサー値の代わりに、ここでは例としてランダムな値を使うことにします。乱数を生成するため、private Random _random = new Random(); というフィールドを追加します。

図2　Randomクラスのフィールド _random を追加したところ

続けて、Measure()メソッドの中で _random.NextSingle() を呼び出し、0以上1未満のランダムな小数値（float）を取得します。

図3　_random.NextSingle() でランダムな値を取得するコード

取得した値は var measureValue として一旦受け取り、これを画面表示用の文字列フィールド _measureValue に代入します。

図4　取得したmeasureValueを_measureValueへ代入する途中のコード

ただし、NextSingle()の戻り値をそのまま代入すると小数点以下が長く表示されてしまいます。そこで Math.Round 関数を使って小数点以下2桁に丸め、末尾に ” m/s” という単位の文字列を連結しておきます。

図5　Math.Round適用前のコード（丸め処理を追加する前）

図6　Math.Round(measureValue, 2) + ” m/s” で丸めと単位付与を行うコード

計測日時を設定する

計測日時を表す _measureDate には、DateTime.Now（現在日時）を代入します。そのままだと日時の表示形式が読みづらいため、ToString()に書式文字列を渡してフォーマットをかけておきます。

図7　_measureDate = DateTime.Now; を追加したコード

図8　DateTime.Now.ToString()で日時の書式を指定したコード

初期値を設定する

計測場所については、今回は「後から入力できるようにする」という将来の拡張は行わず、とりあえず “神戸” の固定値にしておきます。また、計測値と計測日時の初期値（アプリ起動直後、まだ一度も計測していない状態の表示）は “–” にしておきます。これで、Measure()を呼び出すと _measureValue と _measureDate が新しい値に置き換わる、という実装になりました。

図9　_measureValueと_measureDateの初期値を”–“にし、Measure()メソッドが完成した状態

private string _measureValue = "--";
private string _measureDate = "--";
private string _measureArea = "神戸";
private Random _random = new Random();
 
private void Measure()
{
    var measureValue = _random.NextSingle();
    _measureValue = Math.Round(measureValue, 2) + " m/s";
    _measureDate = DateTime.Now.ToString("yyyy/MM/dd HH:mss:ss");
}

計測ボタンを配置する

Measure()メソッドを作成できたので、次はこれを呼び出すボタンを画面に配置します。ボタンを押したときの処理は、以前のレクチャーで扱ったCounter.razorのボタン（@onclick=”IncrementCount” となっているもの）から流用できます。Counter.razorのボタン要素をコピーし、計測場所の下に貼り付けます。

図10　Counter.razorのボタンをコピーしてMeasurePage.razorに貼り付けた直後（IncrementCountのまま）

貼り付けた直後は @onclick=”IncrementCount” のままなので、これを @onclick=”Measure” に書き換えます。

図11　@onclickの参照先をIncrementCountからMeasureに書き換えたコード

さらに、ボタンの表示テキスト「Click me」も「計測」に書き換えます。ここまでの変更を反映して実行してみると、サイドメニューの「計測」画面に「計測」ボタンが表示され、計測値・計測日時は初期値の “–” のままになっていることが確認できます。

図12　ボタンの表示テキストを「計測」に書き換えた、MeasurePage.razorの最終的なマークアップ

図13　アプリを実行し、サイドメニューに「計測」画面が表示されたところ

図14　計測画面を開いた直後。計測値・計測日時はまだ初期値の”–“のまま

@rendermodeの指定を忘れずに

ここで「計測」ボタンを押しても、画面の表示が変わりません。これは以前のレクチャーでもお伝えした、Counter.razorの先頭にある @rendermode InteractiveServer の記述が MeasurePage.razor 側にはまだ無いことが原因です。

図15　参考：Counter.razorの先頭にある@rendermode InteractiveServerの記述

@rendermode InteractiveServer は、ユーザーの操作（ボタンクリックなど）に応じてサーバーと通信し、画面を更新するかどうかを指定するものです。この記述を入れ忘れると、毎回「あれ？なんで反映されないのかな？」とハマってしまいがちなので、ユーザー操作を伴うページでは必ず入れておくようにしてください。MeasurePage.razorの先頭にも同様に @rendermode InteractiveServer を追加します。

図16　MeasurePage.razorの先頭に@rendermode InteractiveServerを追加した状態

この状態で改めて実行し、「計測」ボタンを押すと、今度はきちんと計測値と計測日時が更新されます。押すたびに値が変わっていくことも確認できます。

図17　@rendermode追加後、「計測」ボタンを押して値が更新されたところ

図18　「計測」ボタンを複数回押し、そのたびに計測値・計測日時が変化することを確認したところ

まとめ

今回は、これまでのレクチャーで学んできた「段落での表示」と「変数の単方向データバインド」の内容を応用しました。単方向データバインドとは、プログラム側で更新した値を画面に表示するだけの一方向の連携であり、ユーザーが入力した値を受け取る仕組み（双方向のバインド）はまだ扱っていません。それでも、プログラム側で変更した値がボタン操作をきっかけに画面にカチャッと反映される、という動きを確認できました。ここまでのCounter画面での学習内容を応用することで、計測画面は今回のような形に仕上がります。