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

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

Susisu
April 27, 2019

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

Susisu

April 27, 2019
Tweet

More Decks by Susisu

Other Decks in Programming

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. ε Ϋ γ ϣ ࡱ Ө ͷ ྲྀ Ε Λ
    ͓ ͞ Β ͍ ͯ͠ Έ · ͠ ΐ ͏

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. P u p p e t e e r

    View full-size slide

  15. ୈ Ұ ෦ ɹ ׬

    View full-size slide

  16. P u p p e t e e r

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. ୈ ೋ ෦ ɹ ׬

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide