Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Puppeteerによる優しいウェブサイトクロール
Search
Osamu Nagayama
December 03, 2019
Programming
0
34
Puppeteerによる優しいウェブサイトクロール
Osamu Nagayama
December 03, 2019
Tweet
Share
More Decks by Osamu Nagayama
See All by Osamu Nagayama
摂阿毘達磨義論より 摂色分別の章
naga3
0
140
呼吸瞑想のススメ
naga3
1
100
Scrapyドキュメント翻訳活動について
naga3
1
130
Other Decks in Programming
See All in Programming
Eloquentを使ってどこまでコードの治安を保てるのか?を新人が考察してみた
itokoh0405
0
3.1k
Dive into Triton Internals
appleparan
0
480
SidekiqでAIに商品説明を生成させてみた
akinko_0915
0
130
AI駆動開発カンファレンスAutumn2025 _AI駆動開発にはAI駆動品質保証
autifyhq
0
150
JEP 496 と JEP 497 から学ぶ耐量子計算機暗号入門 / Learning Post-Quantum Crypto Basics from JEP 496 & 497
mackey0225
1
160
What’s Fair is FAIR: A Decentralised Future for WordPress Distribution
rmccue
0
160
AI 時代だからこそ抑えたい「価値のある」PHP ユニットテストを書く技術 #phpconfuk / phpcon-fukuoka-2025
shogogg
1
410
外接に惑わされない自システムの処理時間SLIをOpenTelemetryで実現した話
kotaro7750
0
240
2026年向け会社紹介資料
misu
0
150
自動テストを活かすためのテスト分析・テスト設計の進め方/JaSST25 Shikoku
goyoki
2
570
PHPライセンス変更の議論を通じて学ぶOSSライセンスの基礎
matsuo_atsushi
0
140
ノーコードからの脱出 -地獄のデスロード- / Escape from Base44
keisuke69
0
680
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
6k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
How STYLIGHT went responsive
nonsquared
100
5.9k
Site-Speed That Sticks
csswizardry
13
960
The Cost Of JavaScript in 2023
addyosmani
55
9.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Facilitating Awesome Meetings
lara
57
6.6k
Optimizing for Happiness
mojombo
379
70k
BBQ
matthewcrist
89
9.9k
Transcript
Puppeteerによる優しい ウェブサイトクロール @naga3 LAPRAS シニアエンジニア
Puppeteerとは Node.jsからAPIでChrome(Chromium)を制御できるライブラリ。 実際に内部でChrome(Chromium)が動くので、ブラウザで出来ることならば ほぼ全て素直に実現可能。 例: ・ログイン ・ボタンのクリック ・無限スクロールページのスクロール
Pupetteer ←間違い Puppetter ←間違い Puppeteer ←正解! 中の「p」と「e」が2文字ずつ。
実際にクロールしてみよう 厚生労働省の「人材サービス総合サイト」 (https://www.jinzai-sougou.go.jp/) から、 労働派遣事業一覧のデータを取得する。
URLが変わらない! 検索画面のURL https://www.jinzai-sougou.go.jp/srv110.aspx 事業所一覧結果のURL https://www.jinzai-sougou.go.jp/srv110.aspx
ページ遷移するときの挙動を調べる 都道府県検索から「東京」の IDをDevToolsから調べ る。コンソール画面で実際にクリックできるか試して みても良い。jQuery風のSyntaxが使える。 $('#ctl00_ctl00_cphHFContent_cphContent_cbTokyo').click()
ページ遷移するときの挙動を調べる 同様に、検索ボタンのIDも調べておく。
Puppeteerでページ遷移する // 検索のトップページへ遷移する。 await page.goto('https://www.jinzai-sougou.go.jp/srv120.aspx') // 「東京」のチェックボックスをクリック await page.click('#ctl00_ctl00_cphHFContent_cphContent_cbTokyo') //
「検索」ボタンをクリック await page.click('#ctl00_ctl00_cphHFContent_cphContent_btnSearch') // テーブルが出てくるまで待つ await page.waitFor('table#search')
Puppeteer Tips
ログイン 一度ログインすれば、Browserインスタンスを閉じ ない限りChrome自体は閉じられないので、 Page インスタンス(タブ)を増やせば、ログインを継続 できる。 Browser Page
ページ遷移完了を待つ await page.goto(URL) loadイベント完了まで待つ。これだけで十分な場合が多い。 await page.goto(URL, ‘networkidle2’) コネクション数が2個以下である状態が500ミリ秒以上続くまで待つ。SPAサイトで使える。
ページ遷移完了を待つ await page.waitFor(selector) selectorの要素が出現するまで待つ。 await page.waitFor(timeout) timeoutの時間が過ぎるまで待つ。
ページ遷移完了を待つ await page.waitFor(() => document.querySelectorAll(‘selector1, selector2’).length) selector1かselector2のどちらかの要素が出現するまで待つ。 waitFor関数はブラウザ内部で動く関数を引数に取ることができ、戻り値が trueになった時点で遷移する。 DOMのquerySelectorAll関数は指定した複数のセレクタに一致するリストを返す。
Happy Puppeteer life !