Kiratuu/Video-Wrapper-Skills

インタビュー動画プロセッサー

Python + Playwright + MoviePy ベースの動画エフェクト処理ツール。HTML/CSS/Anime.js を使用して高品質な視覚効果をレンダリングします。

ワークフロー

ステップ1: 字幕内容の分析

ユーザーが動画と字幕ファイルを提供したら、字幕内容を分析し、エフェクトの提案を生成します：

1. 字幕ファイル (.srt) を読み込む
2. 内容を分析し、以下を識別する：
   • ゲスト情報（人名バー用）
   • 話題の切り替わりポイント（チャプタータイトル用）
   • キーワードと用語（装飾テロップ用）
   • 専門用語（用語カード用）
   • 印象的な意見（引用カード用）
   • 数字データ（データアニメーション用）
   • 核心的な要点（箇条書き用）
3. 提案リストを生成し、ユーザーに確認用に表示する

ステップ2: ユーザー確認

提案をマークダウン形式でユーザーに表示します：

## 視覚エフェクトの提案

**テーマ**: notion

### 1. 人名バー (Lower Third)
- **名前**: Dario Amodei
- **役職**: CEO
- **会社**: Anthropic
- **表示時間**: 1000ms

### 2. 装飾テロップ (Fancy Text)
1. **汎用人工知能** (emphasis)
   時間: 2630ms - 5500ms
   理由: 核心概念の初出

...

ユーザーは以下を行えます：

• すべての提案を確認
• 一部の提案を修正
• 不要なコンポーネントを削除
• 新しいコンポーネントを追加

ステップ3: 構成を生成してレンダリング

ユーザーの承認後に config.json を生成し、動画をレンダリングします。

利用可能なコンポーネント

コンポーネント	用途	設定フィールド
人名バー (lower_third)	ゲスト情報を表示	name, role, company, startMs, durationMs
チャプタータイトル (chapter_title)	話題切り替えのタイトル	number, title, subtitle, startMs, durationMs
装飾テロップ (fancy_text)	現在の意見を要約	text, style, startMs, endMs, position
用語カード (term_card)	用語を説明	chinese, english, description, firstAppearanceMs
引用カード (quote_callout)	印象的な意見を強調	text, author, startMs, durationMs, position
データアニメーション (animated_stats)	数字を表示	prefix, number, unit, label, startMs
箇条書き (bullet_points)	核心要点をまとめる	title, points[], startMs, durationMs
ソーシャルメディアバー (social_bar)	フォローを促す	platform, label, handle, startMs, durationMs

装飾テロップの使用規則

⚠️ 重要: 装飾テロップは以下の規則に従う必要があります：

1. フレーズであること: 話し手のその時点での意見を簡潔にまとめた文にすること

   • ✅ 正しい：「AI開発は緩やかな曲線」「知能の成長はムーアの法則に類似」
   • ❌ 誤り：「人工知能」「ムーアの法則」（これらは単語であり、用語カードを使うべき）

2. 用語カードと補完関係:

   • 装飾テロップ：意見を要約（例：「知能は毎年倍増」）
   • 用語カード：用語を説明（例：「ムーアの法則：集積回路のトランジスタ数が18～24か月ごとに倍になる」）

3. 上部に配置: デフォルトでは画面の上部領域（字幕の上）に表示され、顔を隠さないようにします

ソーシャルメディアバーの使用規則

• デフォルトの表示時間：8秒（他のコンポーネントより長く、覚えてもらう時間を確保）
• 通常は動画の最後に表示
• 対応プラットフォーム：twitter, weibo, youtube

テーマシステム

4種類のビジュアルテーマをサポート：

テーマ	スタイル	適用シーン
notion	温かみのある知識スタイル	教育、知識共有
cyberpunk	ネオン未来的	テクノロジー、最先端トピック
apple	ミニマルでエレガント	ビジネス、プロフェッショナルなインタビュー
aurora	グラデーションの流れ	クリエイティブ、アートコンテンツ

設定ファイル形式

