frame-inspect スキル

動画・画像のフレーム抽出、Remotion レンダリング、仕様チェック、目視検証の統合ツールキット。

シェルスクリプト

scripts/video-tool.sh で全操作を統一的に実行できる:

TOOL={スキルディレクトリ}/scripts/video-tool.sh

$TOOL info   <video>                       # 動画情報を表示
$TOOL check  <video> --spec KEY=VAL ...    # 仕様チェック
$TOOL frames <video> <outdir> [--fps N]    # フレーム抽出
$TOOL still  <dir> <outdir> [--frame N]    # Remotion still
$TOOL render <dir> <output> [--comp ID]    # Remotion → MP4
$TOOL gif    <video> <output> [--fps N]    # GIF 作成

Step 1: 入力の特定

ユーザーから以下を確認:

• 対象ファイル/ディレクトリ: 動画ファイルのパス、または Remotion プロジェクトのディレクトリ
• やりたいこと: フレーム抽出 / レンダリング / 仕様チェック / 目視検証
• 確認したいポイント（任意）: 特定のシーン、タイミング、品質基準など

Step 2: 入力タイプの判定

Step 3: 操作の実行

3A: 動画情報の確認

bash
1$TOOL info {videoPath}

出力: 解像度、fps、長さ、コーデック、ファイルサイズ

3B: 仕様チェック（ffprobe ベース）

bash
1# App Store プレビュー動画の仕様チェック例
2$TOOL check {videoPath} \
3  --spec width=886 \
4  --spec height=1920 \
5  --spec fps=30 \
6  --spec codec=h264 \
7  --spec max_duration=25 \
8  --spec max_size_mb=500
9
10# 汎用的な仕様チェック
11$TOOL check {videoPath} \
12  --spec width=1920 \
13  --spec height=1080 \
14  --spec fps=60

チェック可能な項目:

3C: フレーム抽出（動画 → PNG）

bash
1# 1秒に1枚（デフォルト）
2$TOOL frames {videoPath} {outDir}
3
4# 0.5秒に1枚
5$TOOL frames {videoPath} {outDir} --fps 2
6
7# サムネイル用（2秒に1枚）
8$TOOL frames {videoPath} {outDir} --fps 0.5

3D: Remotion still（特定フレーム抽出）

bash
1# フレーム 0
2$TOOL still {projectDir} {outDir} --frame 0
3
4# フレーム 90（30fps なら 3秒目）
5$TOOL still {projectDir} {outDir} --frame 90
6
7# コンポジション ID を明示
8$TOOL still {projectDir} {outDir} --frame 0 --comp MyComposition

3E: Remotion render（MP4 出力）

bash
1# 自動検出（Root.tsx から composition ID を取得）
2$TOOL render {projectDir} out/preview.mp4
3
4# コンポジション ID を明示
5$TOOL render {projectDir} out/preview.mp4 --comp AppStorePreview

レンダリング後は自動的に check で仕様確認するのを推奨:

bash
1$TOOL render {projectDir} out/preview.mp4
2$TOOL check out/preview.mp4 --spec width=886 --spec height=1920 --spec fps=30

3F: GIF 作成（プレビュー用）

bash
1# デフォルト（5fps, 幅320px）
2$TOOL gif {videoPath} out/preview.gif
3
4# 高品質（10fps）
5$TOOL gif {videoPath} out/preview.gif --fps 10

Step 4: 目視検証

抽出したフレーム画像を Read ツールで確認する。

Read: {outDir}/frame_001.png
Read: {outDir}/frame_005.png
Read: {outDir}/frame_010.png

チェック項目

レイアウト

• テキストや要素が画面外にはみ出していないか
• 要素同士が不自然に重なっていないか
• 余白のバランスが適切か

テキスト

• 文字が読めるサイズか
• テキストと背景のコントラストが十分か
• 文字化けや欠けがないか

カラー・ビジュアル

• 意図した色が使われているか
• 背景が意図せず真っ白/真っ黒になっていないか
• 画像が正しく表示されているか（壊れ、欠け、歪みがないか）

アニメーション状態（動画の場合）

• シーン遷移が自然か（空白フレームがないか）
• アニメーションの途中状態が意図通りか

