website-to-vite-scraper

Website-to-Vite Scraper V2

あらゆる種類のウェブサイトに対応した、AI を活用するマルチプロバイダー型ウェブサイトスクレイパーです。

スクレイピング方法

方法	最適な用途	ボット対策	JavaScript レンダリング	費用
Playwright	一般的なサイト、Next.js/React アプリ	❌	✅ 完全対応	無料
Apify RAG Browser	LLM/RAG 向けに最適化されたコンテンツ	✅	✅ 適応型	クレジット
Crawl4AI	AI トレーニングデータ、クリーンな抽出	✅	✅	クレジット
Firecrawl	保護されたサイト、ボット対策の回避	✅✅	✅	月額 $16

クイックスタート

GitHub Actions（推奨）

# Go to: Actions → Website Scraper V2 → Run workflow
# Options:
#   - URL: https://www.reventure.app/
#   - Project name: reventure-clone
#   - Method: all (tries all providers)
#   - Deploy: true

API MEGA LIBRARY との統合

ライブラリの以下の API が、このスクレイパーの機能を強化します。

API	目的	ステータス
APIFY_API_TOKEN	RAG Browser、Crawl4AI、Web Scraper	✅ 設定済み
FIRECRAWL_API_KEY	ボット対策の回避、ステルスモード	✅ 設定済み
BROWSERLESS_API_KEY	代替のヘッドレスブラウザー	🔄 利用可能

MCP サーバーとの統合

Claude Desktop/Cursor を Apify MCP に接続して、AI を活用したスクレイピングを行います。

{
  "mcpServers": {
    "apify": {
      "command": "npx",
      "args": ["@apify/actors-mcp-server"],
      "env": {
        "APIFY_TOKEN": "your-apify-api-token"
      }
    }
  }
}

または、ホスト版を使用します：https://mcp.apify.com?token=YOUR_TOKEN

使用する Apify Actor

apify/rag-web-browser

• 目的： LLM 向けに最適化されたウェブコンテンツの抽出
• 出力： Markdown、HTML、テキスト
• 機能：
  • Playwright による適応型処理（JavaScript に対応）
  • クリーンなコンテンツ抽出
  • リンクの追跡
  • メタデータの抽出

raizen/ai-web-scraper (Crawl4AI)

• 目的： AI トレーニングデータの収集
• 出力： クリーンアップ済みの Markdown、構造化されたリンク
• 機能：
  • 定型部分（ヘッダー、フッター、ナビゲーション）を除外
  • 単語数によるしきい値処理
  • 外部リンクのフィルタリング

Firecrawl

• 目的： ボット対策で保護されたサイト
• 出力： Markdown、HTML、スクリーンショット
• 機能：
  • 検出回避技術
  • JavaScript レンダリング
  • メインコンテンツの抽出
  • 動的コンテンツのための 5 秒間の待機

出力構造

project-name/
├── dist/
│   ├── index.html      # Best merged HTML
│   ├── screenshot.png  # Full page capture
│   ├── meta.json       # Scrape metadata
│   └── assets/
│       ├── images/     # Downloaded images
│       ├── css/        # Stylesheets
│       └── js/         # Scripts
└── results/
    ├── playwright/     # Raw Playwright output
    ├── apify-rag/      # RAG Browser output
    ├── crawl4ai/       # Crawl4AI output
    └── firecrawl/      # Firecrawl output

CSR/SPA サイトへの対応

クライアントサイドでレンダリングする Next.js、React、Vue などのサイトでは、JavaScript の実行が必要です。

1. Playwright は networkidle の後、さらに 5 秒間待機します
2. Apify RAG は適応型クローラーを使用します（必要に応じて Playwright を使用）
3. Firecrawl には JavaScript レンダリングが組み込まれています

__NEXT_DATA__ の抽出（Next.js サイトの場合）：

• Playwright は自動的に抽出し、next_data.json に保存します
• 静的ページの再構築に利用できます

ワークフローパラメーター

パラメーター	型	デフォルト値	説明
url	文字列	必須	スクレイピングするウェブサイトの URL
project_name	文字列	必須	出力フォルダー／Cloudflare プロジェクト名
scrape_method	選択肢	playwright	使用する方法
extract_assets	ブール値	true	画像/CSS/JS をダウンロードする
deploy_cloudflare	ブール値	true	Cloudflare Pages にデプロイする

費用の最適化

シナリオ	推奨方法
シンプルな静的サイト	Playwright（無料）
JavaScript を多用する SPA	Playwright → Apify RAG にフォールバック
保護されたサイト（Cloudflare）	Firecrawl
AI/RAG パイプライン	Apify RAG または Crawl4AI
最大限のカバレッジ	all メソッド

セキュリティ評価

API_MEGA_LIBRARY のガイドラインに基づく評価：

API	セキュリティスコア	推奨
Apify	85/100	✅ 採用
Firecrawl	82/100	✅ 採用
Playwright	90/100	✅ 採用（ローカル）

トラブルシューティング

サイトが空白のページを返す

1. scrape_method: all を試して、複数のプロバイダーを使用します
2. Playwright の待機時間を延長します
3. サイトがデータセンターの IP をブロックしているか確認します → Firecrawl を使用します

アセットをダウンロードできない

1. サイトによっては、アセットへの直接リクエストをブロックします
2. 元の HTML の相対パスを使用します
3. CORS の制限を確認します

Cloudflare の保護が検出された

1. ボット対策を回避できる Firecrawl を使用します
2. または、住宅用プロキシを使用して Apify を利用します

関連スキル

• auction-results - オークションデータのスクレイピングに類似の方法を使用します
• bcpao-scraper - BCPAO の不動産データを抽出します
• youtube-transcript - 動画コンテンツを抽出します

変更履歴

V2.0 (Dec 2025)

• Added multi-provider support (Playwright, Apify, Firecrawl)
• MCP server integration
• Automatic provider fallback
• Asset downloading
• Cloudflare Pages deployment

V1.0 (Dec 2025)

• Initial Playwright-only scraper
• Basic HTML/CSS/JS extraction