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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Osamu Nagayama
December 03, 2019
Programming
47
0
Share
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
130
Other Decks in Programming
See All in Programming
TypeSpec で繋ぐ複数プロダクトの型安全
maroon8021
1
210
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
hollycummins
0
140
SkillsをS3 Filesに置く時のあれこれ
watany
4
1.7k
実践ハーネスエンジニアリング:ステアリングループを実例から読み解く / Practical Harness Engineering: Understanding Steering Loops Through Real-World Examples
nrslib
6
6.2k
How We Practice Exploratory Testing in Iterative Development( #scrumniigata ) / 反復開発の中で、探索的テストをどう実施しているか
teyamagu
PRO
3
1.1k
TSKaigi2026-静的解析への投資がAI時代のコード品質を支える ── カスタムESLintルールの設計と運用
hayatokudou
5
1k
20260514_its_the_context_window_stupid.pdf
heita
0
1.1k
関係性から理解する"同一性"の型用語たち
pvcresin
2
490
Skillは並べた。動かなかった。契約で繋いだ。— 65個のSkillから、自走する開発サイクルへ
junholee
0
700
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
pyama86
2
1.5k
次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解
ytakahashii
1
910
oxlintはeslint/typescript-eslintを置き換えられるのか
shomafujita
2
180
Featured
See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
560
Utilizing Notion as your number one productivity tool
mfonobong
4
300
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.7k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
530
Ethics towards AI in product and experience design
skipperchong
2
280
The agentic SEO stack - context over prompts
schlessera
0
780
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
120
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
380
30 Presentation Tips
portentint
PRO
1
300
The Mindset for Success: Future Career Progression
greggifford
PRO
0
340
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 !