スクリーンショット撮影のために 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. 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. 4.

    ε Ϋ γ ϣ ࡱ Ө ͷ ྲྀ Ε Λ

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

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

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

    P u p p e t e e r -

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

    ϖʔ δ Λ ։ ͘ ը ໘ Λ ฤ ू

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

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

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

    @ s u s i s u / a rc

    h e r f i s h
  19. 25.

    @ s u s i s u / a rc

    h e r f i s h
  20. 26.

    @ s u s i s u / a rc

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

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

    = ͻ ͱ ͭ ͷ ઃ ఆ
  22. 28.

    λ ε Ϋ ϓ ϩ ϑ Ν Πϧ ϓ ϩ

    ϑ Ν Πϧ ʹ ͸ ෳ ਺ ͷ λ ε Ϋ ʢ ε Ϋ Ϧ ϓ τ ʣ ͕ ඥ ͮ ͘
  23. 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(); }; λ ε Ϋ ͷ ྫ
  24. 30.

    λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ

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

    λ ε Ϋ ε Ϋ γ ϣ ϓ ϩ ϑ

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

    ϓ ϩ ϑ Ν Πϧ b e f o re

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

    j a e n ϓ ϩ ϑ Ν Πϧ j

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

    j a e n ϓ ϩ ϑ Ν Πϧ j

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

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

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