CSS Authorをスクレイピングする方法：Webスクレイピング完全ガイド

from playwright.sync_api import sync_playwright

def run():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=True)
        page = browser.new_page()
        page.goto('https://cssauthor.com/mockups/')

        # 投稿グリッド要素が読み込まれるのを待機
        page.wait_for_selector('.brx-posts-grid')

        # 「Load More」ボタンがあればクリックして処理
        if page.is_visible('button.brx-load-more-button'):
            page.click('button.brx-load-more-button')
            page.wait_for_timeout(2000)

        # レンダリングされたDOMからタイトルを抽出
        titles = page.query_selector_all('.brx-post-title')
        for title in titles:
            print(title.inner_text())

        browser.close()

run()

import scrapy
import json

class CssAuthorSpider(scrapy.Spider):
    name = 'css_author_spider'
    # WordPress REST APIエンドポイントを使用
    start_urls = ['https://cssauthor.com/wp-json/wp/v2/posts?per_page=20']

    def parse(self, response):
        posts = json.loads(response.text)
        for post in posts:
            yield {
                'id': post['id'],
                'title': post['title']['rendered'],
                'link': post['link'],
                'date': post['date']
            }
        
        # REST APIの次のページをたどるロジック
        current_page = int(response.url.split('page=')[-1]) if 'page=' in response.url else 1
        next_page = f"https://cssauthor.com/wp-json/wp/v2/posts?per_page=20&page={current_page + 1}"
        yield scrapy.Request(next_page, callback=self.parse)

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://cssauthor.com/free-fonts/');

  // リスティングページから基本情報を抽出
  const fonts = await page.evaluate(() => {
    const items = Array.from(document.querySelectorAll('.brx-post-title a'));
    return items.map(item => ({
      name: item.innerText,
      url: item.href
    }));
  });

  console.log(fonts);
  await browser.close();
})();