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();
    }

}

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