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
820
スクリーンショット撮影のために Puppeteer を操る / Kyoto.js 16
https://kyotojs.connpass.com/event/124671/
Susisu
April 27, 2019
Tweet
Share
More Decks by Susisu
See All by Susisu
null or undefined
susisu
25
7.1k
Mackerel のフロントエンドフレームワーク移行 序章 / Hatena Engineer Seminar #13
susisu
0
2k
BuckleScript 使ってみた
susisu
0
300
Atom パッケージ開発のすゝめ
susisu
1
2.1k
5分でわかる Curry–Howard 同型対応
susisu
0
940
ジェネレータを有効活用し隊 / Kyoto.js 11 LT
susisu
2
2.1k
遅延評価と健康
susisu
0
590
楽しく学ぶ難解プログラミング言語
susisu
0
770
多分これが一番早いと思います
susisu
0
410
Other Decks in Programming
See All in Programming
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
880
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
200
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
160
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
790
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
1.1k
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
360
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
130
Go の GC の不得意な部分を克服したい
taiyow
3
960
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
210
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
320
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1.1k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
410
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
41
7.2k
4 Signs Your Business is Dying
shpigford
182
21k
Why Our Code Smells
bkeepers
PRO
335
57k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
How to train your dragon (web standard)
notwaldorf
88
5.8k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Rails Girls Zürich Keynote
gr2m
94
13k
It's Worth the Effort
3n
183
28k
Automating Front-end Workflow
addyosmani
1366
200k
The World Runs on Bad Software
bkeepers
PRO
66
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 - λεΫ࡞͞ΕͨεΫγϣͷҰݩཧ͕Ͱ͖·͢ - ࠷ॳʹϩάΠϯ͢Δɺͱ͍ͬͨ͜ͱͰ͖·͢ - ࣮ڞ௨ͷॲཧΛϥΠϒϥϦԽ͓ͯ͘͜͠ͱͰ͖·͢
՝ ɾ ເ - εΫϦϓτΛ࠷৽ʹอͪଓ͚Δίετ݁ߏߴ͍ - ը૾Λ৴͢Δͷ·ͨผͷ - ࣗಈͰఆظతʹ࣮ߦɾ࠷৽ͷը૾Λ৴͢Δϑϩʔͷߏங