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
48
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Puppeteerによる優しいウェブサイトクロール
Osamu Nagayama
December 03, 2019
More Decks by Osamu Nagayama
See All by Osamu Nagayama
摂阿毘達磨義論より 摂色分別の章
naga3
0
160
呼吸瞑想のススメ
naga3
1
110
Scrapyドキュメント翻訳活動について
naga3
1
140
Other Decks in Programming
See All in Programming
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
geekplus_tech
0
340
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
240
Datadog × OpenTelemetry 入門と実践のあいだ
kn_to_maxpno
1
150
AutonomyとControlのあいだ:Graflowで記述するAIエージェント協調
myui
0
120
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
pyama86
3
2k
Contextとはなにか
chiroruxx
1
290
RTSPクライアントを自作してみた話
simotin13
0
570
CSC307 Lecture 17
javiergs
PRO
0
320
The ROI of Quarkus for Spring Boot Applications
hollycummins
0
110
AI時代のUIはどこへ行く?その2!
yusukebe
21
7k
TAKTでAI駆動開発の品質を設計する
j5ik2o
6
1.2k
Copilot CLI の継戦能力を高める コンテキスト管理
nozomutu
1
1.2k
Featured
See All Featured
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
65
56k
Tell your own story through comics
letsgokoyo
1
950
Six Lessons from altMBA
skipperchong
29
4.3k
First, design no harm
axbom
PRO
2
1.2k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
54k
WCS-LA-2024
lcolladotor
0
630
Fireside Chat
paigeccino
42
3.9k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
330
Practical Orchestrator
shlominoach
191
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
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 !