{
  "theme": "notion",
  "lowerThirds": [
    {
      "name": "Dario Amodei",
      "role": "CEO",
      "company": "Anthropic",
      "startMs": 1000,
      "durationMs": 5000
    }
  ],
  "chapterTitles": [
    {
      "number": "Part 1",
      "title": "指数関数的成長の本質",
      "subtitle": "The Nature of Exponential Growth",
      "startMs": 0,
      "durationMs": 4000
    }
  ],
  "keyPhrases": [
    {
      "text": "汎用人工知能",
      "style": "emphasis",
      "startMs": 2630,
      "endMs": 5500
    }
  ],
  "termDefinitions": [
    {
      "chinese": "ムーアの法則",
      "english": "Moore's Law",
      "description": "集積回路のトランジスタ数が18～24か月ごとに倍になる",
      "firstAppearanceMs": 37550,
      "displayDurationSeconds": 6
    }
  ],
  "quotes": [
    {
      "text": "AIの開発は非常に滑らかな指数曲線です",
      "author": "— Dario Amodei",
      "startMs": 30000,
      "durationMs": 5000
    }
  ],
  "stats": [
    {
      "prefix": "成長率 ",
      "number": 240,
      "unit": "%",
      "label": "計算能力の年間成長",
      "startMs": 45000,
      "durationMs": 4000
    }
  ],
  "bulletPoints": [
    {
      "title": "核心的な見解",
      "points": [
        "AI開発は滑らかな指数曲線",
        "ムーアの法則に類似した知能の成長",
        "突然の特異点は存在しない"
      ],
      "startMs": 50000,
      "durationMs": 6000
    }
  ]
}

依存関係のインストール

# 仮想環境に入る
cd ~/.claude/skills/video-wrapper
source venv/bin/activate

# 依存関係をインストール
pip install -r requirements.txt

# Playwright ブラウザをインストール
playwright install chromium

コマンドラインでの使用

# ブラウザレンダラーを使用（推奨）
python src/video_processor.py video.mp4 subs.srt config.json output.mp4

# レンダラーを指定
python src/video_processor.py video.mp4 subs.srt config.json -r browser
python src/video_processor.py video.mp4 subs.srt config.json -r pil

技術実装

• 視覚レンダリング: HTML + CSS + Anime.js (Playwright のスクリーンショット経由)
• 動画合成: MoviePy
• アニメーションエンジン: Anime.js (Spring 物理アニメーション)
• 代替レンダリング: Python PIL

ファイル構成

~/.claude/skills/video-wrapper/
├── src/
│   ├── video_processor.py    # メイン処理スクリプト
│   ├── browser_renderer.py   # Playwright レンダラー
│   ├── content_analyzer.py   # コンテンツ分析器
│   ├── fancy_text.py         # PIL 装飾テロップ（代替）
│   └── term_card.py          # PIL カード（代替）
├── templates/
│   ├── fancy-text.html       # 装飾テロップテンプレート
│   ├── term-card.html        # 用語カードテンプレート
│   ├── lower-third.html      # 人名バーテンプレート
│   ├── chapter-title.html    # チャプタータイトルテンプレート
│   ├── quote-callout.html    # 引用カードテンプレート
│   ├── animated-stats.html   # データアニメーションテンプレート
│   └── bullet-points.html    # 箇条書きテンプレート
├── static/
│   ├── css/
│   │   ├── effects.css       # 基本エフェクト
│   │   ├── theme-notion.css  # Notion テーマ
│   │   ├── theme-cyberpunk.css
│   │   ├── theme-apple.css
│   │   └── theme-aurora.css
│   └── js/
│       └── anime.min.js      # Anime.js
└── requirements.txt

注意事項

• 動画処理には時間がかかる場合があります。お待ちください。
• 出力動画を保存するための十分なディスク容量を確保してください。
• Playwright レンダリングの方が品質が良いですが、Chromium のインストールが必要です。
• Playwright が利用できない場合は、自動的に PIL レンダリングにフォールバックします。