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
7
2.3k
君だけのオリジナル 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
1.1k
ジェネレータを有効活用し隊 / Kyoto.js 11 LT
susisu
2
2.2k
遅延評価と健康
susisu
0
630
Other Decks in Programming
See All in Programming
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
私の後悔をAWS DMSで解決した話
hiramax
4
210
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
為你自己學 Python - 冷知識篇
eddie
1
350
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Swift Updates - Learn Languages 2025
koher
2
510
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
740
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Speed Design
sergeychernyshev
32
1.1k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Code Reviewing Like a Champion
maltzj
525
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
The World Runs on Bad Software
bkeepers
PRO
70
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
BBQ
matthewcrist
89
9.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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 - λεΫ࡞͞ΕͨεΫγϣͷҰݩཧ͕Ͱ͖·͢ - ࠷ॳʹϩάΠϯ͢Δɺͱ͍ͬͨ͜ͱͰ͖·͢ - ࣮ڞ௨ͷॲཧΛϥΠϒϥϦԽ͓ͯ͘͜͠ͱͰ͖·͢
՝ ɾ ເ - εΫϦϓτΛ࠷৽ʹอͪଓ͚Δίετ݁ߏߴ͍ - ը૾Λ৴͢Δͷ·ͨผͷ - ࣗಈͰఆظతʹ࣮ߦɾ࠷৽ͷը૾Λ৴͢Δϑϩʔͷߏங