supilog

すぴろぐ

【ルービックキューブのタイマーを作る】第2回 急所のタイマーをつくる回

今回は本アプリの急所のタイマーを作っていく。

簡単な仕様説明

まずタイマーの操作については、スペースキーを長押しして、キーを離したらタイマースタートという動作をさせたい。誤動作を防止するために、0.6から0.7秒くらい長押ししていないとスタートしないようにしたい。

タイマーがスタートしたら、次にスペースキーを押した時には、タイマーを停止。表示は計測結果が出力されているが、状態としては初期と同じで、次の長押しを検知できる状態としたい。

状態として、下記の4つのステータスを行き来し、「長押し待機中」はタイマーの色を赤に。「準備完了」時は、タイマーの色を緑に。それ以外は、黒にしたい。

• ニュートラル
  何も操作していない通常状態。
• 長押し待機中
  長押しをしている状態。最長でも0.7秒程度の時間。
• 準備完了
  長押しが完了して、キーを離すまでの間。
• タイマー計測中
  スペースキーを離して、タイマーが動作している状態。

こんなところです。

長押し機能

index.blade.php

Laravelのbladeテンプレートファイルです。idがtimerのdivタグの中身である0.00の表記を加工していきます。

<div id="timer" class="sm:flex sm:justify-center text-9xl">0.00</div>

... 略 ...

@vite('resources/js/timer.js')

timer.js

const cubelog_timer = {
    // ステータス
    currentStatus: '',
    // ステータス値
    status: {
        neutral: 0,
        wait: 1,
        ready: 2,
        timer: 3
    },
    // タイマーオブジェクト
    cubeTimer: '',
    // タイマー表示インターバル
    cubeTimerInterval: 39,
    // 開始時間
    startTime: 0,
    // 長押しタイマー
    longPushTimer: '',
    // 長押し判定値
    longPushWaitTime: 600,
    // キーコード
    keys: {
        Space: 32,
    },

    init: function () {
        this.currentStatus = this.status.neutral;
        window.addEventListener('keydown', (event) => {
            this.keyDown(event);
        });
        window.addEventListener('keyup', (event) => {
            this.keyUp(event);
        });
    },
    keyDown: function (event) {
        if (event.keyCode !== this.keys.Space) {
            return false;
        }

        // 長押し開始時
        if (this.currentStatus === this.status.neutral) {
            this.currentStatus = this.status.wait;
            document.getElementById('timer').classList.add('wait');
            this.longPushTimer = setTimeout(function () {
                this.ready();
            }.bind(this), this.longPushWaitTime);
        }
    },
    keyUp: function (event) {
        if (event.keyCode !== this.keys.Space) {
            return false;
        }

        // 共通処理
        clearTimeout(this.longPushTimer);
        document.getElementById('timer').classList.remove('wait');
        // 長押し完了前の処理
        if (this.currentStatus === this.status.wait) {
            this.currentStatus = this.status.neutral;
        }
        // 長押し完了後の処理
        if (this.currentStatus === this.status.ready) {
            this.currentStatus = this.status.timer;
            this.startTime = Date.now();
            this.timer();
        }
    },
    ready: function () {
        if (this.currentStatus !== this.status.wait) {
            return false;
        }
        // 長押し完了処理
        this.currentStatus = this.status.ready;
        document.getElementById('timer').textContent = '0.00';
        document.getElementById('timer').classList.remove('wait');
        document.getElementById('timer').classList.add('ready');
    },
    timer: function () {
        console.log('タイマースタートしたよ');
    }
};

cubelog_timer.init();

スペースキーを長押ししてみる

ちゃんと反応してくれてますね。良かった。

解説

init関数でキーが押された時と、キーが離された時に、イベントが発生するように設定

        window.addEventListener('keydown', (event) => {
            this.keyDown(event);
        });
        window.addEventListener('keyup', (event) => {
            this.keyUp(event);
        });

ステータス管理を細かく行う

例えば、キー押下時は、「長押しを始める時」と「長押し中」と「タイマーをストップする時」の3パターンある。同じスペースキー押下で、異なる処理を行うために、ステータス管理(this.currentStatus)をしている。

長押し完了はsetTimeoutで

一定時間スペースキーを押すことで、タイマーがスタート出来る機能の実装には、setTimeoutを使用している。setTimeoutは一定時間後に一度だけ処理を実行させる命令なので、長押し完了に必要な時間が経過したら、ready関数が実行されるようにした。

            this.longPushTimer = setTimeout(function () {
                this.ready();
            }.bind(this), this.longPushWaitTime);

また、長押しが足りない場合でもsetTimeoutは一定時間後に処理されてしまう。しかし、長押しが足りないということは、keyUpの処理が実行されていることになるので、keyUpの処理でsetTimeoutをクリアしてあげることで、readyが実行されないようになっている。

        clearTimeout(this.longPushTimer);

タイマー機能

それでは、タイマー機能を作成していく。内部でタイマー処理を行うと同時に、WEB上でもタイマーが動作しているようにする。

先ほどのtimer.jsに少し書き加えたのがこちら。

timer.js

