Open Collectiveをスクレイピングする方法：財務および貢献者データの取得ガイド

from playwright.sync_api import sync_playwright

def scrape_opencollective():
    with sync_playwright() as p:
        # JSをサポートするブラウザを起動
        browser = p.chromium.launch(headless=True)
        page = browser.new_page()
        page.goto('https://opencollective.com/discover')
        
        # コレクティブカードがロードされるのを待機
        page.wait_for_selector('.CollectiveCard')
        
        # DOMからデータを抽出
        collectives = page.query_selector_all('.CollectiveCard')
        for c in collectives:
            name = c.query_selector('h2').inner_text()
            print(f'見つかったプロジェクト: {name}')
            
        browser.close()

scrape_opencollective()

import scrapy
import json

class OpenCollectiveSpider(scrapy.Spider):
    name = 'opencollective'
    start_urls = ['https://opencollective.com/webpack']

    def parse(self, response):
        # Open CollectiveはNext.jsを使用しており、データはしばしばscriptタグ内にあります
        next_data = response.xpath('//script[@id="__NEXT_DATA__"]/text()').get()
        if next_data:
            parsed_data = json.loads(next_data)
            collective = parsed_data['props']['pageProps']['collective']
            
            yield {
                'name': collective.get('name'),
                'balance': collective.get('stats', {}).get('balance'),
                'currency': collective.get('currency')
            }

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://opencollective.com/discover');
  
  // 動的なコンテンツがロードされるのを待機
  await page.waitForSelector('.CollectiveCard');
  
  // 要素をループして名前を抽出
  const data = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.CollectiveCard')).map(el => ({
      name: el.querySelector('h2').innerText
    }));
  });
  
  console.log(data);
  await browser.close();
})();