スクリーンショット撮影のために Puppeteer を操る / Kyoto.js 16

by Susisu

Slide 1

Slide 1 text

ε Ϋ Ϧ ʔϯ γ ϣ ο τ ࡱ Ө ͷ ͨ Ί ʹ 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

Slide 2

Slide 2 text

Θ ͨ ͠Ͱ ͢ - id:susisu - GitHub: susisu - ͸ͯͳ ΞϓϦέʔγϣϯΤϯδχΞ - Mackerel

Slide 3

Slide 3 text

લ ճ ͷ ͋ Β͢ ͡ - Web ΞϓϦέʔγϣϯͷϔϧϓυΩϡϝϯτ - εΫϦʔϯγϣοτࡱӨ - ͭΒ͍

Slide 4

Slide 4 text

ε Ϋ γ ϣ ࡱ Ө ͷ ྲྀ Ε Λ ͓ ͞ Β ͍ ͯ͠ Έ · ͠ ΐ ͏

Slide 5

Slide 5 text

ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू ͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ޻ ͢ Δ - ϩ άΠ ϯ - ໨ త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ - ը ૾ ͱ ͯ͠ͷ ฤ ू ɾ ߹ ੒ - ݟ ͑ͯ ͸ ͍ ͚ ͳ ͍ ΋ ͷ Λ Ӆ ͢

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू ͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ޻ ͢ Δ × N - ଟ ݴ ޠ ର Ԡ - ߋ ৽ ͢ Δ ͨ ͼ

Slide 12

Slide 12 text

໰ ୊ ఺ ͸ Կ ͔ - ࡞ۀ಺༰͕୯७ - ͕͔͔࣌ؒΔ - ࠶࣮ߦͰ͖ͳ͍

Slide 13

Slide 13 text

໰ ୊ ఺ ͸ Կ ͔ - ࡞ۀ಺༰͕୯७ - ͕͔͔࣌ؒΔ - ࠶࣮ߦͰ͖ͳ͍ ػ ց ʹ ೚ ͤ ͨ ͍

Slide 14

Slide 14 text

P u p p e t e e r

Slide 15

Slide 15 text

ୈ Ұ ෦ ɹ ׬

Slide 16

Slide 16 text

P u p p e t e e r

Slide 17

Slide 17 text

P u p p e t e e r - https://github.com/GoogleChrome/puppeteer - Chromium Λ Node.js ͔Βૢ࡞͢ΔΠϯλʔϑΣʔε - ཁૉͷฤू΍εΫϦʔϯγϣοτͷࡱӨͳͲ΋ߦ͑Δ

Slide 18

Slide 18 text

ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू ͢ Δ ε Ϋ γ ϣ ࡱ Δ - ϩ άΠ ϯ - ໨ త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ ͜ ͜ · Ͱ Λ ࣗ ಈ Խ Ͱ ͖ Δ A P I Λ ఏ ڙ

Slide 19

Slide 19 text

ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू ͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ޻ ͢ Δ - ը ໘ ฤ ू ͷ ஈ ֊ Ͱ ؤ ு Δ - ͦ ΋ ͦ ΋ ඞ ཁ ͳ ͍ ͜ ͱ ΋ ଟ ͍

Slide 20

Slide 20 text

ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू ͢ Δ ε Ϋ γ ϣ ࡱ Δ - ϩ άΠ ϯ - ໨ త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ ΍ ͬͯ ͍ ͖ · ͠ ΐ ͏

Slide 21

Slide 21 text

ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू ͢ Δ ε Ϋ γ ϣ ࡱ Δ - ϩ άΠ ϯ - ໨ త ͷ ϖʔ δ ʹ Ҡ ಈ - ς Ωε τ ͳ Ͳ Λ ೖ ྗ - ։ ൃ ऀ π ʔϧ ͔ Β ཁ ૉ Λ ฤ ू - τ Ϧ ϛ ϯ ά - ը ૾ Λ อ ଘ ɾ ϑ Ν Πϧ Ҡ ಈ ຊ ౰ ʹ ʁ

Slide 22

Slide 22 text

ϑ Ϩ ʔϜϫ ʔ Ϋ ͷ ඞ ཁ ੑ - Puppeteer ͸͋͘·Ͱ௿Ϩϕϧͷ API - ߴϨϕϧͷϧʔϧ͸෇ଐ͠ͳ͍ - ෳ਺͋ΔεΫϦϓτΛͲ͏࣮ߦ͢Δ͔ - Ͳ͜ʹը૾Λอଘ͢Δ͔ - ͳΜΒ͔ͷ࿮૊Έ͕ͳ͍ͱѻ͍ͮΒ͍

