明日のTour of Japanは、Astemo 大鹿ステージ。
2026年のTour of Japanで新しく入った大鹿ステージは、11.4kmのチームタイムトライアルです。普段のロードレースとは少し違って、チーム単位でタイムを刻み、順位とトップ差がそのまま観戦の面白さにつながっていくステージです。
こういうレースを見ていると、どうしても思ってしまいます。
F1の予選タイミング画面みたいに見られたら、かなり面白いのではないか。
チーム名が並んでいて、順位があり、トップとの差があり、フィニッシュタイムが一目で見える。更新された瞬間に、どのチームが上がったのか分かる。レースを現地で見ていても、配信で追っていても、タイム差の変化をもう少し直感的に眺められる。
そんなことを考えて、LapClipの表示を補助する小さなツールを作りました。
GitHubはこちらです。
ただ、今回書きたいのは「便利なツールを作りました」という話だけではありません。
むしろ、作っている途中で一度立ち止まり、設計を大きく変えることになった話です。
LapClipを、もう少し観戦向きに見たかった
LapClipの公式リザルトは、レースを追ううえでとても重要な情報源です。
ただ、観戦中にスマホやPCで眺めるとき、順位、トップ差、更新タイミング、注目チームを一目で把握するには、もう少し視覚的な補助があると嬉しい。特にチームTTでは、単にタイムが並んでいるだけでなく、チーム単位の動きが見えたほうが面白い。
どのチームがトップに立ったのか。
トップから何秒差なのか。
フィニッシュ済みなのか、まだ途中なのか。
お気に入りのチームが今どのあたりにいるのか。
こういう情報を、F1の予選画面のように縦に並んだタイミングタワーで見られたら、観戦体験としてかなり楽しくなるはずです。
最初の動機は、本当にそれだけでした。
「LapClipのデータを、もう少し見やすくしたい」
そこから、AIと壁打ちしながら仕様を整理していきました。
AIと壁打ちして、まずは形にする
最初に考えた仕様は、わりと素朴なものでした。
- 総合タイムを表示する
- トップとの差を表示する
- 現在順位を表示する
- 更新タイミングを把握しやすくする
- チームTTではチーム単位で見られるようにする
- F1予選風の見た目にする
- レース中にスマホやPCで見られるようにする
これをAIと壁打ちしながら設計書に落とし込み、Claude Codeに投げて、まずはローカル環境で動く叩き台を作りました。
最近のAI開発ツールは、こういう「頭の中にはあるけれど、まだ形になっていないもの」を動くところまで持っていく速度がかなり速いです。
もちろん、最初から完成品になるわけではありません。表示の揺れもあるし、データの読み取り方も詰めなければならない。けれど、自分のPC上でF1風のタイミングUIが動いたときは、正直かなり手応えがありました。
これは観戦中に使えそうだ。
そう思いました。
スマホから見られるようにした
次に考えたのは、レース中に自分のスマホから見られるようにすることです。
観戦中に使うなら、PCのローカル環境だけで動いても意味がありません。現地や移動中でも、自分のスマホで開ける必要があります。
そこで、まずは自分だけが試せる形で、外からも確認できるようにしました。細かい仕組みはここでは省きますが、いきなり一般公開するのではなく、あくまで自分用の観戦補助ツールとして動作を確かめる段階です。
この段階では、かなり便利でした。
LapClipの情報を読み取り、自分用の画面でF1風に表示する。チーム名、順位、トップ差、フィニッシュタイムが見える。観戦しながら横に置いておく画面としては、思っていた以上に楽しい。
このあたりまでは、かなり素直に「便利なWebアプリを作っている」という感覚でした。
一般公開しようとして、引っかかった
問題に気づいたのは、一般公開を考え始めたタイミングでした。
自分のサーバーでLapClipのデータを取得する。
それを加工する。
別のドメインで表示する。
自分としては「見やすく表示しているだけ」のつもりでも、外から見ると「LapClipのデータを別サイトで提供している」ように見える可能性があります。
これは筋が悪い。
便利かどうか以前に、公式サービスや大会運営、データ提供元に対して敬意のある設計になっているか。そこを考える必要がありました。
ここで、いったん手が止まりました。
AIを使うと、実装そのものは本当に速くなります。思いつきから動くものまでの距離は、以前よりずっと短い。
でも、「公開してよい形かどうか」は、AIが肩代わりしてくれるわけではありません。
むしろ、速く作れるようになったからこそ、作ったものをどこまで出してよいのか、人間側が前より慎重に考えないといけない。
今回、一番大きかったのはここです。
サーバー配信方式をやめた
そこで、設計を根本から見直しました。
最終的に選んだのは、LapClip公式ページをユーザー自身が直接開き、そのページ上でだけ表示を変える方式です。
つまり、自分のサーバーはLapClipのデータを取得しない。
保存しない。
加工して再配信しない。
外部送信もしない。
ユーザーが開いているLapClip公式ページの中で、ブラウザ内だけでDOMを読み取り、同じページ上にF1風のUIを重ねて表示する。あくまで、公式ページの見た目を自分の端末内で補助するだけです。
この方式なら、少なくとも自サーバーで公式データを集めて配る構造とはかなり違います。
公式情報は公式ページで直接見る。
ツールは、そのページの表示を補助する。
GitHubや配布ページは、ツールの説明と配布に限定する。
この方針に変えてから、ようやく「公開するならこの形だな」と思えるようになりました。
Tampermonkeyという選択
そのための中心にしたのが、PC向けのTampermonkeyユーザースクリプト方式です。
Tampermonkeyは、ブラウザ上で特定のページに対して、自分側のJavaScriptを実行できる拡張機能です。今回でいえば、LapClip公式ページを開いたユーザー自身のブラウザ内で、表示補助のスクリプトを動かします。
サーバー側でデータを取りに行って、別サイトとして表示するのではありません。
公式ページを開いているブラウザの中で、そのページの情報を読み取り、見やすいUIを重ねる。
考え方としては、Webサービスを作るというより、ブラウザを少し拡張する感覚に近いです。
ページ内の情報は、ユーザーの端末内で読み取る。ツールは同じページ上にUIを重ねるだけ。LapClipデータをこちらのサーバーへ送ったり、保存したり、別サービスとして配ったりしない。
ここは、かなり大事にしています。
ブックマークレットとスマホ向け導線
ただ、Tampermonkeyは誰にでも簡単とは言いにくいです。
Chrome拡張を入れて、ユーザースクリプトを入れて、LapClipを開く。慣れている人には普通でも、レース観戦中にちょっと使いたい人には少しハードルがあります。
そこで、ブックマークレット方式も用意しました。
ブックマークレットは、JavaScriptをブックマークとして保存しておき、対象ページを開いた状態でクリックして使う仕組みです。拡張機能なしで動かせる可能性がある一方で、最初の登録方法は少し分かりづらい。
さらに、スマホ向けにはAndroidのWebViewアプリや、iPhone / iPad Safari向けのブックマークレット・ショートカット方式も整理しています。iPhoneでも一応使える導線は用意しています。
ただし、本命はあくまでPC版です。スマホ対応はまだβや暫定版という温度感です。
誰でも簡単に使える完成品、というよりは「こういう方向なら使えるかもしれない」という個人開発の記録に近い。ぶっつけ本番で、うまく動いたら嬉しい、くらいの距離感です。
公式結果の代替ではない
このツールは、LapClip、マトリックス社、Tour of Japan、大会運営とは無関係の非公式個人ツールです。
公式結果は、必ずLapClipおよび大会公式情報を確認してください。
また、このツールは公式ページを開いたユーザー自身のブラウザ内で表示を補助するものであり、LapClipデータの再配信、保存、外部送信、公式結果の代替を目的としたものではありません。
ここは、記事の中でもはっきり書いておきたいところです。
サイクルロードレースの観戦は、公式の計測、運営、チーム、選手、現地スタッフ、多くの人の仕事の上に成り立っています。その上に乗って、観戦者が少し楽しく見るための補助を作る。
その距離感を間違えないようにしたい。
今回のツール作りで、一番考えたのはそこでした。
AIで速く作れるからこそ、立ち止まる
今回、AIとClaude Codeを使ったことで、思いつきから動くものまでの速度はかなり上がりました。
「チームTTをF1予選風に見たい」という観戦中の小さな不満が、短期間で実際に動くUIになった。これは素直に面白い体験でした。
一方で、速く作れることと、そのまま公開してよいことは別です。
特に、公式データを扱う個人ツールでは、便利さだけで突っ走ると危ない。データをどこで読み、どこに保存し、誰に見せるのか。外から見たときに、公式サービスの代替や再配信に見えないか。
そこは、最後に人間が判断しなければいけない部分でした。
AIは実装を速くしてくれます。
でも、責任判断までは肩代わりしてくれません。
むしろ、AIで作れる時代だからこそ、人間が「公開してよい形」を考える必要がある。
LapClip Timing Visualizerは、まだ個人開発の小さなツールです。完成品として大きく広めたいというより、まずは自分の観戦体験を少し拡張するためのものです。
それでも、サイクルロードレース観戦には、まだまだ個人が工夫できる余地があるのだと思います。
明日の大鹿ステージ。
チームTTのタイム差を追いながら、この小さな表示補助ツールがどこまで役に立つか、試してみます。
うまく動いたら嬉しい。
うまく動かなかったら、それもまた次の改善材料です。
