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
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
780
チームのテスト力を鍛える
goyoki
3
930
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
AIでLINEスタンプを作ってみた
eycjur
1
230
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
速いWebフレームワークを作る
yusukebe
5
1.7k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
為你自己學 Python - 冷知識篇
eddie
1
350
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Review Best Practice
trishagee
71
19k
A designer walks into a library…
pauljervisheath
207
24k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
It's Worth the Effort
3n
187
28k
How to Ace a Technical Interview
jacobian
279
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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 !