Slide 23

Slide 23 text

@ s u s i s u / a rc h e r f i s h

Slide 24

Slide 24 text

ୈ ೋ ෦ ɹ ׬

Slide 25

Slide 25 text

@ s u s i s u / a rc h e r f i s h

Slide 26

Slide 26 text

@ s u s i s u / a rc h e r f i s h - Puppeteer Λ࢖ͬͨεΫγϣࡱӨͷͨΊͷϑϨʔϜϫʔΫ / CLI Λ࡞Γ·ͨ͠ - https://github.com/susisu/archerfish

Slide 27

Slide 27 text

ϓ ϩ ϑ Ν Πϧ ϓ ϩ ϑ Ν Πϧ = ͻ ͱ ͭ ͷ ઃ ఆ

Slide 28

Slide 28 text

λ ε Ϋ ϓ ϩ ϑ Ν Πϧ ϓ ϩ ϑ Ν Πϧ ʹ ͸ ෳ ਺ ͷ λ ε Ϋ ʢ ε Ϋ Ϧ ϓ τ ʣ ͕ ඥ ͮ ͘

Slide 29

Slide 29 text

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(); }; λ ε Ϋ ͷ ྫ

Slide 30

Slide 30 text

λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ Ν Πϧ λ ε Ϋ Λ ࣮ ߦ ͢ Δ ͱ ε Ϋ γ ϣ ͕ ࡞ ੒ ͞ Ε Δ

Slide 31

Slide 31 text

λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ Ν Πϧ ࡞ ੒ ͞ Ε ͨ ε Ϋ γ ϣ ͸ ϓ ϩ ϑ Ν Πϧ ͝ ͱ ʹ ू ໿

Slide 32

Slide 32 text

ϓ ϩ ϑ Ν Πϧ b e f o re A l l a f t e r A l l ϩ άΠ ϯ ɾ ޙ ย ෇ ͚ ͳ Ͳ ͸ ϓ ϩ ϑ Ν Πϧ ʹ ඥ ෇ ͍ ͨ ϑ ο Ϋ ε Ϋ Ϧ ϓ τ Ͱ ߦ ͏

Slide 33

Slide 33 text

j a e n ϓ ϩ ϑ Ν Πϧ j a e n ϓ ϩ ϑ Ν Πϧ ͸ ઃ ఆ ͷ ҟ ͳ Δ ෳ ਺ ͷ α ϒ ϓ ϩ ϑ Ν Πϧ Λ ࣋ ͯ Δ λ ε Ϋ ͷ Έ Λ ڞ ༗

Slide 34

Slide 34 text

j a e n ϓ ϩ ϑ Ν Πϧ j a e n ࡞ ੒ ͞ Ε ͨ ε Ϋ γ ϣ ͸ α ϒ ϓ ϩ ϑ Ν Πϧ ͝ ͱ ʹ ू ໿

Slide 35

Slide 35 text

࣮ ࡍ ʹ΍ ͬͯ Έ ͨ - 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

Slide 36

Slide 36 text

· ͱ Ί - Puppeteer Λ࢖ͬͯεΫγϣΛࡱΔͨΊͷϑϨʔϜϫʔΫ / CLI Λ࡞Γ·ͨ͠ - https://github.com/susisu/archerfish - λεΫ΍࡞੒͞ΕͨεΫγϣͷҰݩ؅ཧ͕Ͱ͖·͢ - ࠷ॳʹϩάΠϯ͢Δɺͱ͍ͬͨ͜ͱ΋Ͱ͖·͢ - ࣮͸ڞ௨ͷॲཧΛϥΠϒϥϦԽ͓ͯ͘͜͠ͱ΋Ͱ͖·͢

Slide 37

Slide 37 text

՝ ୊ ɾ ເ - εΫϦϓτΛ࠷৽ʹอͪଓ͚Δίετ΋݁ߏߴ͍ - ը૾Λ഑৴͢Δͷ͸·ͨผͷ໰୊ - ࣗಈͰఆظతʹ࣮ߦɾ࠷৽ͷը૾Λ഑৴͢Δϑϩʔͷߏங