Webp Batch MCP

🚀 WebP Batch Converter

このツールは、Model Context Protocol (MCP) サーバーを搭載し、画像をWebP形式にバッチ変換することができます。クロスプラットフォーム対応で、CursorなどのMCP対応IDEとシームレスに連携します。

✨ 主な機能

• 🖼️ PNG、JPG、JPEGファイルをWebP形式に一括変換
• 🌍 macOS、Linux、Windowsといったクロスプラットフォーム対応
• ⚡ 高速変換のためのマルチスレッド処理
• 🎛️ 品質管理、ロスレスモード、メタデータ保存などの柔軟なオプション
• 📊 ファイルサイズと節約統計を含む詳細なレポート
• 🔧 Googleのcwebpを優先し、Sharpにフォールバックするデュアルエンジンサポート
• 🎯 AI開発環境での使用のためのMCP統合

📦 インストール

グローバルインストール

npm install -g webp-batch-mcp

ローカル開発用

git clone https://github.com/mhe8mah/webp-batch-mcp.git
cd webp-batch-mcp
npm install
npm run build

Dockerを使用する場合

docker build -t webp-batch .
docker run -v /path/to/images:/data webp-batch

💻 使用例

コマンドラインインターフェース

node dist/cli.js [options]

オプション

• --src <dir> - スキャンするソースディレクトリ（デフォルト: カレントディレクトリ）
• --quality <0-100> - WebPの品質設定（デフォルト: 75）
• --lossless - ロスレスエンコーディングを使用（PNGに推奨）
• --overwrite - 元のファイルをWebPバージョンに置き換える
• --threads <n> - 同時変換のスレッド数（デフォルト: CPUコア数）
• --preserve-meta - EXIFとICCメタデータを保存する
• --flat <dir> - すべてのWebPファイルを指定したディレクトリに出力する

基本的な使用法

# カレントディレクトリ内のすべての画像を変換
node dist/cli.js

高度な使用法

# 特定のディレクトリ内の画像を高品質で変換
node dist/cli.js --src ./photos --quality 95 --preserve-meta

# ロスレス変換で元のファイルを上書き
node dist/cli.js --src ./images --lossless --overwrite

# バッチ処理を行い、指定した出力ディレクトリに保存
node dist/cli.js --src ./input --flat ./output --threads 8

MCPサーバー

MCPサーバーは、単一のツール convert_to_webp を公開しています。

ツールのパラメータ

{
  "src": "string",          // ソースディレクトリ（デフォルト: "."）
  "quality": "number",      // 品質 0-100（デフォルト: 75）
  "lossless": "boolean",    // ロスレスモード（デフォルト: false）
  "overwrite": "boolean",   // 元のファイルを置き換える（デフォルト: false）
  "threads": "number",      // 同時スレッド数（デフォルト: CPUコア数）
  "preserveMeta": "boolean", // メタデータを保持する（デフォルト: false）
  "flat": "string"          // 出力ディレクトリ（オプション）
}

📚 ドキュメント

Cursorでこのサーバーを追加する方法

1. プロジェクトをクローンしてビルドする:

git clone https://github.com/mhe8mah/webp-batch-mcp.git
cd webp-batch-mcp
npm install
npm run build

2. Cursorの設定を開く
3. Features → MCPに移動する
4. 新しいサーバー設定を追加する:

{
  "mcpServers": {
    "webp-batch": {
      "command": "node",
      "args": ["/path/to/webp-batch-mcp/dist/server.js"]
    }
  }
}

5. Cursorを再起動する
6. convert_to_webp ツールがAI会話で利用可能になります

🔧 技術詳細

変換戦略

1. 主要エンジン: Googleの cwebp ツール（libwebp-toolsに含まれる）
   • 最速のパフォーマンス
   • 最高の圧縮率
   • すべての機能をサポート
2. フォールバックエンジン: Sharp (Node.js)
   • 純粋なJavaScript実装
   • 外部依存がない
   • クロスプラットフォーム互換性

出力動作

• デフォルト: 元のファイルと並んで .webp ファイルを作成する
• 上書きモード: 元のファイルをWebPバージョンに置き換える
• フラットモード: すべてのWebPファイルを指定したディレクトリに出力する
• メタデータ保存: 要求された場合、EXIFとICCプロファイルを維持する

パフォーマンス

• デフォルトですべてのCPUコアを利用する
• p-limitを使用して画像を並行処理する
• リアルタイムの進捗フィードバックを提供する
• 詳細な変換統計を報告する

🛠️ 開発

ビルド

npm run build

テスト

npm test

開発モード

npm run dev

📊 テスト結果

実際のWeb画像で検証されています:

• JPEG (35KB → 17KB): 51%の空間節約
• PNG (7.9KB → 2.8KB): 65%の空間節約
• 全体: 平均53%の圧縮率

📋 依存関係

ランタイム

• @modelcontextprotocol/sdk - MCPサーバーフレームワーク
• sharp - 画像処理のフォールバック
• chalk - 色付きのターミナル出力
• commander - CLI引数の解析
• glob - ファイルパターンのマッチング
• p-limit - 並行性の制御

開発

• typescript - 型安全
• tsup - 高速なTypeScriptバンドラー
• jest - テストフレームワーク

📄 ライセンス

MITライセンス - 詳細はLICENSEファイルを参照してください。

🤝 コントリビューション

1. リポジトリをフォークする
2. 機能ブランチを作成する
3. 新しい機能に対するテストを追加する
4. すべてのテストがパスすることを確認する
5. プルリクエストを送信する

🆘 サポート

問題や機能要求については、GitHubのイシュートラッカー を使用してください。