Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

95d12ef3ae39f388be5a43b4788cb70e?s=47 Susisu
April 27, 2019

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

95d12ef3ae39f388be5a43b4788cb70e?s=128

Susisu

April 27, 2019
Tweet

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