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

Transcript

1. ε Ϋ Ϧ ʔϯ γ ϣ ο τ ࡱ Ө

   ͷ ͨ Ί ʹ 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

2. Θ ͨ ͠Ͱ ͢ - id:susisu - GitHub: susisu -

   ͸ͯͳ ΞϓϦέʔγϣϯΤϯδχΞ - Mackerel

3. લ ճ ͷ ͋ Β͢ ͡ - Web ΞϓϦέʔγϣϯͷϔϧϓυΩϡϝϯτ -

   εΫϦʔϯγϣοτࡱӨ - ͭΒ͍

4. ε Ϋ γ ϣ ࡱ Ө ͷ ྲྀ Ε Λ

   ͓ ͞ Β ͍ ͯ͠ Έ · ͠ ΐ ͏

5. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

6. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

7. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

8. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

9. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

10. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

11. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

    ͢ Δ ε Ϋ γ ϣ ࡱ Δ ը ૾ Λ Ճ ޻ ͢ Δ × N - ଟ ݴ ޠ ର Ԡ - ߋ ৽ ͢ Δ ͨ ͼ

12. ໰ ୊ ఺ ͸ Կ ͔ - ࡞ۀ಺༰͕୯७ - ͕͔͔࣌ؒΔ

    - ࠶࣮ߦͰ͖ͳ͍

13. ໰ ୊ ఺ ͸ Կ ͔ - ࡞ۀ಺༰͕୯७ - ͕͔͔࣌ؒΔ

    - ࠶࣮ߦͰ͖ͳ͍ ػ ց ʹ ೚ ͤ ͨ ͍

14. P u p p e t e e r

15. ୈ Ұ ෦ ɹ ׬

16. P u p p e t e e r

17. P u p p e t e e r -

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

18. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

19. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

20. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

21. ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

22. ϑ Ϩ ʔϜϫ ʔ Ϋ ͷ ඞ ཁ ੑ -

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

23. @ s u s i s u / a rc

    h e r f i s h

24. ୈ ೋ ෦ ɹ ׬

25. @ s u s i s u / a rc

    h e r f i s h

26. @ s u s i s u / a rc

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

27. ϓ ϩ ϑ Ν Πϧ ϓ ϩ ϑ Ν Πϧ

    = ͻ ͱ ͭ ͷ ઃ ఆ

28. λ ε Ϋ ϓ ϩ ϑ Ν Πϧ ϓ ϩ

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

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

30. λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ

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

31. λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ

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

32. ϓ ϩ ϑ Ν Πϧ b e f o re

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

33. j a e n ϓ ϩ ϑ Ν Πϧ j

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

34. j a e n ϓ ϩ ϑ Ν Πϧ j

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

35. ࣮ ࡍ ʹ΍ ͬͯ Έ ͨ - 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

36. · ͱ Ί - Puppeteer Λ࢖ͬͯεΫγϣΛࡱΔͨΊͷϑϨʔϜϫʔΫ / CLI Λ࡞Γ·ͨ͠ -

    https://github.com/susisu/archerfish - λεΫ΍࡞੒͞ΕͨεΫγϣͷҰݩ؅ཧ͕Ͱ͖·͢ - ࠷ॳʹϩάΠϯ͢Δɺͱ͍ͬͨ͜ͱ΋Ͱ͖·͢ - ࣮͸ڞ௨ͷॲཧΛϥΠϒϥϦԽ͓ͯ͘͜͠ͱ΋Ͱ͖·͢

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