エンコード品質（MP4 の場合）

• 圧縮アーティファクト（ブロックノイズ）が目立たないか
• テキストがエンコードで潰れていないか
• 先頭・末尾に不要な空白フレームがないか

Step 5: レポート出力

検証結果をユーザーに報告:

markdown
1## フレーム検証レポート
2
3### 対象
4- ファイル: {fileName}
5- 種類: {MP4 / Remotion / 画像}
6- 解像度: {width} x {height}
7- fps: {fps}
8- 長さ: {duration}（動画の場合）
9- コーデック: {codec}
10- サイズ: {size}MB
11
12### 仕様チェック
13| 項目 | 値 | 判定 |
14|------|-----|------|
15| 解像度 | {W}x{H} | OK/NG |
16| fps | {fps} | OK/NG |
17| 長さ | {duration}s | OK/NG |
18| コーデック | {codec} | OK/NG |
19| サイズ | {size}MB | OK/NG |
20
21### フレーム検証結果
22
23| フレーム | タイミング | 判定 | コメント |
24|---------|-----------|------|---------|
25| frame_001.png | 0:01 | OK | - |
26| frame_003.png | 0:03 | NG | テキストが右端で切れている |
27| frame_005.png | 0:05 | OK | トランジションがスムーズ |
28
29### 問題点
301. **frame_003.png (0:03)**: テキストが画面右端で切れている
31   - 推定原因: テキスト要素の x 座標が大きすぎる
32
33### 良好な点
34- 全体のカラーバランスが良い
35- シーン遷移が滑らか

シェルスクリプトなしで直接実行する場合

スクリプトが使えない環境では、以下のコマンドを直接実行:

ffprobe（動画情報・仕様チェック）

bash
1# 基本情報
2ffprobe -v error -select_streams v:0 \
3  -show_entries stream=width,height,r_frame_rate,codec_name,duration \
4  -show_entries format=duration,size \
5  -of default=noprint_wrappers=1 input.mp4
6
7# JSON 形式（パース用）
8ffprobe -v quiet -print_format json -show_format -show_streams input.mp4

ffmpeg（フレーム抽出）

bash
1# 等間隔フレーム抽出（1fps）
2ffmpeg -i input.mp4 -vf "fps=1" out/frame_%03d.png -y
3
4# 特定秒のフレーム
5ffmpeg -i input.mp4 -ss 5.5 -frames:v 1 out/at_5s.png -y
6
7# 特定フレーム番号（0-indexed）
8ffmpeg -i input.mp4 -vf "select=eq(n\,60)" -frames:v 1 out/frame_060.png -y
9
10# GIF 作成
11ffmpeg -i input.mp4 -vf "fps=5,scale=320:-1:flags=lanczos" out/preview.gif -y
12
13# 先頭 N 秒だけ切り出し
14ffmpeg -i input.mp4 -t 5 -c copy out/first_5s.mp4 -y

Remotion

bash
1# still（特定フレーム抽出）
2cd {projectDir} && npx remotion still {compositionId} out/frame.png --frame=0
3
4# render（MP4 出力）
5cd {projectDir} && npx remotion render {compositionId} out/preview.mp4
6
7# フレーム番号の計算（30fps）
8# 1秒 = 30フレーム, 3秒 = 90, 5.5秒 = 165

典型的なワークフロー例

Remotion プロジェクトの検証

bash
1# 1. MP4 にレンダリング
2$TOOL render ./preview-video out/preview.mp4
3
4# 2. 仕様チェック
5$TOOL check out/preview.mp4 --spec width=886 --spec height=1920 --spec fps=30 --spec codec=h264 --spec max_duration=25
6
7# 3. フレーム抽出
8$TOOL frames out/preview.mp4 out/video-frames --fps 2
9
10# 4. Read で目視確認
11Read: out/video-frames/frame_001.png
12Read: out/video-frames/frame_010.png
13Read: out/video-frames/frame_020.png

既存 MP4 の品質チェック

bash
1# 1. 情報確認
2$TOOL info input.mp4
3
4# 2. フレーム抽出
5$TOOL frames input.mp4 out/frames
6
7# 3. Read で目視確認
8Read: out/frames/frame_001.png
9Read: out/frames/frame_005.png