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
890
スクリーンショット撮影のために Puppeteer を操る / Kyoto.js 16
https://kyotojs.connpass.com/event/124671/
Susisu
April 27, 2019
Tweet
Share
More Decks by Susisu
See All by Susisu
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
18
14k
null or undefined
susisu
25
7.5k
Mackerel のフロントエンドフレームワーク移行 序章 / Hatena Engineer Seminar #13
susisu
0
2.1k
BuckleScript 使ってみた
susisu
0
340
Atom パッケージ開発のすゝめ
susisu
1
2.2k
5分でわかる Curry–Howard 同型対応
susisu
0
1k
ジェネレータを有効活用し隊 / Kyoto.js 11 LT
susisu
2
2.2k
遅延評価と健康
susisu
0
620
楽しく学ぶ難解プログラミング言語
susisu
0
840
Other Decks in Programming
See All in Programming
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
110
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
780
テスト環境にCDを導入してみた
yasaigaoisi
0
100
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
190
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
Caude codeで爆速開発
codelynx
0
100
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
220
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.3k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Faster Mobile Websites
deanohume
308
31k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Visualization
eitanlees
146
16k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Into the Great Unknown - MozCon
thekraken
40
1.9k
A better future with KSS
kneath
238
17k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Git: the NoSQL Database
bkeepers
PRO
431
65k
How GitHub (no longer) Works
holman
314
140k
Practical Orchestrator
shlominoach
189
11k
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 - λεΫ࡞͞ΕͨεΫγϣͷҰݩཧ͕Ͱ͖·͢ - ࠷ॳʹϩάΠϯ͢Δɺͱ͍ͬͨ͜ͱͰ͖·͢ - ࣮ڞ௨ͷॲཧΛϥΠϒϥϦԽ͓ͯ͘͜͠ͱͰ͖·͢
՝ ɾ ເ - εΫϦϓτΛ࠷৽ʹอͪଓ͚Δίετ݁ߏߴ͍ - ը૾Λ৴͢Δͷ·ͨผͷ - ࣗಈͰఆظతʹ࣮ߦɾ࠷৽ͷը૾Λ৴͢Δϑϩʔͷߏங