シンプルで高機能なスピードキューブタイマーを作りました
スピードキューブの練習用に、ブラウザで動くモダンなタイマーアプリ「Speed Cube Timer」を開発しました。 WCA準拠のスクランブル、インスペクションタイムに対応しています。
スピードキューブの練習用に、ブラウザで動くモダンなタイマーアプリ「Speed Cube Timer」を開発しました。 既存のアプリも素晴らしいものがたくさんありますが、「もっとシンプルで、でも必要な機能は全部入りで、かつ見た目が好みなものが欲しい」と思い、自作してみました。
Speed Cube Timer
なぜ作ったのか
スピードキューブの練習において、「タイムを測る」「記録を残す」ことはモチベーション維持に不可欠です。そこで今回は、「サッと開いてすぐ測れる」手軽さと、「競技練習にも使える」 高機能さを両立させることを目指しました。
こだわりの機能
1. WCA準拠のインスペクションタイム
競技ルール（WCA）と同じく、15秒のインスペクション（下見）タイムを設定できます。 8秒と12秒で警告音が鳴り、15秒を超えると自動でペナルティ（+2秒 / DNF）の判定も可能です。もちろん、設定でOFFにして即スタートもできます。
2. リアルタイム統計とグラフ
ソルブ（計測）ごとのタイムだけでなく、Ao5（直近5回の平均） やAo12をリアルタイムで計算・表示します。 自己ベスト更新を目指すためのモチベーションになります。
3. PWA対応（オフライン動作）
PWA（Progressive Web App）に対応しているので、スマホの「ホーム画面に追加」をすれば、まるでネイティブアプリのように使えます。 一度読み込めばオフラインでも完全に動作するので、電波の悪い場所でも練習できます。
4. ダークモード / ライトモード
長時間の練習でも目が疲れない「ダークモード」と、屋外でも見やすい「ライトモード」を搭載。 好みに合わせて切り替えられます（デフォルトは爽やかなライトモードです）。
5. データは自分の手元に
ユーザー登録は不要です。データはブラウザ（IndexedDB）に保存されます。 機種変更などの際は、JSON形式でのエクスポート/インポート機能を使ってデータを移行できます。
技術スタック
- Frontend: React 19, TypeScript
- Build Tool: Vite
- Database: Dexie.js (IndexedDB wrapper)
- PWA: vite-plugin-pwa
- State Management: React Hooks (Custom Hooks for timer logic)
- Hosting: Cloudflare Pages
スピードキューブを始めたばかりの方から、本格的に競技に取り組む方まで、幅広く使っていただけるタイマーになったと思います。 ぜひ一度触ってみてください。