Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
180
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
160
AI時代もSEOを頑張っている話
shirahama_x
0
230
AIコーディングエージェント(skywork)
kondai24
0
120
新卒エンジニアのプルリクエスト with AI駆動
fukunaga2025
0
160
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
5
19k
How Software Deployment tools have changed in the past 20 years
geshan
0
28k
Microservices Platforms: When Team Topologies Meets Microservices Patterns
cer
PRO
1
930
CSC305 Lecture 15
javiergs
PRO
0
250
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
270
なあ兄弟、 余白の意味を考えてから UI実装してくれ!
ktcryomm
10
11k
connect-python: convenient protobuf RPC for Python
anuraaga
0
360
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Why You Should Never Use an ORM
jnunemaker
PRO
60
9.6k
Visualization
eitanlees
150
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Thoughts on Productivity
jonyablonski
73
5k
Being A Developer After 40
akosma
91
590k
Site-Speed That Sticks
csswizardry
13
990
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Speed Design
sergeychernyshev
33
1.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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 !