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

https://kyotojs.connpass.com/event/124671/

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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. P u p p e t e e r
    

    View Slide

15. ୈ Ұ ෦ ɹ ׬
    

    View Slide

16. P u p p e t e e r
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. ୈ ೋ ෦ ɹ ׬
    

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide