tl;dr
- カバディ専用のタイマーアプリを作りました。
- 無料でいくらでも使えるのでどんどん使ってね！
- Claude Code(MAX 20x)が便利だったよ！
前振り
カバディの練習試合、紅白戦、その他練習とかで試合時間測りたい時ありますよね？ でも…
- 誰かのスマホのストップウォッチを使うけど、残り時間がプレイヤーから見えない。
- "Last 5 minuts!" が頼りですよね。
- 30秒のレイドタイマーも、誰かが声でカウントするしかない。
- タイムアウトになると残念ですよね。
- 本格的なデジタイマーは10万円以上するし、大きくて持ち運べない…。
- あれ、大会のたびに毎回借りてるらしいって聞きました。ましてや個人ではねえ。
スコアボードは手でめくるやつで何とかなるけど、タイマーはまずないですよね。
残り時間がわからないと、試合運びにも影響しちゃいますし、レイドの時間わかんないと不安*1ですよね。なので、もっと手軽に試合環境を改善したいなーという気持ちが高まりました。
そこでできたのが、手持ちのスマホやタブレットが本格的なタイマー＆スコアボードになるWebアプリ*2「カバディタイマー / Kabaddi Timer」です、どーん！
アプリの雰囲気
複数の端末から同時に操作できるよ！
QRコードでURLを読み込んだら、複数のスマホとかから同時に操作できます。タイマー、点数、Do or Die カウントで分担するのは、公式戦でもお馴染みの方式ですよね。 表示は、タブレット使うとか、大型ディスプレイ*3 に繋げばいいと思います。
graph TD
Hub["スコアボード<br>(Durable Object)"]
Display[大型モニター or タブレット]
PhoneA[操作用スマホ A]
PhoneB[操作用スマホ B]
PhoneC[操作用スマホ C ...]
Hub <-->|スコア、タイマー、操作、表示| Display
Hub <-->|スコア、タイマー、操作、表示| PhoneA
Hub <-->|スコア、タイマー、操作、表示| PhoneB
Hub <-->|スコア、タイマー、操作、表示| PhoneC
style Hub fill:#f9f,stroke:#333,stroke-width:4px
ちなみにデジタイマーというのはこういうやつです
できること
このアプリを使えば、面倒な準備は一切不要。誰かのスマホやタブレットが、その場ですぐに高機能なスコアボードになります。
主な特徴:
スマホで簡単操作: 直感的なボタン操作で、タイマーの開始/停止、スコアの加減、レイドタイマーの管理、Do or Dieカウント *4 、コートの入れ替えなどができます。
QRコードで一発共有: 試合を作成したらQRコードを表示するだけ。他のメンバーはそれを読み込むだけ で、同じスコアボードに接続できます。
- 全員の画面がリアルタイムで同期: Aさんのスマホでスコアを更新すれば、BさんやCさんのスマホ画面も瞬時に更新されます。もちろん、タブレットやパソコンでも。公式戦と同様に、「タイマー」「点数」「Do or Dieカウント」を分担して担当することができます。
使い方はすごく簡単です。
- トップページにアクセス。「新しいタイマーを作る」を選んでスコアボード画面に遷移。
- スコアボード画面の下の方にある「QR」をタップしてQRコードを表示。
- 表示されたQRコードを、参加メンバーがスマホのカメラで読み取る。
- これだけ！全員のスマホが同じ時間を刻むスコアボードになります。
設定できる項目とか機能とか
下に画面のキャプチャーを貼るんですけど、だいたい見たまんまなんで分かると思います。 タイマーのプリセットは20分（大会決勝とか公式な時間）/15分（普段の試合とか）/ 3分(インターバル)です。
わかりににくい機能の補足とか
VSのところをタップすると左右が反転します。 これはコートチェンジじゃなくて、自分の端末でだけ反転します。 オーディエンスに見せているタブレットやパソコンの画面と自分に向けて手元で見ている端末で左右が逆になるので混乱しやすいよねって感じです。ちなみにこの反転は他の端末には反映されません。自分の手元で反転しているときは反転しているようなマークみたいなのが出るのでわかるかなと思います。
VSをタップすると 
反転して、←→みたいなマークが出ます あとサブタイマーのところをタップするとなんかコントロールが消えたりとかします。これはあのなんかタブレットとかパソコンとかディスプレイで表示するときに、なんか下の操作欄みたいなのいらないなっていう時に使ってください。 もう一度タップすると復帰します。
経緯
9月21日（日）に成闘会さん、東洋ライノスさんたちと浅草小学校で練習試合をしたんですが、前日に「そういえばタイマーとかないよな…？」って思い立ったので、土曜日の練習後に23時くらいから夜鍋して最低限度動くところまででっち上げました。だいたい6時間くらい。いやまあ、練習試合前なんだからちゃんと体調整えろよ！というのはごもっともなのですが。
Claude Code MAX 20x 契約しているし、まあまあなんかあの開発はできるんでなんとかなるかなと。 あんまフロントエンドとか得意じゃないし、Claude Code賢いからなんとかってくれるはずと信じて着手した感じです
で当日に私物のタブレットを持って行って「こんなん作ったんですよー」とか言いながら試合で使ってもらったのでまあまあなんとかなったかなという感じです。 特にレイドの時間管理には結構便利だったんじゃないかなとは思ってます。
微妙な不具合が結構あったのでご迷惑おかけしたんですが、ともあれテスト運用のご協力ありがとうございました！
その後いろいろ直したので多分大丈夫ぽいし、リリースします。
技術ぽいお話
基本的にはCloudflare Workersで動いています。 今まではCloudflare あんまり使ってなかったんですけど最近はちょっとしたツールとかを置くのに便利なのでよく使うようにしています。
Durable Objectという機能があるので、それで複数端末の同期を行っています。「クラウド上の永続化されたオブジェクト」で、いわゆるActorモデルというやつですね。
通信はWebSocketなんですけどサーバサイドはDurable Objectがいい感じに処理してくれるんであんまり難しくないです。同時接続性とかめちゃくちゃ高いので、あんまり難しいことは考えずに、ただのインターネット上の共有オブジェクトだと思っておけば、普通に使える感じで便利でした。
サーバサイドのルーティングとかその辺の管理に、Honoというフレームワークを使ってます。 サーバーサイドは一応全部TypeScriptになっていてテストカバレッジ高めになるように頑張りました。
WebSocket経由でプッシュ配信みたいなのもしてくれるので、複数の同時接続が上がっても全然気にする必要がないので便利かなって感じです。で一応なんかサーバーレス環境みたいな感じなんでもうあんま性能面であったりとかインフラがどうとかも考えることなく本当にDurable Objectを読み書きするぞっていうのとプッシュ配信するぞっていうだけなので全然便利でした。
時刻の同期については、多少ちょっとした問題があったので、まあそこそこ工夫したかなぁぐらいな感じです。サーバーの時刻をそのまま使うだけだと失敗するなって感じでした。
フロントエンドに関しては、最初Alpine.jsを使っていたんですが、Preactという軽量Reactみたいなやつに切り替えました（なので /game-v2 になってる）。たかだかスコアボードなのでReactと使うほどでもないかなーと。ややこしいし。
CSS周りは Tailwind CSSです。LLMとの相性もいい定番ですよね。
あとはスマートフォンとタブレットやPCで挙動がちょっと違うのでその辺工夫するぐらいかな。あとは別に難しいことはしてない認識ですね。
ボタンが増えるので面倒くさいんですけど、見たらわかるだろうぐらいの感じで配慮しました。一応、大抵のカバディプレイヤーはデジタイマーの操作をしたことがあるので雰囲気わかるはずなので細かい説明はしていません。
いろいろ書いたんですけど、大部分のところはClaude Codeでやってもらったんで、とても捗りました。なんならエディター経由での編集1バイトもやってないですからね。単純な自然言語のテキストも含めて全部LLMでやりました。もう依存症レベルに便利すぎる。
いちおう、テストカバレッジも全体で約80%になりました。
- 全体カバレッジ：80.6%（Statement）、82.2%（Lines）
- テスト総数：406テスト（21ファイル）
型定義も TypeScript strictモード で any型完全排除できた感じぽい。 いやもう、ありがとうClaude Code という様々加減ですよ。
あとさらに言うと、最近Aqua Voiceっていう音声認識エンジンを使ってるんですけど、もうキーボードのタイピングすらしてないですからね、もう人としてダメだなって気持ちがだいぶ強くていいですね。
いわゆる大きい課題を投げて時間をかけてやってもらうというよりかは数分以内に応答が返ってくるような作業を指示しながらやるって感じで事実上ペアプロですね。
あとはKiroみたいな仕様駆動みたいなのがちょっと苦手なので大体ざっくり画面とか挙動を作ってそこから細かく修正していくっていう感じのやり方をしました。
ほんとペアプロと一緒なんで、「一番使ったのは何ですか？」→「喉」みたいな感じです。
でフロントエンドとかは基本的に苦手ですし、TypeScriptのビルド環境とか今時のやり方とかよく分かんないんですけど、とりあえずClaude Codeと use context7でなんとか進めてもらったので大変助かりました。
実装されたものを見て、そうか、なるほど、こういう風にやるんだ、へぇ、みたいな感じ。 まあまあちょいちょいツールが混在してたりとかするんですけど、「ビルドして下さい」っていうだけだからまあまあなんとかって感じです。なんであんまり細かいところは最適化されてないんですけど、致命的な問題はないかなと思っているので、大丈夫かと思います。
なんでむちゃくちゃ実装が早くなったんでとても便利だなと思います。 まあそれでも、Claude Code MAX 20xの5時間制限にはちょいちょい当たっちゃったんで、この時は気分転換に立ち上がったり（物理）してました。
あとAqua Voiceを使っててめちゃくちゃ便利なんで、みんな下記のURLからプロモーションコードを踏んでもらうと嬉しいです。
まとめ
そんな感じでカバディ専用タイマーを作ったよという話です。カバディプレイヤーの人はみんな使ってくれると嬉しいなと思います。