const cubelog_timer = {
    // ステータス
    currentStatus: '',
    // ステータス値
    status: {
        neutral: 0,
        wait: 1,
        ready: 2,
        timer: 3
    },
    // タイマーオブジェクト
    cubeTimer: '',
    // タイマー表示インターバル
    cubeTimerInterval: 37,
    // 開始時間
    startTime: 0,
    // 長押しタイマー
    longPushTimer: '',
    // 長押し判定値
    longPushWaitTime: 600,
    // キーコード
    keys: {
        Space: 32,
    },

    init: function () {
        this.currentStatus = this.status.neutral;
        window.addEventListener('keydown', (event) => {
            this.keyDown(event);
        });
        window.addEventListener('keyup', (event) => {
            this.keyUp(event);
        });
    },
    keyDown: function (event) {
        if (event.keyCode !== this.keys.Space) {
            return false;
        }

        // 長押し開始時
        if (this.currentStatus === this.status.neutral) {
            document.getElementById('timer').classList.add('wait');
            this.currentStatus = this.status.wait;
            this.longPushTimer = setTimeout(function () {
                this.ready();
            }.bind(this), this.longPushWaitTime);
        }

        // タイマー終了時
        if (this.currentStatus === this.status.timer) {
            this.currentStatus = this.status.neutral;
            clearTimeout(this.cubeTimer);
        }

    },
    keyUp: function (event) {
        if (event.keyCode !== this.keys.Space) {
            return false;
        }

        // 共通処理
        clearTimeout(this.longPushTimer);
        document.getElementById('timer').classList.remove('wait');
        // 長押し完了前の処理
        if (this.currentStatus === this.status.wait) {
            this.currentStatus = this.status.neutral;
        }
        // 長押し完了後の処理
        if (this.currentStatus === this.status.ready) {
            this.currentStatus = this.status.timer;
            this.startTime = Date.now();
            this.timer();
        }
    },
    ready: function () {
        if (this.currentStatus !== this.status.wait) {
            return false;
        }
        // 長押し完了処理
        this.currentStatus = this.status.ready;
        document.getElementById('timer').textContent = '0.00';
        document.getElementById('timer').classList.remove('wait');
        document.getElementById('timer').classList.add('ready');
    },
    timer: function () {
        document.getElementById('timer').classList.remove('wait');
        document.getElementById('timer').classList.remove('ready');
        // タイマー表示処理
        this.cubeTimer = setInterval(function () {
            const elapsedTime = Date.now() - this.startTime;
            let minutes = Math.floor((elapsedTime / 1000 / 60) % 60);
            let seconds = Math.floor((elapsedTime / 1000) % 60);
            let milliseconds = Math.floor((elapsedTime % 1000) / 10);
            if (minutes > 0) {
                document.getElementById('timer').textContent = String(minutes) + ':' + String(seconds).padStart(2, '0') + '.' + String(milliseconds).padStart(2, '0');
            } else {
                document.getElementById('timer').textContent = String(seconds) + '.' + String(milliseconds).padStart(2, '0');
            }
        }.bind(this), this.cubeTimerInterval);
    }
};

cubelog_timer.init();

解説

タイマー表示処理をtimerView関数にまとめた

1分を越えると表示が変わるので、処理を分けている。

    timerView: function () {
        const elapsedTime = Date.now() - this.startTime;
        const minutes = Math.floor((elapsedTime / 1000 / 60) % 60);
        const seconds = Math.floor((elapsedTime / 1000) % 60);
        const milliseconds = Math.floor((elapsedTime % 1000) / 10);
        if (minutes > 0) {
            document.getElementById('timer').textContent = String(minutes) + ':' + String(seconds).padStart(2, '0') + '.' + String(milliseconds).padStart(2, '0');
        } else {
            document.getElementById('timer').textContent = String(seconds) + '.' + String(milliseconds).padStart(2, '0');
        }
    },

timer関数でタイマー機能を実装

setInterval関数は、setTimeoutとは違って、一定時間毎に繰り返し処理をするものである。一定時間毎に、this.timerViewが実行される。ストップウォッチのように数字が動く処理は、timerViewを何度も実行することで、実装している。

cubeTimerIntervalで指定している値(msec)が、timerViewが実行される間隔である。100などのキリの良い数字にすると、見た目が面白くないので、あえて適当に37にした。とくに意味はない。10だと0.01秒単位で変化してくれるが、ちょっと残像が過剰で目が疲れる。

    timer: function () {
        document.getElementById('timer').classList.remove('wait');
        document.getElementById('timer').classList.remove('ready');
        // タイマー表示処理
        this.cubeTimer = setInterval(function () {
            this.timerView();
        }.bind(this), this.cubeTimerInterval);
    },

keyDown関数に終了処理を追加

最終タイム処理をtimerView側にまかせてしまうと、cubeTimerInterval間隔でしか実行されていなかった弊害で、コンマ数秒のズレが発生するのがもったいないので、タイマー停止と同時に最終タイマー表示を行っている。

現在は空の処理だが、timerStore関数でデータ保存をする予定。

        // タイマー終了時
        if (this.currentStatus === this.status.timer) {
            // タイマー停止
            clearTimeout(this.cubeTimer);
            // 最終タイマー表示
            this.timerView();
            // データ保存処理
            this.timerStore();
            // 初期化処理
            this.currentStatus = this.status.neutral;
        }

動作確認

無事に実行されるでしょうか。

予定していた動作をしてくれていますね。やりました。

まとめ

なんとかタイマーは動きましたので、実はもう計測はできちゃうんですね。わぁ嬉しい。これでルービックキューブの練習もはかどるってもんですっ！！

さて次回は、スクランブルの表示機能に入っていきたいと思います。それでは。

ソースコード

HTML&JSファイル

本日の実装が完了した状態のタグが「v1.0.2」です。

https://github.com/supilog/cube/blob/v1.0.2/resources/views/index.blade.php

https://github.com/supilog/cube/blob/v1.0.2/resources/js/timer.js

リンク

「ルービックキューブのタイマーを作る」シリーズ