第5回 TypeScript×Puppeteerで始めるスクレイピング – 取得するファイルを絞り込む

キジ(@kiji)です｡今回はスクレイピング時に取得するファイルの種類によって､絞り込みをしたいと思います｡これは､大規模なデータを取得するさいにおいて､大きく力を発揮します｡詳しくは､以下のような効果があります｡

通信量の削減
処理の高速化

特に､通信量を削減することはスクレイピング対象のサーバーの負荷を削減することにもなりますので､積極的に実施しましょう｡

前回の記事は以下になります｡

本記事でできること
環境
説明
ソースコード
実行結果
まとめ
参考文献

本記事でできること

上記画像のように､Yahooファイナンスの画像が表示されていません｡前回までのスクレイピングにおいて､画像ファイルは不要であるため､絞り込みを行い､取得しないようにしています｡

環境

$ node -v
v14.17.3

# typescript
4.4.2

# puppeteer
10.2.0

説明

page.setRequestInterception( true );
page.on('request', ( req : HTTPRequest ) => {
    if( req.resourceType()  == 'image' ) {
        req.abort().catch( e => { console.error( e ); });
    } else {
         req.continue().catch( e => { console.error( e ); });
    }
});

まず､setRequestInterception(true)を実行します｡文字通り､リクエストを遮断することを許可します｡
これにより､page.on(‘request’)を使うことができます｡

HTTPRequestオブジェクトを受け取ったコールバックメソッド内で､条件に応じて処理をします｡
今回は､resourceTypeが’image’であればabort()､それ以外はcontinueとしています｡これにより､imageの場合は､リクエストが中断されます｡

ソースコード

	import { Browser, HTTPRequest, Page } from "puppeteer";

	const puppeteer = require('puppeteer');
	const target_url = "https://info.finance.yahoo.co.jp/ranking/?kd=8&mk=1&tm=d&vl=a";

	const sleep = async (ms : number) => new Promise(resolve => setTimeout(resolve, ms));

	( async () => {
	// browserを立ち上げる
	let browser;
	// page(tab)を生成する
	let page;

	try {
	browser = await puppeteer.launch({
	'headless' : false,
	'slowMo' : 100,
	'args': [ `–window-size=1200,800` ],
	'defaultViewport': {
	'width':1200,
	'height':800
	}
	}) as Browser;
	page = await browser.newPage() as Page;

	// HTTPリクエストイベントが発生したら｡
	page.setRequestInterception( true );
	page.on('request', ( req : HTTPRequest ) => {
	if( req.resourceType() == 'image' ) {
	req.abort().catch( e => { console.error( e ); });
	} else {
	req.continue().catch( e => { console.error( e ); });;
	}
	});

	// 特定のURLへ移動する｡
	// ページ読み込みができるまで待つ
	await Promise.all([
	page.waitForNavigation({ 'waitUntil' : 'domcontentloaded', 'timeout' : 30000 }),
	page.goto(target_url)
	]);

	await sleep(10000);

	// 遷移先のページ確認
	let dom = await page.content();
	if( dom.indexOf("rankingTableWrapper") < 0 ) {
	throw new Error( "ページ遷移失敗" );
	}

	// 入力フォームの取得
	await page.type("#searchText", "7203");

	// 検索ボタンの押下
	const search_btn = await page.$("#searchButton");
	await Promise.all([
	page.waitForNavigation({ 'waitUntil' : 'networkidle0', 'timeout' : 30000 }),
	search_btn?.click()
	]);


	} catch( e ) {
	console.error( e );
	} finally {
	// browserを閉じる
	if( browser ) {
	await browser.close();
	browser = undefined;
	}
	}
	})( );