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

俺が最初にヘッドレスChromeでクローラ作った 事になんねーかな

yujiosaka
February 22, 2018
1k

俺が最初にヘッドレスChromeでクローラ作った 事になんねーかな

yujiosaka

February 22, 2018
Tweet

Transcript

  1. Yuji Isobe
    Զ͕࠷ॳʹϔουϨε
    ChromeͰΫϩʔϥ࡞ͬͨ
    ࣄʹͳΜͶʔ͔ͳ
    NodeֶԂ29࣌ݶ໨

    View full-size slide

  2. min
    e
    ϓϩδΣΫτϚωʔδϟʔ at


    @yujiosaka
    https://speakerdeck.com/yujiosaka/hitasurale-sitedeipuraningu

    View full-size slide

  3. ✓ Կނ͍·͞ΒΫϩʔϥͳͷ͔
    ✓ ԿΛ໨ࢦͯ͠࡞͔ͬͨ
    ✓ ԿΛߟ͑ͳ͕Β࡞͔ͬͨ
    ✓ ͜Ε͔ΒͷΫϩʔϥ
    ࠓճ͸ΫϩʔϥΛ࡞ͬͨ࿩

    View full-size slide

  4. ڈ೥͸৭Μͳ͜ͱΛ΍ͬͨ…

    View full-size slide

  5. ECZine࿈ࡌ
    http://eczine.jp/article/detail/4869

    View full-size slide

  6. ECઐ໳ՈσϏϡʔ
    http://amzn.asia/aOkwFjH

    View full-size slide

  7. ࠔͬͨ(´ɾωɾʆ)

    View full-size slide

  8. ձࣾͰΤϯδχΞͩͱ

    ࢥΘΕͳ͘ͳ͖ͬͯͨorz

    View full-size slide

  9. ݸࣾຖʹνϡʔχϯάΛߦ͏
    Ӧۀಉߦʹग़͔͚Δ
    ৽نϓϩμΫτͷఏҊ
    ӦۀࢿྉΛॻ͖࢝ΊΔ
    ϓϨεϦϦʔεΛॻ͖࢝ΊΔ
    ௒͑ͯ͸͍͚ͳ͍Ұઢ
    ←AIΤϯδχΞͰ͢͠
    ← ٕज़Ӧۀ͔ͳ
    ← BizDevͩΑͶ
    ← ͓ɺ͓͏…
    ←͍͋ͭ΋͏

    ɹΤϯδχΞ͡ΌͶʔΘ

    View full-size slide

  10. Ͱ͖Ε͹ΤϯδχΞͱͯ͠

    Ұੜ൧Λ৯͍͖͍ͬͯͨ

    View full-size slide

  11. ձࣾͰΤϯδχΞͱͯ͠ͷ
    ଚݫΛ࠶ͼऔΓ໭͢

    View full-size slide

  12. ͦΜͳ͋Δ࣌…

    View full-size slide

  13. ϔουϨεChromeΛ஌Δ
    https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja

    View full-size slide

  14. ✓ Chrome͕ϔουϨεϞʔυͰىಈͰ͖Δ
    ✓ ChromeͷىಈΦϓγϣϯʹʮ--headessʯΛՃ͑Δ͚ͩ
    ✓ ୅දతͳϔουϨεϒϥ΢βͱ͍͑͹PhantomJS
    ✓ ߴ଎Ͱ҆ఆͯ͠ಈ࡞͢Δ
    ✓ ඪ४΁ͷରԠ͕ૣ͍ʢES2017΍Async-Await͕࢖͑Δʣ
    ✓ ओͳ༻్͸ςετࣗಈԽͱಈతΫϩʔϥ
    ϔουϨεChromeͱ͸

    View full-size slide

  15. ✓ ੩తΫϩʔϥʢwget΍curl౳ʣ
    ✓ υΩϡϝϯτʢHTMLϑΝΠϧ౳ʣ΁ͷϦΫΤετͷΈ
    ✓ ϑΝΠϧΛύʔε͢Δ͚ͩͳͷͰߴ଎ʹಈ࡞͢Δ
    ✓ AngularJSɺReactɺVue.jsͰ࡞ΒΕͨSPAαΠτͰ͸ಈ࡞͠ͳ͍
    ✓ ಈతΫϩʔϥʢPhantomJS΍ϔουϨεChrome౳ʣ
    ✓ ը૾΍JavaScript͓ΑͼCSSΛಡΈࠐΜͰඳը·Ͱߦ͏
    ✓ JavaScriptͷ࣮ߦ·Ͱߦ͏ͷͰҰൠతʹ௿଎
    ✓ SPAαΠτͰ΋ैདྷͷαΠτͱಉ͡Α͏ʹಈ࡞͢Δ
    ੩తΫϩʔϥ vs. ಈతΫϩʔϥ
    ※ উखͳ໋໊Ͱ͢

    View full-size slide

  16. Chrome DevTools Protocol
    https://chromedevtools.github.io/devtools-protocol/
    ✓ ࠷৽ͷ࢓༷͸
    Chromiumίʔυ্ͷ

    JSONϑΝΠϧ
    ✓ 1࣌ؒʹ1ճGitHubͷ

    ϨϙδτϦʹίϐʔ

    ͞Ε͍ͯΔ

    View full-size slide

  17. ϕϯνϚʔΫ
    https://hackernoon.com/benchmark-headless-chrome-vs-phantomjs-e7f44c6956c

    View full-size slide

  18. RIP PhantomJS
    https://groups.google.com/forum/#!topic/phantomjs/9aI5d-LDuNE

    View full-size slide

  19. ͜Ε͔Β࢝ΊΔͳΒ

    ϔουϨεChrome

    View full-size slide

  20. ✓ API͕௿Ϩϕϧա͗ͯѻ͍͕೉͍͠
    ✓ ࢓༷͕·ͩෆ҆ఆͰ௥͍͔͚Δͷ͕େม
    ✓ ηΩϡϦςΟͷϒϩοΫʹҾ͔͔ͬΔ
    ✓ Content Security PolicyͳͲɺϢʔβʔͷอޢ͕࡞ಈͯ͠͠·͏
    ✓ ΧδϡΞϧʹόάΛ౿Ή
    ✓ setRequestInterceptionͷ࣮૷͕·࣮ͩݧஈ֊
    ͔͠͠໰୊΋ࢁੵΈ

    View full-size slide

  21. ✓ Google ChromeνʔϜ͕

    ϝϯςφϯε
    ✓ ߴϨϕϧͷAPIͰϔουϨε

    Chrome͕ѻ͑Δϥούʔ
    ✓ 1݄ʹv1.0.0͕ϦϦʔε͞Εͨ
    ✓ Slackάϧʔϓ΋࡞ΒΕ

    ରԠ΋ஸೡͰૣ͍
    GoogleChrome / puppeteer
    https://github.com/GoogleChrome/puppeteer

    View full-size slide

  22. ϔουϨε
    ChromeͰ
    Ϋϩʔϥ

    View full-size slide

  23. ͬͯ΍ͭ
    ϝονϟ
    ྲྀߦͬͯΔ
    ʙʙʙ

    View full-size slide

  24. Զ͕
    ࠷ॳʹ
    ࡞ͬͨ
    ͜ͱʹ
    ͳΜͶ
    ʔ͔ͳ

    View full-size slide

  25. puppeteer / examples
    https://github.com/GoogleChrome/puppeteer/tree/master/examples

    View full-size slide

  26. ʮ࢖ͬͯΈͨʯͱʮղઆʯ

    ͹͔ΓͰ࣮༻తͳ΋ͷ͸গͳ͍

    View full-size slide

  27. ϔουϨεChromeͰ࠷ॳͷ
    ࣮༻తͳΫϩʔϥΛ࡞Ζ͏

    View full-size slide

  28. ✓ طଘͷΫϩʔϥ͕PromiseʹରԠ͍ͯ͠ͳ͍
    ✓ ෼ࢄ؀ڥͰಈ࡞͢ΔNode.jsͷΫϩʔϥ͕ͳ͔ͬͨ
    ͦͷଞͷཧ༝

    View full-size slide

  29. ✓ ࣮༻తͳΫϩʔϥͱͯ͠ඞཁͳػೳΛຬ͍ͨͯ͠Δ
    ✓ υΩϡϝϯτ͕ӳޠͰॻ͔Ε͍ͯΔ
    ✓ ςετ͕े෼Χόʔ͞Ε͍ͯΔ
    ✓ ෼ࢄ؀ڥͰಈ࡞͢Δ
    ✓ API͸γϯϓϧʹอͭ
    ✓ puppeteer / examples ʹࡌͤͯ΋Β͏
    ΰʔϧΛܾΊΔ

    View full-size slide

  30. ͜ΕͰΤϯδχΞͱͯ͠ͷ

    ଚݫΛऔΓ໭͢

    View full-size slide

  31. Ͱ͖ͨ
    https://github.com/yujiosaka/headless-chrome-crawler

    View full-size slide

  32. ΰʔϧୡ੒
    https://github.com/GoogleChrome/puppeteer/tree/master/examples

    View full-size slide

  33. Google Developersʹసࡌ
    https://developers.google.com/web/tools/puppeteer/examples

    View full-size slide

  34. ΞΫηε͕૿͑ͯϏϏΔ

    View full-size slide

  35. )$$SBXMFSMBVODI \
    NBY%FQUI ୳ࡧ͢Δ࠷େͷਂ͞
    NBY$PODVSSFODZ ࠷େฒྻ਺
    BMMPXFE%PNBJOT ڐՄ͞Ε͍ͯΔυϝΠϯ
    FWBMVBUF1BHF
    bUJUMF
    UFYU

    ϖʔδ্ͰධՁ͞ΕΔؔ਺
    PO4VDDFTT SFTVMU\੒ޭ࣌ʹධՁ͞ΕΔؔ਺
    DPOTPMFMPH A\SFTVMUPQUJPOTVSM^aU\SFTVMUSFTVMU^A

    ^

    ^

    UIFO BTZODDSBXMFS\
    DSBXMFSRVFVF IUUQTXXXFNJODPKQ

    BXBJUDSBXMFSPO*EMF

    BXBJUDSBXMFSDMPTF

    ^

    σϞ

    View full-size slide

  36. Ϋϩʔϥ͕Ͱ͖Δ·Ͱ

    View full-size slide

  37. ✓ ʮΫϩʔϦϯάʯͱʮεΫϨΠϐϯάʯ͸ҧ͏
    ✓ ΫϩʔϦϯάɿHTML͔ΒϦϯΫΛݟ͚ͭΔ
    ✓ εΫϨΠϐϯάɿHTML͔Βཉ͍͠৘ใΛݟ͚ͭΔ
    ✓ ͦΕͧΕ୯ମͰଘࡏͯ͠΋ҙຯ͕ͳ͍
    ࠷΋ϛχϚϧͳΫϩʔϥ

    View full-size slide

  38. ೋͭͷڞ௨఺͸Կ͔

    View full-size slide

  39. HTML͔ΒɹɹɹΛݟ͚ͭΔ

    View full-size slide

  40. ͦΕͬͯjQueryͰΑ͘Ͷʁ

    View full-size slide

  41. jQuery: true,
    ϖʔδʹK2VFSZΛࣗಈૠೖ
    v1.0.0ϦϦʔε

    View full-size slide

  42. )$$SBXMFSMBVODI \
    K2VFSZUSVF
    FWBMVBUF1BHF
    bUJUMF
    UFYU


    PO4VDDFTT SFTVMU\
    DPOTPMFMPH A\SFTVMUPQUJPOTVSM^aU\SFTVMUSFTVMU^A

    ^

    ^

    UIFO BTZODDSBXMFS\
    DSBXMFSRVFVF IUUQTXXXFNJODPKQ

    BXBJUDSBXMFSPO*EMF

    BXBJUDSBXMFSDMPTF

    ^

    example

    View full-size slide

  43. ✓ ੩తΫϩʔϥʹ׳Ε͍ͯΔͱɺ͛͢ʔ஗͘ײ͡Δ
    ✓ ͻͬͦΓΤϥʔͰࢭ·ͬͯͨΓ͢ΔͱϚδͰԜΉ
    ΠϥΠϥ͠ͳ͍Ϋϩʔϥ

    View full-size slide

  44. ✓ λεΫΩϡʔͱΩϟογϡʹRedisΛ༻͍Δ
    ✓ ෳ਺ͷαʔόͰRedisΛڞ༗
    ෼ࢄ؀ڥͰಈ࡞ͤ͞Δ

    View full-size slide

  45. cache: new RedisCache(),
    ΩϟογϡετϨʔδʹ3FEJTΛࢦఆ
    v1.3.0ϦϦʔε

    View full-size slide

  46. )$$SBXMFSMBVODI \
    DBDIFOFX3FEJT$BDIF \IPTU QPSU^

    FWBMVBUF1BHF
    bUJUMF
    UFYU


    PO4VDDFTT SFTVMU\
    DPOTPMFMPH A\SFTVMUPQUJPOTVSM^aU\SFTVMUSFTVMU^A

    ^

    ^

    UIFO BTZODDSBXMFS\
    DSBXMFSRVFVF IUUQTXXXBNB[PODPKQ

    BXBJUDSBXMFSPO*EMF

    BXBJUDSBXMFSDMPTF

    ^

    example
    )$$SBXMFSMBVODI \
    DBDIFOFX3FEJT$BDIF \IPTU QPSU^

    FWBMVBUF1BHF
    bUJUMF
    UFYU


    PO4VDDFTT SFTVMU\
    DPOTPMFMPH A\SFTVMUPQUJPOTVSM^aU\SFTVMUSFTVMU^A

    ^

    ^

    UIFO BTZODDSBXMFS\
    DSBXMFSRVFVF IUUQTXXXBNB[PODPKQ

    BXBJUDSBXMFSPO*EMF

    BXBJUDSBXMFSDMPTF

    ^

    )$$SBXMFSMBVODI \
    DBDIFOFX3FEJT$BDIF \IPTU QPSU^

    FWBMVBUF1BHF
    bUJUMF
    UFYU


    PO4VDDFTT SFTVMU\
    DPOTPMFMPH A\SFTVMUPQUJPOTVSM^aU\SFTVMUSFTVMU^A

    ^

    ^

    UIFO BTZODDSBXMFS\
    DSBXMFSRVFVF IUUQTXXXBNB[PODPKQ

    BXBJUDSBXMFSPO*EMF

    BXBJUDSBXMFSDMPTF

    ^

    View full-size slide

  47. ✓ ෯༏ઌ୳ࡧʢBFSʣˍਂ͞༏ઌ୳ࡧʢDFSʣ
    ✓ robots.txtʹै͏
    ✓ XMLαΠτϚοϓ୳ࡧ
    ✓ σόΠεͷΤϛϡϨʔγϣϯ
    ✓ ϖʔδͷεΫϦʔϯγϣοτ
    ✓ JSON/CSVग़ྗ
    ͦͷଞͷػೳ

    View full-size slide

  48. ͜Ε͔ΒͷΫϩʔϥ

    View full-size slide

  49. ✓ ͜ͷΫϩʔϥͷͨΊʹαʔόʔ100୆ฒ΂ͯ

    ΫϩʔϦϯά͢ΔౕͳΜ͍ͯͳ͍͠ΊΜͲ͍͘͞
    ✓ ίϚϯυҰൃͰ෼ࢄ؀ڥʹσϓϩΠͯ͠ཉ͍͠
    ݱࡏͷ՝୊

    View full-size slide

  50. ✓ ߏ੒؅ཧʰπʔϧʱʹ͍ۙ
    ✓ AWS LambdaɺAzure Functionsɺ

    Google CloudFunctionsΛ༰қʹσϓϩΠɾ࣮ߦ
    ✓ Node.js, Python, Java, Scala, C#, F#, Go, Groovy,
    Kotlin, PHP & SwiftΛαϙʔτ
    ✓ ศརͳϓϥάΠϯ΋ͨ͘͞Μ
    Serverless Frameworkͱ͸

    View full-size slide

  51. yarn (npm run) deploy
    yarn (npm run) start
    v2.0.0 will be…
    "84-BNCEBʹσϓϩΠ
    ฒྻͰΫϩʔϦϯά։࢝

    View full-size slide

  52. Զ͕࠷ॳʹϔουϨε
    ChromeͰΫϩʔϥ
    ࡞ͬͨࣄʹͳΜͶʔ͔ͳ

    View full-size slide

  53. Զ͕࠷ॳʹϔουϨε
    ChromeͰ࣮༻తͳΫϩʔϥ
    ࡞ͬͨࣄʹͳΜͶʔ͔ͳ

    View full-size slide

  54. ͚ͩͲຊ౰͸ɺ࢓ࣄͰ

    ΋ͬͱίʔυΛॻ͖͍ͨ

    View full-size slide

  55. WE ARE HIRING
    https://www.emin.co.jp/blog/news/1527/
    ηʔϧε΋

    View full-size slide