一覧へ戻る
Electron デスクトップアプリ 自作ツール スポーツ×開発 FFmpeg / jsPDF

動画コンタクト
シート作成ツール

選手に連続写真を見せるとき「プレミアで編集 → フォトショで並べる」という手作業を全自動化。
動画ファイルを開いて秒数・列数・行数を設定するだけで A4 PDF が完成するデスクトップアプリ。

App Preview

動画コンタクトシート
1. 動画読み込み
swim_race.mp4
2. 抽出区間
開始
00:01.200
終了
00:03.800
間隔
0.1秒 (10fps)
抽出予定: 27 枚
フレームを抽出
3. レイアウト
列 / 行
6列 × 5行
解像度
300 dpi
書き出し
プレビュー生成
300 dpi · A4縦 · 1ページ
Background

なぜ作ったか

競泳コーチとして選手に動作フィードバックを渡すとき、「動画を Premiere でスロー再生し、特定フレームをキャプチャ → Photoshop でA4に並べる」という作業を毎回手で行っていた。

この作業が煩わしかったため、「秒数を指定してボタンを押すだけでA4 PDF になる」ツールを自作した。コーチングの現場課題をそのままプロダクトに変換した。

Features

機能ポイント

01
区間指定フレーム抽出
開始・終了秒数と間隔(0.033s〜1s)を設定。FFmpegが正確にフレームを抽出する。
02
A4 レイアウト自由設定
列数・行数・余白・コマ間隔・向き(縦/横)を自由に設定。1ページ30コマも可能。
03
タイムスタンプ自動表示
各コマ下部に mm:ss.fff のタイムスタンプを自動付与。どのフレームかが一目で分かる。
04
高解像度 PDF 書き出し
72 / 150 / 300 dpi を選択可能。A4印刷用 300dpi での出力に対応。
05
複数ページ対応
フレーム数がレイアウトを超える場合、自動で複数ページに分割して1つのPDFに出力。
Tech Stack

技術構成

フレームワークElectron 41（Node.js 18 / Chromium）
動画処理FFmpeg（ffmpeg-static）+ fluent-ffmpeg
PDF生成jsPDF 2.5 + Canvas API
フロントエンドVanilla HTML / CSS / JS（フレームワークなし）
IPCElectron ipcMain / ipcRenderer
対応OSmacOS / Windows（electron-builder でビルド可）
Electron Node.js FFmpeg jsPDF Canvas API fluent-ffmpeg スポーツ×開発

ツール開発・業務自動化もお任せください

現場の「めんどくさい」をプロダクトに変えます

メールで相談する ← 一覧へ戻る