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

Puppeteerを導入してみた話

kobayang
January 25, 2019

 Puppeteerを導入してみた話

Puppeteerを実際に使ってみて良かった点やハマった点について書いてあります。

kobayang

January 25, 2019
Tweet

More Decks by kobayang

Other Decks in Technology

Transcript

  1. ©2018 Wantedly, Inc.
    PuppeteerΛಋೖͯ͠Έͨ࿩
    We Are JavaScripters! #28
    25.Jan.2019 - Naoki Kobayashi

    View Slide

  2. ©2018 Wantedly, Inc.
    Naoki Kobayashi
    GitHub: @kobayang
    Twitter: @kbys_02
    I’m an Engineer @Wantedly
    React / Rails
    React Native࢝Ί·ͨ͠

    View Slide

  3. ©2018 Wantedly, Inc.
    Agenda
    - Puppeteer ͱ͸
    - ͲΜͳͱ͜ΖͰ࢖ΘΕΔ͔
    - ྫ
    - Puppeteer ͷಋೖ
    - ಋೖͨ͠৔ॴ
    - Α͔ͬͨͱ͜ΖɾϋϚͬͨͱ͜Ζ
    - ࡶײ

    View Slide

  4. ©2018 Wantedly, Inc.
    Puppeteer ͱ͸

    View Slide

  5. ©2018 Wantedly, Inc.
    Puppeteer ͱ͸

    View Slide

  6. ©2018 Wantedly, Inc.
    ͲΜͳͱ͜ΖͰ࢖ΘΕΔʁ
    JS
    HTML
    Ϧιʔε ϒϥ΢β͕ղऍ ղऍ݁Ռ
    ΫϥΠΞϯτଆ

    View Slide

  7. ©2018 Wantedly, Inc.
    ͲΜͳͱ͜ΖͰ࢖ΘΕΔʁ
    JS
    HTML
    Ϧιʔε ϒϥ΢β͕ղऍ ղऍ݁Ռ
    αʔόʔଆͰ΋ղऍ݁Ռ͕औΕΔͱศརͳ৔߹͕͋Δ

    View Slide

  8. ©2018 Wantedly, Inc.
    ͲΜͳͱ͜ΖͰ࢖ΘΕΔʁ
    • Generate screenshots and PDFs of pages.
    • Crawl a SPA (Single-Page Application) and 

    generate pre-rendered content (i.e. "SSR").
    • Automate form submission, UI testing, keyboard input, etc.
    • Create an up-to-date, automated testing environment.
    • Capture a timeline trace of your site
    • Test Chrome Extensions.

    View Slide

  9. ©2018 Wantedly, Inc.
    ͲΜͳͱ͜ΖͰ࢖ΘΕΔʁ
    • Generate screenshots and PDFs of pages.
    • Crawl a SPA (Single-Page Application) and 

    generate pre-rendered content (i.e. "SSR").
    • Automate form submission, UI testing, keyboard input, etc.
    • Create an up-to-date, automated testing environment.
    • Capture a timeline trace of your site
    • Test Chrome Extensions.

    View Slide

  10. ©2018 Wantedly, Inc.
    SSR Example
    https://developers.google.com/web/tools/puppeteer/articles/ssr
    import puppeteer from “puppeteer";
    async function ssr(url) {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: "networkidle0" });
    const html = await page.content(); // serialized HTML of page DOM.
    await browser.close();
    return html;
    }

    View Slide

  11. ©2018 Wantedly, Inc.
    Puppeteer ͷಋೖ

    View Slide

  12. ©2018 Wantedly, Inc.
    Ͳ͜Ͱ࢖͔ͬͨʁ
    - OGը૾ͷΧελϚΠθʔγϣϯ
    - ࢦఆͨ͠ը૾ʹ೔෇ͷόονΛ

    ৐ͤͨը૾Λฦ͢
    - WantedlyͰ͸࠷ۙϛʔτΞοϓػ
    ೳΛϦϦʔεͨ͠
    - γΣΞ͞Εͨը૾͕ϛʔτΞοϓ
    Ͱ͋Δ͜ͱΛ෼͔Γ΍͍ͨ͘͢͠

    View Slide

  13. ©2018 Wantedly, Inc.
    Ͳ͜Ͱ࢖͔ͬͨʁ

    View Slide

  14. ©2018 Wantedly, Inc.
    Puppeteer v.s. node-canvas
    - node-canvas ͳΒը૾ΛՃ޻ͯ͠ฦ͢͜ͱ͕Ͱ͖ͦ͏
    - ଞͷࢪࡦͰ͢Ͱʹ࢖༻͞Ε͍ͯͨ (pros)
    - node-canvas༻ͷAPIΛΘ͟Θ֮͑ͯ͟σβΠϯΛ౰ͯΔͷ͸໘౗ͦ͏ (cons)
    - Puppeteer ͩͱ screenshot API Λ࢖͑͹ྑͦ͞͏
    - গ͠ͷPuppeteerͷAPI͚֮ͩ͑Ε͹ྑͦ͞͏ (pros)
    - ελΠϧ͸CSS͕࢖͑ΔͷͰσβΠϯͷมߋʹ΋͙͢ରԠͰ͖ͦ͏ (pros)
    - ଎౓໘ɾ҆ఆੑͷෆ҆ (cons)
    - DockerͰಈ͔͘ෆ҆ (cons)

    View Slide

  15. ©2018 Wantedly, Inc.
    Puppeteer v.s. node-canvas
    - OGը૾͸֤SNSʹΩϟογϡ͞ΕΔ
    - ଎౓΍ΞΫηεͷෛՙʹ͍ͭͯ͸͋·Γߟ͑ͳͯ͘ྑ͍
    - ೔෇෦෼ͷσβΠϯ͕ޙʑมΘΔՄೳੑ͕ߴ͍
    - node-canvasͰॻ͍ͨ΋ͷΛॻ͖׵͑Δͷ͸ίετ
    ࠓճͷέʔε
    Puppeteer Λબ୒

    View Slide

  16. ©2018 Wantedly, Inc.
    ྑ͔ͬͨ͜ͱ
    - htmlΛฦ͢endpointͱɺPuppeteer͔ΒhtmlΛݺΜͰscreenshotΛऔΔendpointΛ࣮૷
    - ೔෇ΛೖΕͨOGը૾Λฦ͢෦෼͸؆୯ʹ࣮૷Ͱ͖ͨ
    - ελΠϧͷ֬ೝ࣌ʹ͸ html Λฦ͢෦෼͚ͩݟΕ͹͍͍ͷͰ֬ೝ͕༰қ
    ϋϚͬͨ͜ͱ
    - DockerͰಈ͔͢ͷ͕গ͠໘౗
    - webfont͕දࣔ͞Εͳ͍৔߹͕͋ͬͨ
    - Puppeteerͷىಈ͕஗͍

    View Slide

  17. ©2018 Wantedly, Inc.
    DockerͰಈ͔͢ͷ͕গ͠໘౗
    - `npm install puppeteer` Ͱ͸ಈ͔ͳ͍
    - Alpine linux Ͱ͸ಈ͔ͤͳ͔ͬͨ
    - https://github.com/GoogleChrome/puppeteer/blob/master/docs/
    troubleshooting.md#running-puppeteer-in-docker 

    ʹৄ͘͠ॻ͍ͯ͋ΔͷͰɺ͜ΕΛࢀߟʹ࣮૷

    View Slide

  18. ©2018 Wantedly, Inc.
    webfont͕දࣔ͞Εͳ͍৔߹͕͋ͬͨ
    - “networkidle0”Λࢦఆ͢Δ͜ͱͰɺωοτϫʔΫ͕খ߁ঢ়ଶʹͳΔ·Ͱ଴ͬͯ͘ΕΔ
    - “networkidle0”Λࢦఆ͢Δͱɺࠓޙ͸ɺӬԕʹ଴ͪଓ͚Δ৔߹͕ى͖ͯ͠·ͬͨ
    - issue΋͋Δ https://github.com/GoogleChrome/puppeteer/issues/1908
    - ݁ہwebfont͸ϩʔΧϧʹೖΕͯ࢖༻͢Δ͜ͱʹͨ͠

    View Slide

  19. ©2018 Wantedly, Inc.
    Puppeteerͷىಈ͕஗͍
    - ৭ΜͳExampleͰ͸ΤϯυϙΠϯτͷ࠷ॳʹ`puppeteer.launch`Λ͍ͯ͠Δ͕ɺ

    `puppeteer.launch` ͰͷPuppeteerͷ্ཱ͕ͪ͛ඇৗʹ஗͍
    - 1ඵҎ্͔͔ͬͯ͠·ͬͨ
    - ͞ΒʹPuppeteerΛ্ཱͪ͛ͨͱ͖ʹɺchromeͷϓϩηε͕Ұ্ཱ͕ͭͪΔͷͰɺ

    ΞΫηε͕૿͑ͨͱ͖ʹෆ҆
    - αʔόʔͷىಈ࣌ʹ `puppeteer.launch` Λ͓͍ͯͯ͠ɺsingleton Ͱ

    puppeteerͷঢ়ଶΛ؅ཧͨ͠
    - Ϩεϙϯε࣌ؒ͸େମ300-1000ms͘Β͍ʹͳͬͨ

    View Slide

  20. ©2018 Wantedly, Inc.
    [NOTE] Ϩεϙϯε࣌ؒ
    - தԝ஋Ͱ550ms΄Ͳ
    - ࣮ࡍʹ͸ΤϯυϙΠϯτͷ಺෦ͰAPIΛୟ͖ʹߦ͍ͬͯΔͷͰɺ

    Puppeteerࣗମͷॲཧ࣌ؒ͸΋͏গ͠୹͍

    View Slide

  21. ©2018 Wantedly, Inc.
    ࡶײ
    - ௐࠪΛ࢝Ί͔ͯΒ3೔ఔ౓Ͱ࣮૷·ͰͰ͖ͨ
    - Puppeteerͷֶशίετ͸௿͍ʢجຊతʹ Example ͱҰॹʣ
    - ϋϚΓϙΠϯτ͸͍͔ͭ͋ͬͨ͘ɻಛʹαʔόʔͰಈ͔͢ͱ͖ɻ
    - ଎౓͸ग़ͳ͍ɻ଎౓͕ඞཁʹͳΔ৔߹͸ΩϟογϡͳͲ޻෉͢Δඞཁ͕͋Δ
    - ࣮૷ͨ͠ޙʹେ͖ͳ໰୊͸ى͖ͳ͔ͬͨ
    Α͍PuppeteerϥΠϑΛʂ

    View Slide