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: 入力タイプの判定

入力	判定方法	使えるコマンド
.mp4 / .mov / .webm / .avi	拡張子で判定	info, check, frames, gif
.png / .jpg / .jpeg / .gif / .webp	拡張子で判定	Read で直接表示
ディレクトリ + package.json に remotion	package.json を Read	still, render + 上記全て
ディレクトリ + 動画ファイル群	ls で確認	各ファイルに対して上記

Step 3: 操作の実行

3A: 動画情報の確認

$TOOL info {videoPath}

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

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

# App Store プレビュー動画の仕様チェック例
$TOOL check {videoPath} \
  --spec width=886 \
  --spec height=1920 \
  --spec fps=30 \
  --spec codec=h264 \
  --spec max_duration=25 \
  --spec max_size_mb=500

# 汎用的な仕様チェック
$TOOL check {videoPath} \
  --spec width=1920 \
  --spec height=1080 \
  --spec fps=60

チェック可能な項目:

キー	説明	チェック方法
width	横幅 (px)	完全一致
height	縦幅 (px)	完全一致
fps	フレームレート	完全一致
codec	コーデック名	完全一致 (h264, hevc 等)
max_duration	最大長さ (秒)	以下
max_size_mb	最大サイズ (MB)	以下

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

# 1秒に1枚（デフォルト）
$TOOL frames {videoPath} {outDir}

# 0.5秒に1枚
$TOOL frames {videoPath} {outDir} --fps 2

# サムネイル用（2秒に1枚）
$TOOL frames {videoPath} {outDir} --fps 0.5

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

# フレーム 0
$TOOL still {projectDir} {outDir} --frame 0

# フレーム 90（30fps なら 3秒目）
$TOOL still {projectDir} {outDir} --frame 90

# コンポジション ID を明示
$TOOL still {projectDir} {outDir} --frame 0 --comp MyComposition

3E: Remotion render（MP4 出力）

# 自動検出（Root.tsx から composition ID を取得）
$TOOL render {projectDir} out/preview.mp4

# コンポジション ID を明示
$TOOL render {projectDir} out/preview.mp4 --comp AppStorePreview

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

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

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

# デフォルト（5fps, 幅320px）
$TOOL gif {videoPath} out/preview.gif

# 高品質（10fps）
$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: レポート出力

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

## フレーム検証レポート

### 対象
- ファイル: {fileName}
- 種類: {MP4 / Remotion / 画像}
- 解像度: {width} x {height}
- fps: {fps}
- 長さ: {duration}（動画の場合）
- コーデック: {codec}
- サイズ: {size}MB

### 仕様チェック
| 項目 | 値 | 判定 |
|------|-----|------|
| 解像度 | {W}x{H} | OK/NG |
| fps | {fps} | OK/NG |
| 長さ | {duration}s | OK/NG |
| コーデック | {codec} | OK/NG |
| サイズ | {size}MB | OK/NG |

### フレーム検証結果

| フレーム | タイミング | 判定 | コメント |
|---------|-----------|------|---------|
| frame_001.png | 0:01 | OK | - |
| frame_003.png | 0:03 | NG | テキストが右端で切れている |
| frame_005.png | 0:05 | OK | トランジションがスムーズ |

### 問題点
1. **frame_003.png (0:03)**: テキストが画面右端で切れている
   - 推定原因: テキスト要素の x 座標が大きすぎる

### 良好な点
- 全体のカラーバランスが良い
- シーン遷移が滑らか

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

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

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

# 基本情報
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,r_frame_rate,codec_name,duration \
  -show_entries format=duration,size \
  -of default=noprint_wrappers=1 input.mp4

# JSON 形式（パース用）
ffprobe -v quiet -print_format json -show_format -show_streams input.mp4

ffmpeg（フレーム抽出）

# 等間隔フレーム抽出（1fps）
ffmpeg -i input.mp4 -vf "fps=1" out/frame_%03d.png -y

# 特定秒のフレーム
ffmpeg -i input.mp4 -ss 5.5 -frames:v 1 out/at_5s.png -y

# 特定フレーム番号（0-indexed）
ffmpeg -i input.mp4 -vf "select=eq(n\,60)" -frames:v 1 out/frame_060.png -y

# GIF 作成
ffmpeg -i input.mp4 -vf "fps=5,scale=320:-1:flags=lanczos" out/preview.gif -y

# 先頭 N 秒だけ切り出し
ffmpeg -i input.mp4 -t 5 -c copy out/first_5s.mp4 -y

Remotion

# still（特定フレーム抽出）
cd {projectDir} && npx remotion still {compositionId} out/frame.png --frame=0

# render（MP4 出力）
cd {projectDir} && npx remotion render {compositionId} out/preview.mp4

# フレーム番号の計算（30fps）
# 1秒 = 30フレーム, 3秒 = 90, 5.5秒 = 165

典型的なワークフロー例

Remotion プロジェクトの検証

# 1. MP4 にレンダリング
$TOOL render ./preview-video out/preview.mp4

# 2. 仕様チェック
$TOOL check out/preview.mp4 --spec width=886 --spec height=1920 --spec fps=30 --spec codec=h264 --spec max_duration=25

# 3. フレーム抽出
$TOOL frames out/preview.mp4 out/video-frames --fps 2

# 4. Read で目視確認
Read: out/video-frames/frame_001.png
Read: out/video-frames/frame_010.png
Read: out/video-frames/frame_020.png

既存 MP4 の品質チェック

# 1. 情報確認
$TOOL info input.mp4

# 2. フレーム抽出
$TOOL frames input.mp4 out/frames

# 3. Read で目視確認
Read: out/frames/frame_001.png
Read: out/frames/frame_005.png