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
800
スクリーンショット撮影のために 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
6.9k
Mackerel のフロントエンドフレームワーク移行 序章 / Hatena Engineer Seminar #13
susisu
0
2k
BuckleScript 使ってみた
susisu
0
290
Atom パッケージ開発のすゝめ
susisu
1
2.1k
5分でわかる Curry–Howard 同型対応
susisu
0
910
ジェネレータを有効活用し隊 / Kyoto.js 11 LT
susisu
2
2.1k
遅延評価と健康
susisu
0
580
楽しく学ぶ難解プログラミング言語
susisu
0
740
多分これが一番早いと思います
susisu
0
400
Other Decks in Programming
See All in Programming
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
880
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
C++でシェーダを書く
fadis
6
4.1k
CSC509 Lecture 13
javiergs
PRO
0
110
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
GitHub's CSS Performance
jonrohan
1030
460k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Designing for humans not robots
tammielis
250
25k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Become a Pro
speakerdeck
PRO
25
5k
Navigating Team Friction
lara
183
14k
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 - λεΫ࡞͞ΕͨεΫγϣͷҰݩཧ͕Ͱ͖·͢ - ࠷ॳʹϩάΠϯ͢Δɺͱ͍ͬͨ͜ͱͰ͖·͢ - ࣮ڞ௨ͷॲཧΛϥΠϒϥϦԽ͓ͯ͘͜͠ͱͰ͖·͢
՝ ɾ ເ - εΫϦϓτΛ࠷৽ʹอͪଓ͚Δίετ݁ߏߴ͍ - ը૾Λ৴͢Δͷ·ͨผͷ - ࣗಈͰఆظతʹ࣮ߦɾ࠷৽ͷը૾Λ৴͢Δϑϩʔͷߏங