Webサイトの分割スクリーンショットからFigma配置・整列までの作業を自動化した話

let currentY = window.scrollY;

function nextShot() {
  currentY += 1080;
  window.scrollTo({ top: currentY, behavior: "instant" });
  return currentY; // 実行すると1080pxスクロールして現在のY座標を返す
}

nextShot();

const { chromium } = require('playwright');
const fs = require('fs');

(async () => {
  // ==========================================
  // 【設定項目】
  // ==========================================
  const targetUrl = 'https://example.com'; // 撮影したいURL
  const viewWidth = 1920;
  const viewHeight = 1080;
  const scale = 2; // Retina解像度相当
  const waitBeforeStart = 5000;
  const waitAfterScroll = 1200;

  // 固定・追従要素の削除（2枚目以降）
  const removeFixedElements = true;
  // ==========================================

  const browser = await chromium.launch({ headless: false, args: ['--start-maximized'] });
  const context = await browser.newContext({
    viewport: { width: viewWidth, height: viewHeight },
    deviceScaleFactor: scale,
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  });
  const page = await context.newPage();

  const now = new Date();
  const jstDate = new Date(now.getTime() + (9 * 60 * 60 * 1000));
  const timestamp = jstDate.toISOString().replace(/[:T-]/g, '').slice(0, 15);
  const dir = `./screenshots_${timestamp}`;
  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });

  await page.goto(targetUrl);
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(waitBeforeStart);

  let i = 0;
  let hasNext = true;

  while (hasNext) {
    // 2枚目以降は画面上の追従パーツ(fixed/sticky)を非表示にして被りを防ぐ
    if (removeFixedElements === true && i > 0) {
      console.log(`[INFO] ${i+1}枚目: 追従要素を非表示にしました`);
      await page.evaluate(() => {
        const els = document.querySelectorAll('*');
        els.forEach(el => {
          const style = window.getComputedStyle(el);
          if (style.position === 'fixed' || style.position === 'sticky') {
            el.style.setProperty('display', 'none', 'important');
          }
        });
      });
      await page.waitForTimeout(200);
    } else {
      console.log(`[INFO] ${i+1}枚目を撮影中...`);
    }

    const fileName = `shot_${String(i).padStart(3, '0')}.png`;
    await page.screenshot({ path: `${dir}/${fileName}`, fullPage: false });

    // スクロール判定
    const isBottom = await page.evaluate((vh) => {
      const before = window.scrollY;
      window.scrollBy(0, vh);
      return (window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight - 5;
    }, viewHeight);

    if (isBottom) {
      i++;
      await page.waitForTimeout(waitAfterScroll);
      await page.screenshot({ path: `${dir}/shot_${String(i).padStart(3, '0')}_end.png` });
      hasNext = false;
    } else {
      await page.waitForTimeout(waitAfterScroll);
      i++;
    }
    if (i > 200) break;
  }

  await browser.close();
  console.log('[DONE] 全ての撮影が完了しました。');
})();

// 2枚目（i > 0）以降の撮影時のみ実行
if (i > 0) {
  await page.evaluate(() => {
    // ページ内の要素をチェックし、固定配置（fixed / sticky）されているものを非表示にする
    document.querySelectorAll('*').forEach((el) => {
      const style = window.getComputedStyle(el);
      if (style.position === 'fixed' || style.position === 'sticky') {
        el.style.setProperty('display', 'none', 'important');
      }
    });
  });
}

const nodes = figma.currentPage.selection;

if (nodes.length > 0) {
    const frame = figma.createFrame();
    frame.name = "Combined Images (Hug)";
    
    // オートレイアウト設定
    frame.layoutMode = "VERTICAL";
    frame.itemSpacing = 0;
    frame.paddingLeft = 0;
    frame.paddingRight = 0;
    frame.paddingTop = 0;
    frame.paddingBottom = 0;
  
    // 「内包」設定
    frame.layoutSizingHorizontal = "HUG";
    frame.layoutSizingVertical = "HUG";

    // 座標の初期値
    frame.x = nodes[0].x;
    frame.y = nodes[0].y;

    // 各要素を処理
    for (const node of nodes) {
        if (node.resize) {
            node.resize(node.width * 0.5, node.height * 0.5);
            frame.appendChild(node);
        }
    }

    figma.currentPage.selection = [frame];
} else {
    figma.notify("画像を選択してください");
  }