作ったもの

サイクリング・ドライブ等の、GPXログファイルから、「出発地からルートを辿って目的地にぐーっと迫る」風のルート紹介用の動画を作成するツールを作りました。

TrackReel
https://github.com/moru3/TrackReel

紹介

私の動画

ロードバイクで北海道を走っているのですが、その動画の冒頭にルート紹介として、このTrackReelで作成したルート動画をつけました。
なかなかかっこいい。

TrackReelデモ動画

上記動画の該当部分だけを切り出したものです。（別チャンネルにあげている）。

できること

• GPXの一部だけを切り出す — 110km走った日の「20〜55kmだけ」を出発地→目的地として使える
• 経由地で止まる — ラインもカメラも完全に停止して、地名を読ませる間を作る
• アウトロ — 北向きに戻して全体ルートを見せ、さらに引いて終わる
• プレビューが本番と同一 — ブラウザで再生しているものがそのまま書き出される
• 4K / 60fps / ProRes 4444 — 4k動画にそのまま置ける

走行記録のGPXだけでなく、旅程用に作ったルート（時刻を持たないGPX）でも動きます。

使い方

UI (ブラウザ)

ブラウザUIを立ち上げて、GPXをドロップ → そのルートの範囲の地図タイルを取得 → 標高プロファイルをドラッグして区間を決める → 書き出す、という流れです。
この時のサイクリングの時の一部データを切り抜いたサンプルデータも添付しています。

git clone https://github.com/moru3/TrackReel.git
cd TrackReel
npm install
npm run setup          # 地図タイル切り出し用の pmtiles CLI を用意
node src/cli.js sample # 同梱サンプル（栗山ダムまでの30km）を取り込む
npm run ui             # http://127.0.0.1:4173

CLI

CLIからも同じことができます。

node src/cli.js render --from 0 --to 40 --duration 8 --start 札幌 --goal 由仁

開発体制

Claude Codeで全て作っています。
GPXファイルなどは私は門外漢なのですが、Coding Agentを用いることで、このようなツールを作ることができました。まさか動画を作るツールを作るのに、nodeで作り始めるとは・・という印象です。しかしそれらしいものができてくれました。

最後に

作りましたが、私向けの必要な部分しか用意されていません。
汎用的な機能変更については、Issue等でご意見ください。時間があれば対応していきます。