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

Transcript

1. 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. 2.

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

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

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

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

   ε Ϋ γ ϣ ࡱ Ө ͷ ྲྀ Ε Λ

   ͓ ͞ Β ͍ ͯ͠ Έ · ͠ ΐ ͏
5. 5.

   ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

   ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

   ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

   ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

   ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

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

    - ࠶࣮ߦͰ͖ͳ͍
13. 13.

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

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

    P u p p e t e e r

15. 15.

    ୈ Ұ ෦ ɹ ׬

16. 16.

    P u p p e t e e r

17. 17.

    P u p p e t e e r -

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

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

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

    @ s u s i s u / a rc

    h e r f i s h
24. 24.

    ୈ ೋ ෦ ɹ ׬

25. 25.

    @ s u s i s u / a rc

    h e r f i s h
26. 26.

    @ s u s i s u / a rc

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

    ϓ ϩ ϑ Ν Πϧ ϓ ϩ ϑ Ν Πϧ

    = ͻ ͱ ͭ ͷ ઃ ఆ
28. 28.

    λ ε Ϋ ϓ ϩ ϑ Ν Πϧ ϓ ϩ

    ϑ Ν Πϧ ʹ ͸ ෳ ਺ ͷ λ ε Ϋ ʢ ε Ϋ Ϧ ϓ τ ʣ ͕ ඥ ͮ ͘
29. 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. 30.

    λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ

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

    λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ

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

    ϓ ϩ ϑ Ν Πϧ b e f o re

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

    j a e n ϓ ϩ ϑ Ν Πϧ j

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

    j a e n ϓ ϩ ϑ Ν Πϧ j

    a e n ࡞ ੒ ͞ Ε ͨ ε Ϋ γ ϣ ͸ α ϒ ϓ ϩ ϑ Ν Πϧ ͝ ͱ ʹ ू ໿
35. 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. 36.

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

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

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