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 を操る / Kyoto.js 16
Search
Susisu
April 27, 2019
Programming
0
900
スクリーンショット撮影のために Puppeteer を操る / Kyoto.js 16
https://kyotojs.connpass.com/event/124671/
Susisu
April 27, 2019
Tweet
Share
More Decks by Susisu
See All by Susisu
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
2
480
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
18
14k
null or undefined
susisu
25
7.6k
Mackerel のフロントエンドフレームワーク移行 序章 / Hatena Engineer Seminar #13
susisu
0
2.1k
BuckleScript 使ってみた
susisu
0
350
Atom パッケージ開発のすゝめ
susisu
1
2.2k
5分でわかる Curry–Howard 同型対応
susisu
0
1k
ジェネレータを有効活用し隊 / Kyoto.js 11 LT
susisu
2
2.2k
遅延評価と健康
susisu
0
620
Other Decks in Programming
See All in Programming
新世界の理解
koriym
0
140
TDD 実践ミニトーク
contour_gara
0
140
バイブコーディング × 設計思考
nogu66
0
130
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
650
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
140
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
260
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
160
🔨 小さなビルドシステムを作る
momeemt
1
390
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
680
AWS Serverless Application Model入門_20250708
smatsuzaki
0
120
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
730
MLH State of the League: 2026 Season
theycallmeswift
0
160
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Agile that works and the tools we love
rasmusluckow
329
21k
The Invisible Side of Design
smashingmag
301
51k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
ε Ϋ Ϧ ʔϯ γ ϣ ο τ ࡱ Ө
ͷ ͨ Ί ʹ P u p p e t e e r Λ ૢ Δ 2 0 1 9 - 0 4 - 2 7 K y o t o . j s 1 6 i d : s u s i s u
Θ ͨ ͠Ͱ ͢ - id:susisu - GitHub: susisu -
ͯͳ ΞϓϦέʔγϣϯΤϯδχΞ - Mackerel
લ ճ ͷ ͋ Β͢ ͡ - Web ΞϓϦέʔγϣϯͷϔϧϓυΩϡϝϯτ -
εΫϦʔϯγϣοτࡱӨ - ͭΒ͍
ε Ϋ γ ϣ ࡱ Ө ͷ ྲྀ Ε Λ
͓ ͞ Β ͍ ͯ͠ Έ · ͠ ΐ ͏
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ͢ Δ - ϩ άΠ ϯ - త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ - ը ૾ ͱ ͯ͠ͷ ฤ ू ɾ ߹ - ݟ ͑ͯ ͍ ͚ ͳ ͍ ͷ Λ Ӆ ͢
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ͢ Δ - ϩ άΠ ϯ - త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ - ը ૾ ͱ ͯ͠ͷ ฤ ू ɾ ߹ - ݟ ͑ͯ ͍ ͚ ͳ ͍ ͷ Λ Ӆ ͢
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ͢ Δ - ϩ άΠ ϯ - త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ - ը ૾ ͱ ͯ͠ͷ ฤ ू ɾ ߹ - ݟ ͑ͯ ͍ ͚ ͳ ͍ ͷ Λ Ӆ ͢
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ͢ Δ - ϩ άΠ ϯ - త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ - ը ૾ ͱ ͯ͠ͷ ฤ ू ɾ ߹ - ݟ ͑ͯ ͍ ͚ ͳ ͍ ͷ Λ Ӆ ͢
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ͢ Δ - ϩ άΠ ϯ - త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ - ը ૾ ͱ ͯ͠ͷ ฤ ू ɾ ߹ - ݟ ͑ͯ ͍ ͚ ͳ ͍ ͷ Λ Ӆ ͢
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ͢ Δ - ϩ άΠ ϯ - త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ - ը ૾ ͱ ͯ͠ͷ ฤ ू ɾ ߹ - ݟ ͑ͯ ͍ ͚ ͳ ͍ ͷ Λ Ӆ ͢
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ͢ Δ × N - ଟ ݴ ޠ ର Ԡ - ߋ ৽ ͢ Δ ͨ ͼ
Կ ͔ - ࡞ۀ༰͕୯७ - ͕͔͔࣌ؒΔ
- ࠶࣮ߦͰ͖ͳ͍
Կ ͔ - ࡞ۀ༰͕୯७ - ͕͔͔࣌ؒΔ
- ࠶࣮ߦͰ͖ͳ͍ ػ ց ʹ ͤ ͨ ͍
P u p p e t e e r
ୈ Ұ ෦ ɹ
P u p p e t e e r
P u p p e t e e r -
https://github.com/GoogleChrome/puppeteer - Chromium Λ Node.js ͔Βૢ࡞͢ΔΠϯλʔϑΣʔε - ཁૉͷฤूεΫϦʔϯγϣοτͷࡱӨͳͲߦ͑Δ
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ - ϩ άΠ ϯ - త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ ͜ ͜ · Ͱ Λ ࣗ ಈ Խ Ͱ ͖ Δ A P I Λ ఏ ڙ
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ͢ Δ - ը ໘ ฤ ू ͷ ஈ ֊ Ͱ ؤ ு Δ - ͦ ͦ ඞ ཁ ͳ ͍ ͜ ͱ ଟ ͍
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ - ϩ άΠ ϯ - త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ ͬͯ ͍ ͖ · ͠ ΐ ͏
ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू
͢ Δ ε Ϋ γ ϣ ࡱ Δ - ϩ άΠ ϯ - త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ ຊ ʹ ʁ
ϑ Ϩ ʔϜϫ ʔ Ϋ ͷ ඞ ཁ ੑ -
Puppeteer ͋͘·ͰϨϕϧͷ API - ߴϨϕϧͷϧʔϧଐ͠ͳ͍ - ෳ͋ΔεΫϦϓτΛͲ͏࣮ߦ͢Δ͔ - Ͳ͜ʹը૾Λอଘ͢Δ͔ - ͳΜΒ͔ͷΈ͕ͳ͍ͱѻ͍ͮΒ͍
@ s u s i s u / a rc
h e r f i s h
ୈ ೋ ෦ ɹ
@ s u s i s u / a rc
h e r f i s h
@ s u s i s u / a rc
h e r f i s h - Puppeteer ΛͬͨεΫγϣࡱӨͷͨΊͷϑϨʔϜϫʔΫ / CLI Λ࡞Γ·ͨ͠ - https://github.com/susisu/archerfish
ϓ ϩ ϑ Ν Πϧ ϓ ϩ ϑ Ν Πϧ
= ͻ ͱ ͭ ͷ ઃ ఆ
λ ε Ϋ ϓ ϩ ϑ Ν Πϧ ϓ ϩ
ϑ Ν Πϧ ʹ ෳ ͷ λ ε Ϋ ʢ ε Ϋ Ϧ ϓ τ ʣ ͕ ඥ ͮ ͘
module.exports = async ({ browser, screenshot }) => { const
page = await browser.newPage(); await page.setViewport({ width : 1280, height : 720, deviceScaleFactor: 2, }); await page.goto("https://mackerel.io"); await screenshot(page, "page"); await page.close(); }; λ ε Ϋ ͷ ྫ
λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ
Ν Πϧ λ ε Ϋ Λ ࣮ ߦ ͢ Δ ͱ ε Ϋ γ ϣ ͕ ࡞ ͞ Ε Δ
λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ
Ν Πϧ ࡞ ͞ Ε ͨ ε Ϋ γ ϣ ϓ ϩ ϑ Ν Πϧ ͝ ͱ ʹ ू
ϓ ϩ ϑ Ν Πϧ b e f o re
A l l a f t e r A l l ϩ άΠ ϯ ɾ ޙ ย ͚ ͳ Ͳ ϓ ϩ ϑ Ν Πϧ ʹ ඥ ͍ ͨ ϑ ο Ϋ ε Ϋ Ϧ ϓ τ Ͱ ߦ ͏
j a e n ϓ ϩ ϑ Ν Πϧ j
a e n ϓ ϩ ϑ Ν Πϧ ઃ ఆ ͷ ҟ ͳ Δ ෳ ͷ α ϒ ϓ ϩ ϑ Ν Πϧ Λ ࣋ ͯ Δ λ ε Ϋ ͷ Έ Λ ڞ ༗
j a e n ϓ ϩ ϑ Ν Πϧ j
a e n ࡞ ͞ Ε ͨ ε Ϋ γ ϣ α ϒ ϓ ϩ ϑ Ν Πϧ ͝ ͱ ʹ ू
࣮ ࡍ ʹ ͬͯ Έ ͨ - Mackerel ͷυΩϡϝϯτͷը૾ͷҰ෦Λ͜ΕΛͬͯ࡞ ͍ͯ͠·͢ʢ·࣮ͩݧஈ֊ʣ
h t t p s : / / m a c k e re l . i o / j a / d o c s / e n t r y / h o w t o / c re a t e - s e r v i c e s - a n d - ro l e s h t t p s : / / m a c k e re l . i o / d o c s / e n t r y / h o w t o / c re a t e - s e r v i c e s - a n d - ro l e s
· ͱ Ί - Puppeteer ΛͬͯεΫγϣΛࡱΔͨΊͷϑϨʔϜϫʔΫ / CLI Λ࡞Γ·ͨ͠ -
https://github.com/susisu/archerfish - λεΫ࡞͞ΕͨεΫγϣͷҰݩཧ͕Ͱ͖·͢ - ࠷ॳʹϩάΠϯ͢Δɺͱ͍ͬͨ͜ͱͰ͖·͢ - ࣮ڞ௨ͷॲཧΛϥΠϒϥϦԽ͓ͯ͘͜͠ͱͰ͖·͢
՝ ɾ ເ - εΫϦϓτΛ࠷৽ʹอͪଓ͚Δίετ݁ߏߴ͍ - ը૾Λ৴͢Δͷ·ͨผͷ - ࣗಈͰఆظతʹ࣮ߦɾ࠷৽ͷը૾Λ৴͢Δϑϩʔͷߏங