Blazorwasmで簡単にタイマーを実装する方法(TimeSpan利用)

Blazor wasmでタイマーを実装する方法は様々あると思いますが、TimeSpanクラスを使用するのが一番簡単だと思いましたので、まとめてみました。

1. TimeSpanでタイマー設定時刻(時分秒)を定義する

TimeSpanクラスのオブジェクトを生成するには、以下のようにコーディングします。

TimeSpan TimerTime = new TimeSpan(時, 分, 秒);

時、分、秒はint型で指定します。

TimeSpan 構造体

    //タイマー設定時刻(30分)
    public static TimeSpan TimerTime = new TimeSpan(0, 30, 0);

2. 1秒ずつ減算する

減算するには、TimeSpanオブジェクトのSubtractメソッドを使用します。

TimeSpan.Subtract(TimeSpan) メソッド

このタイマーは1秒ごとに更新しますので、1秒減算する処理を定義します。

1秒を定義するTimeSpanオブジェクトを使用し、Subtractメソッドの引数に使用します。

    //1秒(減算用)
    public static TimeSpan onesec = new TimeSpan(0, 0, 1);

    private void Subtract()
    {
        TimerTime = TimerTime.Subtract(onesec);
    }

3. タイマーのカウントダウン処理

一定時間ごとに処理するには、System.Timers.Timerオブジェクトを使用します。

このタイマーアプリでは、1秒ごとに減算する処理を実行するようにしています。


    //Timerオブジェクト(タイマー処理)
    private System.Timers.Timer _timer;

    private void SetTimer()
    {
        _timer = new System.Timers.Timer(1000);
        _timer.Elapsed += OnTimedEvent;
        _timer.AutoReset = true;
        _timer.Enabled = true;
    }

    private void OnTimedEvent(Object source, ElapsedEventArgs e)
    {
        Subtract();
        StateHasChanged();
    }

_timer = new System.Timers.Timer(1000)で、1秒ごとに処理するよう定義します。

_timer.Elapsed += OnTimedEventで、1秒ごとにOnTimedEventメソッドを実行するようにしています。

OnTimedEventメソッドでは、1秒減算処理と、StateHasChanged()メソッドを実行しています。

StateHasChanged()は、Blazorのビューを更新するための命令です。

4. カウントダウンの一時停止

タイマーの一時停止処理を実装します。

先ほどのSystem.Timers.TimerメソッドのEnabledfalseに設定することで、一時停止を行います。

    private void PauseTimer()
    {
        _timer.Enabled = false;
    }

5. リセット処理

タイマーをリセットするには、以下の処理を行います。

  1. TimeSpanオブジェクトであるTimerTimeを初期値に戻す
  2. カウントダウン中にリセットされることを考慮し、タイマーの一時停止処理であるPauseTimer()メソッドを呼び出す
  3. StateHasChanged()メソッドで、再表示する

    private void Reset()
    {
        TimerTime = new TimeSpan(0, 30, 0);
        PauseTimer();
        StateHasChanged();
    }

6. ビュー部分

razorページのビューの部分(HTML)は以下のようにしました。

TimerTime.ToString(@"mm\:ss")で、「分(2桁):秒(2桁)」で表示するようにしています。

<h1>TimeSpan Timer Sample</h1>

<label>@TimerTime.ToString(@"mm\:ss")</label>

<button @onclick="SetTimer">Start</button>

<button @onclick="PauseTimer">Pause</button>

7. 実行イメージ

以下のように、タイマーが表示され、開始、一時停止、リセットができれば成功です。

8. ソースコード全文

@using System.Timers;
@page /

<h1>TimeSpan Timer Sample</h1>

<label>@TimerTime.ToString(@"mm\:ss")</label>

<button @onclick="SetTimer">Start</button>

<button @onclick="PauseTimer">Pause</button>

<button @onclick="Reset">Reset</button>

@code {

    //タイマー設定時刻(30分)
    public static TimeSpan TimerTime = new TimeSpan(0, 30, 0);

    //1秒(減算用)
    public static TimeSpan onesec = new TimeSpan(0, 0, 1);

    //Timerオブジェクト(タイマー処理)
    private System.Timers.Timer _timer;

    private void SetTimer()
    {
        _timer = new System.Timers.Timer(1000);
        _timer.Elapsed += OnTimedEvent;
        _timer.AutoReset = true;
        _timer.Enabled = true;
    }

    private void OnTimedEvent(Object source, ElapsedEventArgs e)
    {
        Subtract();
        StateHasChanged();
    }

    private void PauseTimer()
    {
        _timer.Enabled = false;
    }

    private void Subtract()
    {
        TimerTime = TimerTime.Subtract(onesec);
    }

    private void Reset()
    {
        TimerTime = new TimeSpan(0, 30, 0);
        PauseTimer();
        StateHasChanged();
    }

}

Blazor のおすすめ本

私もBlazorを用いていくつかウェブアプリを開発しました。フレームワークがとても分かりやすく、簡単にSPAを作れることが楽しいと感じています。

Blazor wasm であればAWS S3のようなウェブホスティングサービスでアプリを公開することもできますし、Blazor Serverアプリであれば簡単に2要素認証を構築できます。

Blazor は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。

電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。

内容
第1章 Blazorの仕組み
第2章 開発環境
第3章 最初のBlazorアプリ
第4章 コンポーネント
第5章 データバインディング
第6章 イベント処理
第7章 Razor記法
第8章 フォームと検証
第9章 データベースアクセス
第10章 Web APIの活用
第11章 SVGの活用
第12章 JavaScriptとの連携

コメントを残す

メールアドレスが公開されることはありません。