【タイマー 第2回】キーボード操作する

タイマーアプリを作っています。

yushi-dev.hatenablog.com

技術要素

• Vue.js3
• Vite

キー操作

ルービックキューブのsolve（解くこと）の時間計測をする際にいちいちマウス操作していられないので、
キーボードで操作できるようにします。

  methods: {
    keyAction(e) {
      switch (e.keyCode) {
        case 32: // スペース
          if (this.isRunning) {
            this.stop()
          } else {
            this.start()
          }
      }
    },
  },

画面初期化時に登録します。

  created() {
    // キーコードによる動作の登録
    window.addEventListener("keydown", this.keyAction);
  },

デザイン調整

とりあえず数値を大きくして、見やすくします。

<template>
    ...
    <p class="time">{{ viewTimerTime }}</p>
    ...
</template>

<style scoped>
.time {
  font-size: 60px;
}
</style>

完成した画面

Pull Request

https://github.com/nek0meshi/timer/pull/3

https://github.com/nek0meshi/timer/pull/4

まとめ

簡単な追加でしたが、これで実際に使えるようになりました。

今後は履歴管理や集計計算を入れます。

ルービックキューブ界隈だと、5回平均・12回平均を記録として扱うことが多いようです。