Pro Yearly is on sale from $80 to $50! »

Puppeteer を 使って Web ブラウザを動かしてみよう!

De4cef85165e8a063b5e40fe1f24daa4?s=47 02
August 13, 2019

Puppeteer を 使って Web ブラウザを動かしてみよう!

8/13 サポーターズ Colab 勉強会の登壇資料です。

De4cef85165e8a063b5e40fe1f24daa4?s=128

02

August 13, 2019
Tweet

Transcript

  1. Puppeteer Λ ࢖ͬͯ Web ϒϥ΢βΛ ಈ͔ͯ͠ΈΑ͏ʂ 02 8/13αϙʔλʔζ Colab ษڧձ

  2. ΞδΣϯμ • ࣗݾ঺հ • Puppeteer ͱ͸Կ͔ • Puppeteer ͰͰ͖Δ͜ͱ •

    Puppeteer ͷϝϦοτ / σϝϦοτ • ϋϯζΦϯ • Puppeteer ࢖͏࣌ͷ஫ҙ఺
  3. ࣗݾ঺հ • 02 ʢେ௡ ࿨௬ʣ • Twitter, Github:cocoeyes02 • גࣜձࣾ΢Οϧήʔτ

    • όοΫΤϯυʢPHP(Laravel), GolangʣΤϯδχΞ • ۦ͚ग़͠QAΤϯδχΞ • ͨ·ʔʹOSSͷίϯτϏϡʔτͯͨ͠Γ͠·͢
  4. Puppeteer ͱ͸Կ͔

  5. Puppeteer ͱ͸Կ͔ • Headless Chrome • Google Chrome ͕ఏڙ͍ͯ͠Δɺը໘Λද ࣔͤͣʹಈ࡞͢ΔϞʔυ

  6. Puppeteer ͱ͸Կ͔ • Puppeteer • Google Chrome νʔϜ͕࡞͍ͬͯΔ Headless Chrome

    Λૢ࡞͢Δ Node ϥΠϒϥϦ • ≒ ը໘্Ͱ͸ݟ͑ͳ͍ Chrome ΛࣗಈͰૢ࡞͢Δ Google ެࣜπʔϧ • ͱݴ͍ͭͭɺ ը໘্ʹදࣔ͢Δઃఆ΋Ͱ͖·͢
  7. Puppeteer ͱ͸Կ͔

  8. Puppeteer ͱ͸Կ͔

  9. Puppeteer ͰͰ͖Δ͜ͱ

  10. Ͱ͖Δಈ࡞ • εΫϦʔϯγϣοτΛࡱΔ • URL Λࢦఆͯ͠ભҠ͢Δ • ϑΥʔϜೖྗɺϘλϯΫϦοΫɺΩʔϘʔυೖྗͳͲ • JS

    Λ࢖ͬͯ DOM ͷૢ࡞Λ͢Δ • etc…
  11. ࢖༻ྫ • ೔ʑͷ࡞ۀΛޮ཰Խ͍ͨ͠ʂ • ۈଵೖྗΛࣗಈԽ͢Δ • γϥόεͷ৘ใΛऔಘ͢Δ

  12. ࢖༻ྫ • ͋ΔαΠτΛεΫϨΠϐϯά͍ͨ͠ʂ • ωοτΦʔΫγϣϯͷՁ֨มಈΛεΫϨΠ ϐϯά͢Δ • ※εΫϨΠϐϯά = ΢ΣϒαΠτͷHTML͔

    ΒඞཁͳσʔλΛऔಘ͢Δ
  13. ࢖༻ྫ • ϓϩμΫτͷ E2E ςετʢࣗಈϒϥ΢βςε τʣΛॻ͖͍ͨʂ • ϩάΠϯ ~ CV

    ୡ੒ͷྲྀΕΛɺ1೔1ճࣗಈԽ ֬ೝ͢Δ
  14. Puppeteer ͷ ϝϦοτ / σϝϦοτ

  15. Puppeteer ͷϝϦοτ • ؀ڥߏஙָ͕ • Chrome ຊମΛ࢖ͬͯςετͰ͖Δ • Headless Chrome

    ͸ɺChrome ຊମͷػೳ • ެࣜυΩϡϝϯτΛ࢝Ίɺจݙ͕๛෋ • Google ͕ϝϯςφϯε͍ͯ͠ΔͷͰɺ΍ͬͺΓ҆৺ײ ͕͋Δ
  16. Puppeteer ͷσϝϦοτ • Ϋϩεϒϥ΢βςετʢෳ਺ϒϥ΢βͰͷςετʣΛ͍ͨ͠ ਓʹ͸޲͍͍ͯͳ͍ • Safari ΍ IE ͳͲͰ͸

    Puppeteer ͸࢖͑ͳ͍ • Firefox ͸β൛͕ͩҰԠͰ͖Δ͠ɺChromium ϕʔεͷ Edge Ͱ͋Ε͹ແཧ΍Γ͍͡Ε͹Ͱ͖Δ • ଞͷݴޠΛ࢖͍͍ͨɺjavascript ΛͲ͏ͯ͠΋࢖͍ͨ͘ͳ͍ ਓ͸޲͍ͯͳ͍
  17. ϋϯζΦϯ

  18. node ͕ೖ͍ͬͯΔ͔֬ೝ • node -v Λλʔϛφϧ or ίϚϯυϓϩϯϓτ Ͱ࣮ߦͯ֬͠ೝ

  19. όʔδϣϯ͕දࣔ͞Εͳ͔ͬͨ ํ • Mac • /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/

    install/master/install)” • brew install nodebrew • nodebrew install-binary latest • nodebrew use latest • Windows • ҎԼ͔ΒΠϯετʔϥʔΛDL࣮͠ߦ • http://nodejs.org/
  20. npm ͕ೖ͍ͬͯΔ͔֬ೝ • npm —version Λλʔϛφϧ or ίϚϯυϓϩ ϯϓτͰ࣮ߦͯ֬͠ೝ

  21. ॾʑ࡞੒ • mkdir puppeteer_handson • cd puppeteer_handson • npm init

    • શ෦ Enter ͰOK • npm install puppeteer
  22. εΫϦϓτϑΝΠϧ࡞੒ • ҎԼͷαΠτ͔ΒɺεΫϦϓτΛίϐʔ͢Δ • https://gist.github.com/ cocoeyes02/7c2cc9caacb4e14d0827d9d43ef7e51d • touch colab.js •

    vi colab.js • ฤूϞʔυ΁ʢiʣ • ϖʔετ͢Δ • อଘ͢Δʢ:wqʣ
  23. εΫϦϓτϑΝΠϧ࡞੒ • node colab.js Λ࣮ߦ͢Δ • ͏·͍͚͘͹ɺλʔϛφϧ or ίϚϯυϓϩ ϯϓτͷը໘ʹ

    json ܗࣜͷจࣈྻ͕දࣔ͞ Ε·͢
  24. Puppeteer Λ࢖͏࣌ͷ஫ҙ఺

  25. ࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • 2010೥3݄ࠒɺࢢຽ͔Β Ԭ࡚ࢢཱਤॻؗͷ΢ΣϒαΠτ ͷଂॻݕࡧγεςϜʹର͠઀ଓ͕ग़དྷͳ͍ͱۤ৘͕͋Γɺ ͦͷޙ΋΢ΣϒαΠτͷӾཡ͕ࠔ೉ʹͳΔࣄଶ͕૬͍࣍ ͩɻ •

    5݄25೔ʹΞΫηεΛߦ͍ͬͯͨஉੑ͕ଂॻݕࡧγεςϜ ʹߴස౓ͷϦΫΤετΛނҙʹૹΓ͚ͭͨͱِͯ͠ܭۀ຿ ๦֐༰ٙͰୁั͞Εͨɻ
  26. ࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • உੑ͕࣮ࡍʹߦ͍ͬͯͨͷ͸ɺଂॻݕࡧγες Ϝͷ࢖͍উखʹຬ଍͠ͳ͔ͬͨͨΊࣗ਎Ͱ࡞੒ ͨ͠ΫϩʔϥΛ࣮ߦ͠ɺଂॻݕࡧγεςϜ͔Β ਤॻ৘ใΛऔಘ͢Δ͜ͱͰ͋ͬͨɻ • ࢀরɿԬ࡚ࢢཱதԝਤॻؗࣄ݅

    - Wikipedia
  27. ͜͏͍͏ͷ͸΍ͬͪΌμϝʂ • ར༻ن໿ͰεΫϨΠϐϯάΛېࢭ͍ͯ͠ΔαΠτ ͰɺεΫϨΠϐϯάΛͨ͠ • εΫϨΠϐϯάͷස౓͕ߴ͘ɺαʔόʹର͢Δ ෛՙ͕େ͖͔ͬͨނʹαʔόΛམͱͯ͠͠·ͬͨ • εΫϨΠϐϯάʹΑΓऔಘͨ͠৘ใΛෆਖ਼ʹ࢖ ༻͢Δ

  28. ར༻ن໿ͰεΫϨΠϐϯάΛېࢭͯ͠ ͍ΔαΠτͰɺεΫϨΠϐϯάΛͨ͠ • ͪΌΜͱར༻ن໿ΛಡΈ·͠ΐ͏ • ex. Facebook • 2. FacebookͰڞ༗Մೳͳίϯςϯπ͓ΑͼೝΊΒΕΔߦҝ

    • ฐ͔ࣾΒࣄલͷڐՄΛಘΔ͜ͱͳ͘ɺࣗಈԽ͞ΕͨखஈΛ ༻͍ͯ੡඼ͷσʔλʹΞΫηεͨ͠ΓσʔλΛऔಘͨ͠Γ ͢Δ͜ͱ΍ɺΞΫηεڐՄͷͳ͍σʔλ΁ͷΞΫηεΛࢼ ΈΔ͜ͱΛېࢭ͠·͢ɻ
  29. εΫϨΠϐϯάͷස౓͕ߴ͘ɺ αʔόʹର͢Δෛՙ͕େ͖͔ͬͨނʹ αʔόΛམͱͯ͠͠·ͬͨ • Լख͢Δͱِܭۀ຿๦֐ʹͳͬͯ͠·͏͜ͱ΋… • ex. Librahackࣄ݅ʮ1࣌ؒʹ400Ҏ্ϦΫΤετΛૹΒ ΕΔͱଞͷϦΫΤετͷॲཧ͕ෆՄೳʹͳΔෆ۩߹Λ ؚΜͰ͍ͨʯ

    • ա౓ͳ࢖༻͸߇͑·͠ΐ͏ • উख͕Θ͔Βͳ͚Ε͹ɺਓؒͷखͰͰ͖ΔൣғͷϦΫ Τετ͕ແ೉
  30. εΫϨΠϐϯάʹΑΓऔಘͨ͠ ৘ใΛෆਖ਼ʹ࢖༻͢Δ • ࢲతར༻Ͱ͋Ε͹OK • ͜͏͍͏ͷ͸NG • ঎༻໨తͰ࢖͏ • εΫϨΠϐϯάͷ݁Ռɺ΋͘͠͸Ճ޻ͨ͠΋ͷΛଞऀ

    ʹެ։͢Δ • etc..
  31. ͦͷଞ • ͪ͜Β΋߹ΘͤͯಡΈ·͠ΐ͏ • WebεΫϨΠϐϯάͷ஫ҙࣄ߲Ұཡ - Qiita @nezuq • https://qiita.com/nezuq/items/

    c5e827e1827e7cb29011
  32. ·ͱΊ

  33. ·ͱΊ • Puppeteer ͸ը໘্Ͱ͸ݟ͑ͳ͍ Chrome ΛࣗಈͰ ૢ࡞͢Δ Google ެࣜπʔϧ •

    ؀ڥߏங΋ָͰɺεΫϨΠϐϯά΍ࣗಈϒϥ΢βς ετΛ࢝ΊΔʹ͸΋͍ͬͯ͜ • Puppeteer Λར༻ͨ͠εΫϨΠϐϯάʹ͍ͭͯ͸ɺ ๏త໰୊͕Ͳ͏ͯ͠΋ආ͚ΒΕͳ͍ͷͰௐ΂ͳ͕Β ΍ͬͯͶ