gif-generation

GIF 生成スキル

動画ファイル（webm/mp4）を後処理し、品質設定を調整して最適化された GIF を生成します。

使用する場合

• 録画をアニメーション GIF 形式に変換する場合
• 軽量なデモアニメーションを作成する場合

使用しない場合

• 高品質の動画を出力する場合 — 動画の録画ツールを使用してください
• アニメーションが不要な静止画像を生成する場合

概要

このスキルは、動画の録画（通常はブラウザーの自動化によるもの）を GIF 形式に変換します。複数の品質プリセットと最適化オプションを用意しており、ファイルサイズと画質のバランスを調整できます。

必須の進捗項目

- Validate input video file exists
- Check ffmpeg installation
- Execute GIF conversion
- Verify output and report results

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

手順

ステップ 1：入力ファイルを検証する

入力動画ファイルが存在し、対応形式であることを確認します：

# Check file exists and get info
if [[ -f "$INPUT_FILE" ]]; then
    file "$INPUT_FILE"
    ffprobe -v quiet -show_format -show_streams "$INPUT_FILE" 2>/dev/null | head -20
else
    echo "Error: Input file not found: $INPUT_FILE"
    exit 1
fi

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

対応する入力形式：.webm、.mp4、.mov、.avi

ステップ 2：ffmpeg のインストールを確認する

ffmpeg が利用可能であることを確認します：

if ! command -v ffmpeg &> /dev/null; then
    echo "Error: ffmpeg is not installed"
    echo "Install with: sudo apt install ffmpeg (Linux) or brew install ffmpeg (macOS)"
    exit 1
fi
ffmpeg -version | head -1

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

ステップ 3：変換を実行する

品質要件に応じて適切な変換コマンドを選択します：

基本変換（高速、ファイルサイズ大）

ffmpeg -i input.webm -vf "fps=10,scale=800:-1" output.gif

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

パレット生成による高品質変換（推奨）

ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" output.gif

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

ディザリングによる最高品質変換

ffmpeg -i input.webm -vf "fps=15,scale=1024:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=256:stats_mode=single[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" output.gif

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

最適化オプション

オプション	説明	推奨値
fps	1 秒あたりのフレーム数	滑らかな再生には 10-15、小さいファイルには 5-8
scale	ピクセル単位の幅（-1 は縦横比を維持）	Web 用は 800、サムネイル用は 480
flags=lanczos	高品質なスケーリングアルゴリズム	最高の品質を得るため、常に使用してください
palettegen	最適化されたカラーパレットを生成	品質を重視する出力に使用してください
dither	ディザリングアルゴリズム	パターンには bayer、滑らかな仕上がりには floyd_steinberg

一般的なプリセット

# Thumbnail (small, fast loading)
ffmpeg -i input.webm -vf "fps=8,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" thumbnail.gif

# Documentation (balanced)
ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" docs.gif

# High-fidelity demo
ffmpeg -i input.webm -vf "fps=15,scale=1024:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=256[p];[s1][p]paletteuse" demo.gif

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

ステップ 4：出力を確認する

変換が成功したことを確認し、指標を報告します：

if [[ -f "$OUTPUT_FILE" ]]; then
    echo "GIF generated successfully: $OUTPUT_FILE"

    # Report file size
    SIZE=$(du -h "$OUTPUT_FILE" | cut -f1)
    echo "File size: $SIZE"

    # Get dimensions and frame count
    ffprobe -v quiet -select_streams v:0 -show_entries stream=width,height,nb_frames -of csv=p=0 "$OUTPUT_FILE"
else
    echo "Error: GIF generation failed"
    exit 1
fi

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

完了条件

• 入力ファイルが既存の動画形式であることを確認済み
• ffmpeg が利用可能であることを確認済み
• 指定された出力パスに GIF ファイルが作成されている
• 出力ファイルのサイズをユーザーに報告済み
• 変換中に ffmpeg エラーが発生していない

トラブルシューティング

出力ファイルが大きい

品質設定を下げます：

# Lower fps and resolution
ffmpeg -i input.webm -vf "fps=8,scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" smaller.gif

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

色むら

ディザリングを使用します：

ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse=dither=floyd_steinberg" smooth.gif

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。

変換が遅い

速度を優先する場合は、パレット生成を使わない基本変換を使用します：

ffmpeg -i input.webm -vf "fps=10,scale=800:-1" quick.gif

確認： --help フラグを指定してコマンドを実行し、利用可能であることを確認します。