Puppeteerで何をした？
某移行案件で、古く使われてるサイトもあり、デザインモック、psdデータなど残ってなかった。ある日、「結構長いページですけど、午前中に画像もらえますか？」と言われた。
ついに来た。無茶振り。
ざっと見て、100枚ほどの画像を2時間でやれと。ふむ。
puppeteerのおかげで一気に書き出しができたので、誰かの助けになれたらーと思っての記事です。
（開発者ありがとう T__T)
Puppeteerとは？
puppeteerの意味
Puppeteerの意味は人形使い。パペットを扱う人が、puppeteerだそうです。かっこいいですね、ブラウザーをパペットとし、コントロールしちゃう発想。
Puppeteerができることは
Puppeteerは、DevToolsプロトコルまたはWebDriver BiDiを介してChromeやFirefoxを制御するための高レベルAPIを提供するJavaScriptライブラリです。(ChatGPT訳)
Puppeteerでは、マウス、タッチイベント、キーボード入力を通じてページ上の要素とやり取りすることができます。通常、まずCSSセレクタを使用してDOM要素をクエリし、次に選択した要素に対してアクションを実行します(ChatGPT訳)
簡単にいうと、CSSセレクタから切り出しして、画像やテキスト情報など取得することができる。実際、いろんなデバッグ作業もこれで実現できるらしいですが、今回はCSSセレクトの切り出しのみやりました!
実装
↑pupppeteerの公式サイトにQuick Startがありますので、基本サンプルコードで、できます。そして、通信は必要なので、今回はnode.jsで作ってみました。
const puppeteer = require('puppeteer');
const path = require('path');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setJavaScriptEnabled(true);
await page.setViewport({
//サイズを決める、画質と画像サイズに影響ある部分です。
width: 1980,
height: 800,
deviceScaleFactor: 2,
});
await page.setRequestInterception(true);
page.on('request', request => {
if (request.url().includes('cookie')) {
request.abort();
} else {
request.continue();
}
});
const targetURL = 'https://サイトのアドレスを入れてください';
await page.goto(targetURL, { waitUntil: 'domcontentloaded' });
//ポイント①
//CSSを読み出しできてから待ってもらう
await page.waitForSelector('CSSのセレクトを指定', { visible: true });
await page.evaluate(() => {
const style = document.createElement('style');
//ポイント②
// 意外にも重要なフォント指定
style.textContent = `
* {
font-family: 'DNP Shuei Mincho Pr6', serif !important;
}
`;
document.head.appendChild(style);
});
//ポイント③
//追従するヘッダー、フッターを書き出しさせないため
await page.evaluate(() => {
const header = document.querySelector('#header');
const footer = document.querySelector('#footer');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
});
await page.evaluate(async () => {
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
let previousHeight = 0;
while (true) {
const currentHeight = document.body.scrollHeight;
window.scrollTo(0, currentHeight);
await delay(500);
if (currentHeight === previousHeight) break;
previousHeight = currentHeight;
}
});
↑ポイント①-③は苦労しました!!!
① 指定した要素が確実にDOM上で操作可能な状態になるのを保証します。
② 全然違うフォントや、タイトル崩れなど起きたので、フォント指定は意外にも重要でした。
③ 一番大変だったところ、サイトの都合上、追従ヘッダー、フッター(時々ボタン)などを、ここでミュートさせる。
ここまで来たら、あとはハッピーです!
// スクリーンショットを撮る親要素のセレクタ
const parentSelector = '指定する親要素';
const fileName = '画像名を設定.jpg';
const parentElement = await page.$(parentSelector);
if (parentElement) {
await parentElement.screenshot({
path: path.resolve(__dirname, fileName),
quality: 100,
});
console.log(`${fileName} にスクリーンショットを保存しました`);
} else {
console.log(`${parentSelector} が見つかりませんでした`);
}
await browser.close();
})();
↑これで、画像が綺麗に切り取れました。
上記の部分を改造して、同じタグのものを順番に切り出すことも可能だったので、自分が担当したサイトが、こういったCSSの使い回しが多かったので、、、
このようにして、書き出しの部分をちょっと変更して、複数枚を一気に書き出しました!!
指定階層のものを、for文で回して、順番に書き出してもらい、100枚なんて、10分で終わった(やった!!)
const selectors = [
{ parentSelector: '#id1', childSelector: '.css1', baseFileName: '基本ファイル名1' }
];
for (const item of selectors) {
const parentElement = await page.$(item.parentSelector);
if (parentElement) {
const childElements = await parentElement.$$(item.childSelector); // 複数要素を取得
if (childElements.length > 0) {
for (let i = 0; i < childElements.length; i++) {
const childElement = childElements[i];
const fileName = `${item.baseFileName}_${i + 1}.jpg`;
await childElement.screenshot({
path: path.resolve(__dirname, fileName),
quality: 100,
});
console.log(`${fileName} にスクリーンショットを保存しました`);
}
} else {
console.log(`${item.childSelector} が ${item.parentSelector} の中に見つかりませんでした`);
}
} else {
console.log(`${item.parentSelector} が見つかりませんでした`);
}
}
最後に node ファイル名 で書き出しして、終わり!!!
やってみて良かったこと & 気づき
①
すごく早くできたかつ、指定要素のみ書き出したので、ヒューマンエラーのない工程ができた。
②
こうやって早く出来上がったのが、コーダーさんがすごく綺麗に階層を整理してくれたおかげです。たまに、クソCSS書く自分もいますが、人のコード読んで、身が引き締まります。
③
なんか問題ある時に、こうやってライブラリーの力を借りてできたこと、本当に、開発者に感謝しかない。特にバタバタしていた期間に、puppeteerに出会えたことに感謝〜