YouTube MCP
YouTubeの動画から自動的にスクリーンショットを取得するツールです。YouTube ShortsとYouTube動画に対応しています。
機能
YouTube Shorts
- 指定したn秒ごとにスクリーンショットを撮影
- 最大60枚まで撮影(動画が60秒以上の場合)
- 動画エリアのみを正確に切り出して
tmp/
に保存 - リアルタイムでスクリーンショットを表示
- 全部もしくは選択した画像をZIPでローカルにDL(Mac、Windowsの双方で開ける)
YouTube動画
- 指定したn秒ごとにスクリーンショットを撮影
- 最大60枚まで撮影(動画が60秒以上の場合)
- 動画エリアのみを正確に切り出して
tmp/
に保存 - リアルタイムでスクリーンショットを表示
- 全部もしくは選択した画像をZIPでローカルにDL(Mac、Windowsの双方で開ける)
TikTok
- 現在対応準備中です
- YouTubeまたはYouTube ShortsのURLをご利用ください
技術スタック
- Node.js 18
- Express
- Playwright
- Firebase Functions (Gen 2)
- Firebase Hosting
- Firebase Storage
- TypeScript
- Bootstrap CSS
プロジェクト構成
Playwrigh-MCP-Server/
├── functions/ # Cloud Functions
│ ├── src/ # ソースコード
│ │ ├── index.ts # メインエントリーポイント
│ │ ├── screenshot.ts # スクリーンショット機能
│ │ ├── screenshots.ts # スクリーンショット一覧取得
│ │ ├── download-zip.ts # ZIPダウンロード機能
│ │ └── types.ts # 型定義
│ ├── package.json # 依存関係
│ └── tsconfig.json # TypeScript設定
├── public/ # 静的ファイル
│ └── index.html # メインページ
├── firebase.json # Firebase設定
└── storage.rules # Storageセキュリティルール
API一覧
スクリーンショット取得
- エンドポイント:
/screenshot
- メソッド: POST
- パラメータ:
{
"url": "YouTube URL",
"interval": 1 // 間隔(秒)
}
- レスポンス:
{
"success": true,
"screenshots": [
{
"imageUrl": "署名付きURL",
"time": "タイムスタンプ",
"filename": "ファイル名"
}
],
"interval": 1
}
スクリーンショット一覧取得
- エンドポイント:
/screenshots
- メソッド: GET
- レスポンス:
[
{
"filename": "ファイル名",
"imageUrl": "署名付きURL",
"time": "タイムスタンプ"
}
]
ZIPダウンロード
- エンドポイント:
/download-zip
- メソッド: POST
- パラメータ:
{
"filenames": ["ファイル名1", "ファイル名2"]
}
- レスポンス: ZIPファイル
GCPアーキテクチャ
使用サービス
- Firebase Functions (Gen 2)
- ランタイム: Node.js 18
- リージョン: us-central1
- メモリ: 1GiB
- CPU: 1
- タイムアウト: 540秒
- 最大インスタンス数: 100
- 同時実行数: 80
- エンドポイント: https://api-ub7zp5pjra-uc.a.run.app
- Firebase Storage
- バケット: mcp-5e4b5.firebasestorage.app
- セキュリティルール: 認証済みユーザーのみアクセス可能
- Firebase Hosting
- ドメイン: https://mcp-5e4b5.web.app
IAM権限設定
ユーザー権限
t@bonginkan.ai
roles/owner
(プロジェクト所有者)roles/run.admin
(Cloud Run管理者)
サービスアカウント権限
- Cloud Functions
33501462786-compute@developer.gserviceaccount.com
roles/run.admin
roles/run.developer
roles/run.invoker
roles/cloudfunctions.developer
roles/storage.admin
- Firebase Admin
firebase-adminsdk-fbsvc@mcp-5e4b5.iam.gserviceaccount.com
roles/firebase.sdkAdminServiceAgent
roles/firebaseauth.admin
roles/iam.serviceAccountTokenCreator
roles/storage.admin
- Cloud Build
33501462786@cloudbuild.gserviceaccount.com
roles/run.admin
roles/cloudfunctions.developer
roles/storage.admin
roles/artifactregistry.admin
roles/eventarc.admin
実装の詳細
スクリーンショット機能
- Playwrightを使用してヘッドレスブラウザを制御
- ビューポートサ���ズ: 1280x720
- 一時ディレクトリを使用してスクリーンショットを一時保存
- Firebase Storageにアップロード後、一時ファイルを削除
- 署名付きURLは15分間有効
エラーハンドリング
- 各APIエンドポイントでエラーをキャッチ
- エラーメッセージをJSON形式で返却
- 404エンドポイントのハンドリング
- 500エラー時の適切なエラーレスポンス
- 許可オリジン:
- 許可メソッド: GET, POST
- クレデンシャル: 有効
セキュリティ
- Firebase Storageのセキュリティルール
- 署名付きURLの有効期限設定(15分)
- 一時ファイルの適切な削除
最新の修正内容(2024-03-28)
バグ修正
- CORS設定の改善
- エラーハンドリングの強化
- 404エラーのJSON形式レスポンス
- 500エラー時の詳細なエラーメッセージ
- Firebase Storage対応
- バケット名の明示的な指定
- 署名付きURLの有効期限を15分に設定
- Cloud Functions Gen 2の最適化
- メモリ設定の最適化(1GiB)
- タイムアウト設定の調整(540秒)
- 同時実行数の設定(80)
機能改善
- スクリーンショット機能
- Playwrightの設定最適化
- ヘッドレスブラウザのビューポート設定
- 一時ファイル管理の改善
- YouTube Shorts対応の改善
- リアルタイム表示機能の実装
- API応答の改善
- エラーメッセージの日本語化
- レスポンス形式の統一
- タイムスタンプ形式の標準化
- ストリーミングレスポンスの実装
- セキュリティ強化
- Firebase Storageのセキュリティルール更新
- 一時ファイルの確実な削除
- エラー情報の適切な制限
- フロントエンド改善
- リアルタイム表示の最適化
- 画像URLの修正
- エラーハンドリングの強化
- ユーザーインターフェースの改善
セットアップ
- リポジトリのクローン
git clone https://github.com/tsubouchi/youtube_mcp.git
cd youtube_mcp
- 依存パッケージのインストール
# プロジェクトルート
npm install
# Cloud Functions
cd functions
npm install
- Firebase CLIのインストール
npm install -g firebase-tools
- Firebaseへのログイン
- プロジェクトの初期化
- デプロイ
# Cloud Functions
cd functions
npm run deploy
# Firebase Hosting
cd ..
firebase deploy --only hosting
ローカル開発環境のセットアップ
- 依存パッケージのインストール
# プロジェクトルート
npm install
# Cloud Functions
cd functions
npm install
- サービスアカウントキーの設定
- Firebase Consoleからサービスアカウントキーをダウンロード
functions/service-account.json
として保存
- 環境変数の設定
# functions/.env
GOOGLE_APPLICATION_CREDENTIALS=./service-account.json
- エミュレータの起動
cd functions
npm run serve
エミュレータのポート設定
エミュレータは以下のポートを使用します:
- Functions: http://127.0.0.1:5001
- Emulator UI: http://127.0.0.1:4001
APIテスト
- ヘルスチェック
curl http://localhost:5001/mcp-5e4b5/us-central1/api
- スクリーンショット取得
curl -X POST http://localhost:5001/mcp-5e4b5/us-central1/api/screenshot \
-H "Content-Type: application/json" \
-H "Accept: application/json" \
-d '{"url": "YouTube URL", "interval": 5}'
- スクリーンショット一覧取得
curl http://localhost:5001/mcp-5e4b5/us-central1/api/screenshots
- ZIPダウンロード
curl -X POST http://localhost:5001/mcp-5e4b5/us-central1/api/download-zip \
-H "Content-Type: application/json" \
-d '{"filenames": ["ファイル名1", "ファイル名2"]}'
注意事項
- エミュレータ使用時は実際のFirebase Storageにアクセスします
- サービスアカウントキーは
.gitignore
に含まれており、リポジトリにコミットされません - エミュレータUIで関数の実行状況やログを確認できます
注意事項
- Node.js 18は2025年4月30日に非推奨となります
- スクリーンショットは一時ディレクトリに保存され、処理後に削除されます
- 動画の長さが60秒を超える場合、最初の60枚のみが保存されます
- Firebase Storageのセキュリティルールは認証済みユーザーのみアクセス可能に設定されています
- 署名付きURLは15分間のみ有効です
IMPORTANT
スクリーンショットの保存とZIP化の仕様
- スクリーンショットの保存
- すべてのスクリーンショットは
/tmp/screenshots/
ディレクトリに一時保存されます - ファイル名は
screenshot_[タイムスタンプ]_[連番].png
の形式です - 一時ファイルは処理完了後も保持され、新しいスクリーンショットを撮影する際に上書きされます
- ZIPファイルの作成
- 選択したスクリーンショットは
/tmp/screenshots/
から直接読み込まれます - ZIPファイルは一時的に
/tmp/screenshots/
に作成され、ダウンロード後に削除されます - ZIPファイル名は
screenshots_[タイムスタンプ].zip
の形式です
- 一時ファイルの管理
- 一時ファイルは定期的にクリーンアップする必要があります
- 新しいスクリーンショットを撮影する前に、古いファイルを削除することを推奨します
ライセンス
MIT License