Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Puppeteerによる優しいウェブサイトクロール
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Osamu Nagayama
December 03, 2019
Programming
56
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
170
呼吸瞑想のススメ
naga3
1
120
Scrapyドキュメント翻訳活動について
naga3
1
150
Other Decks in Programming
See All in Programming
KiroのSpecで「五目並べ」を作ってみる
satoshi256kbyte
1
360
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
myus4a
0
390
re:Inventに行く前に知っておきたい現地参加のノウハウ
nokomoro3
0
380
パーソナライズPodcastを作った話
repunit11
0
120
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
dske104
0
160
大喜利で理解するLLM as a Judge / Understanding LLM-as-a-Judge through Ogiri
rockname
0
190
モジュールの視点からSwiftを読み解く #iosdc
s_shimotori
0
350
IBM Bob Dojo #1 仕様駆動開発入門
oniak3ibm
PRO
0
350
The Rails Doctrine Decade
koic
2
510
Agents on Rails - Rails at Scale 2026
irinanazarova
0
340
iOS 27でニュースアプリはどう変わる!? 〜日経電子版の新機能対応と、開発事例から〜
lynnswap
7
13k
Workers Cache を知る
syumai
0
340
Featured
See All Featured
Chasing Engaging Ingredients in Design
codingconduct
0
340
Designing for humans not robots
tammielis
254
26k
A better future with KSS
kneath
240
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
7k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
58k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Tell your own story through comics
letsgokoyo
1
1.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
35
2.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
3
1.3k
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 !