ゲームの録画を見返していると、反省点はけっこう出てきます。
「ここ、顔を出すのが早い」 「このスキルを先に入れた方がよかった」 「味方の位置を見てから動けばよかった」
ただ、普通のメモに書くとすぐに困ります。
あとで読み返したときに、「ここ」ってどこだよ、となるからです。
動画の 5 秒地点で思ったことと、11 秒地点で思ったことは全然違うのに、メモ帳に並べると全部ただの文章になります。動画を止める、時刻を見る、メモに書く、また戻る。この小さい手間が積み重なると、見返しそのものがだるくなる。
なので、ローカル動画を再生しながら、その瞬間の再生時間にメモを残せる Web アプリを作りました。
作ったもの
名前はそのまま video_memo です。
やることはかなり単純で、videos/ に置いた動画を一覧に出し、再生しながら右側にメモを書けるようにしました。メモを送信すると、そのときの再生秒数と一緒に SQLite に保存します。
構成は Rust/Axum のバックエンドと React/Vite のフロントエンドです。開発環境は Podman Compose でまとめました。
video_memo/├── compose.yaml├── backend/ # Rust + Axum + SQLx├── frontend/ # React + Vite + MUI├── videos/ # ここに動画を置く└── data/ # SQLite DB最初からアップロード画面を作るより、ローカルツールとして割り切って videos/ に動画を置いたら拾う形にしています。ゲーム録画はファイルサイズが大きいので、この方が気楽でした。
ほしかったのは「メモ」ではなく「場面に戻れる記憶」
今回作りたかったのは、きれいなノートアプリではありません。
ほしかったのは、動画の中の「あの瞬間」に戻るための印です。
だからメモ投稿の流れはなるべく短くしました。動画を見ていて気になったら、右下の入力欄に書いて Enter。これだけです。時刻は手で入れません。アプリがその瞬間の currentTime を拾います。
今回は実際に VALORANT の録画を読み込ませて、2 秒、5 秒、8 秒、11 秒、14 秒の位置にメモを残しました。こうして並ぶと、メモ一覧がそのまま録画の見返しポイントになります。
これが思ったより効きました。
録画を見返しながら反省を書くとき、手が止まる回数が減ります。人間の集中は案外もろくて、「今の時刻を見て、メモに 00:00:18 と書いて」みたいな作業を挟むだけで、何を考えていたかが薄くなります。
このアプリだと、考えたことをそのまま置けます。
メモをクリックすると、その場面へ戻る
保存したメモは、右側の一覧に時刻つきで並びます。
ここで大事なのは、メモ一覧がただのログではなく、動画の目次になることです。気になるメモをクリックすると、その秒数へ戻ります。
これだけで、録画を見返す感覚が変わりました。
今までは「たしか中盤あたりにミスがあった」くらいの雑な記憶を頼りにシークバーを動かしていました。作ったあとは、「ピークしすぎた」と書いたメモを押せばそこに戻れます。
動画編集の素材チェックにも同じことが言えます。気になった場所に「ここ切る」「音ズレ確認」「字幕入れる」と残しておけば、あとで探す時間が減ります。
流れるコメントにしたら、見返しが楽しくなった
このアプリで一番気に入っているのは、流れるコメントモードです。
保存したメモを、ニコニコ動画のコメントみたいに動画上へ流します。
最初は「まあ、おまけ機能かな」くらいの気持ちでした。
でも実際に使うと、これがかなり便利でした。右のメモ一覧を見なくても、当時の自分が何を思ったかが動画の上に出てくるからです。
反省点が場面に重なると、文章だけで読むよりも腹落ちします。
「ここでピークしすぎた」というメモが、まさに顔を出した瞬間に流れてくる。これはただの一覧表示より強いです。自分に自分でツッコミを入れている感じに近い。
実装としては、現在時刻に近いメモだけを絞り込んで、CSS animation で右から左へ流しています。シークしたときにコメント位置がずれないよう、負の animation-delay を使って途中から流れているように見せています。
コードの派手さはありませんが、体験にはかなり効く部分でした。
実際の録画で動かすと便利さがわかる
サンプル画面ではなく、手元の VALORANT 録画をそのまま読み込ませて動かしてみると、便利さがかなりはっきりしました。
「開幕、まず味方の位置を見る」「ここでピークが早すぎた」「スキルを先に入れてから出たい」みたいなメモが、録画の進行に合わせて出てきます。右側の一覧にも残るし、動画の上にも流れる。
これがあると、あとで見返すときに自分の反省が散らばりません。録画の中に、そのとき考えたことが貼り付いている感じになります。
実装しながら考えていたこと
今回は、きれいな設計を先に全部決めるより、使う場面から逆算しました。
自分が困っていたのは「動画を見返しているときに思考が散らばること」です。だから実装で優先したのは、認証でも共有でも高機能な検索でもなく、次の 3 つでした。
- 動画を置いたらすぐ一覧に出る
- 書いたメモが自動で再生時間に紐づく
- あとからメモ経由で場面に戻れる
バックエンドは Axum、保存先は SQLite。ローカル動画は tower-http の ServeDir で配信しています。フロントは React と MUI で、動画自体はネイティブの <video> タグです。
凝ったことはあまりしていません。
でも、動画とメモを同じ時間軸に置くだけで、使い勝手はかなり変わりました。
どう便利になったか
一番大きいのは、録画を見返す心理的な重さが減ったことです。
以前は、録画を開いても「あとでちゃんと見よう」と思ってそのまま放置しがちでした。見返しても、気づきを別の場所に書くのが面倒で、結局ふわっとした反省で終わることが多かったです。
このアプリを作ってからは、動画を開く、見ながら書く、あとでメモを押して戻る、という流れがひとつの画面で完結します。
便利になったことを並べると、こんな感じです。
- ゲーム録画の反省点を秒単位で残せる
- 「このメモどこの話？」がほぼなくなる
- メモ一覧がそのまま動画の目次になる
- 流れるコメントで、当時の気づきを場面ごと再体験できる
- ローカルファイル前提なので、大きな録画でも扱いやすい
作る前は「タイムスタンプ付きメモができればいい」くらいに思っていました。
作ったあとは、「動画を見返すための腰の重さを減らす道具」になりました。
まだ直したいところ
もちろん、まだ荒いところはあります。
- 動画追加を画面上からできるようにしたい
- メモ検索やタグを入れたい
- コメントが重なりにくいレーン管理を入れたい
- サムネイル自動生成がほしい
- YouTube URL 対応も実装まで持っていきたい
とはいえ、最小構成でもかなり使えます。
特にゲーム録画、操作検証、動画編集前の素材チェックみたいに、「動画を見ながら何かを考える」作業とは相性がいいです。
動画にメモを書くというより、動画の中に考えた跡を置いていく感じです。作ってみたら、そこが一番便利でした。