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
54
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
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
seike460
PRO
1
450
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
yusuga
1
540
The Rails Doctrine Decade
koic
2
340
一人だけ、Kiroが静止する日
hideg
0
130
Kiroで創り、AgentCoreで繋ぐ!AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
licux
4
750
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
bash0c7
0
440
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
rkaga
5
4.3k
SONY CISC-NEWS NWS-1750 + NWB-225 フレームバッファの NetBSD/news68k ドライバ実装 / OSC2026Hiroshima
tsutsui
0
140
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
atsuki_seo
0
910
What We Talk About When We Talk About XP
m_seki
2
680
Building an Out-of-Order CPU
latte72
1
800
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
palkan
0
160
Featured
See All Featured
Code Review Best Practice
trishagee
74
20k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.4k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
530
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
700
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.6k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
480
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
540
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
340
Fashionably flexible responsive web design (full day workshop)
malarkey
409
67k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
680
Producing Creativity
orderedlist
PRO
348
41k
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 !