Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Puppeteer Λ ͬͯ Web ϒϥβΛ ಈ͔ͯ͠ΈΑ͏ʂ 02 8/13αϙʔλʔζ Colab ษڧձ
Slide 2
Slide 2 text
ΞδΣϯμ • ࣗݾհ • Puppeteer ͱԿ͔ • Puppeteer ͰͰ͖Δ͜ͱ • Puppeteer ͷϝϦοτ / σϝϦοτ • ϋϯζΦϯ • Puppeteer ͏࣌ͷҙ
Slide 3
Slide 3 text
ࣗݾհ • 02 ʢେ ௬ʣ • Twitter, Github:cocoeyes02 • גࣜձࣾΟϧήʔτ • όοΫΤϯυʢPHP(Laravel), GolangʣΤϯδχΞ • ۦ͚ग़͠QAΤϯδχΞ • ͨ·ʔʹOSSͷίϯτϏϡʔτͯͨ͠Γ͠·͢
Slide 4
Slide 4 text
Puppeteer ͱԿ͔
Slide 5
Slide 5 text
Puppeteer ͱԿ͔ • Headless Chrome • Google Chrome ͕ఏڙ͍ͯ͠Δɺը໘Λද ࣔͤͣʹಈ࡞͢ΔϞʔυ
Slide 6
Slide 6 text
Puppeteer ͱԿ͔ • Puppeteer • Google Chrome νʔϜ͕࡞͍ͬͯΔ Headless Chrome Λૢ࡞͢Δ Node ϥΠϒϥϦ • ≒ ը໘্Ͱݟ͑ͳ͍ Chrome ΛࣗಈͰૢ࡞͢Δ Google ެࣜπʔϧ • ͱݴ͍ͭͭɺ ը໘্ʹදࣔ͢ΔઃఆͰ͖·͢
Slide 7
Slide 7 text
Puppeteer ͱԿ͔
Slide 8
Slide 8 text
Puppeteer ͱԿ͔
Slide 9
Slide 9 text
Puppeteer ͰͰ͖Δ͜ͱ
Slide 10
Slide 10 text
Ͱ͖Δಈ࡞ • εΫϦʔϯγϣοτΛࡱΔ • URL Λࢦఆͯ͠ભҠ͢Δ • ϑΥʔϜೖྗɺϘλϯΫϦοΫɺΩʔϘʔυೖྗͳͲ • JS Λͬͯ DOM ͷૢ࡞Λ͢Δ • etc…
Slide 11
Slide 11 text
༻ྫ • ʑͷ࡞ۀΛޮԽ͍ͨ͠ʂ • ۈଵೖྗΛࣗಈԽ͢Δ • γϥόεͷใΛऔಘ͢Δ
Slide 12
Slide 12 text
༻ྫ • ͋ΔαΠτΛεΫϨΠϐϯά͍ͨ͠ʂ • ωοτΦʔΫγϣϯͷՁ֨มಈΛεΫϨΠ ϐϯά͢Δ • ※εΫϨΠϐϯά = ΣϒαΠτͷHTML͔ ΒඞཁͳσʔλΛऔಘ͢Δ
Slide 13
Slide 13 text
༻ྫ • ϓϩμΫτͷ E2E ςετʢࣗಈϒϥβςε τʣΛॻ͖͍ͨʂ • ϩάΠϯ ~ CV ୡͷྲྀΕΛɺ11ճࣗಈԽ ֬ೝ͢Δ
Slide 14
Slide 14 text
Puppeteer ͷ ϝϦοτ / σϝϦοτ
Slide 15
Slide 15 text
Puppeteer ͷϝϦοτ • ڥߏஙָ͕ • Chrome ຊମΛͬͯςετͰ͖Δ • Headless Chrome ɺChrome ຊମͷػೳ • ެࣜυΩϡϝϯτΛ࢝Ίɺจݙ͕๛ • Google ͕ϝϯςφϯε͍ͯ͠ΔͷͰɺͬͺΓ҆৺ײ ͕͋Δ
Slide 16
Slide 16 text
Puppeteer ͷσϝϦοτ • ΫϩεϒϥβςετʢෳϒϥβͰͷςετʣΛ͍ͨ͠ ਓʹ͍͍ͯͳ͍ • Safari IE ͳͲͰ Puppeteer ͑ͳ͍ • Firefox β൛͕ͩҰԠͰ͖Δ͠ɺChromium ϕʔεͷ Edge Ͱ͋ΕແཧΓ͍͡ΕͰ͖Δ • ଞͷݴޠΛ͍͍ͨɺjavascript ΛͲ͏͍ͯͨ͘͠ͳ͍ ਓ͍ͯͳ͍
Slide 17
Slide 17 text
ϋϯζΦϯ
Slide 18
Slide 18 text
node ͕ೖ͍ͬͯΔ͔֬ೝ • node -v Λλʔϛφϧ or ίϚϯυϓϩϯϓτ Ͱ࣮ߦͯ֬͠ೝ
Slide 19
Slide 19 text
όʔδϣϯ͕දࣔ͞Εͳ͔ͬͨ ํ • 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/
Slide 20
Slide 20 text
npm ͕ೖ͍ͬͯΔ͔֬ೝ • npm —version Λλʔϛφϧ or ίϚϯυϓϩ ϯϓτͰ࣮ߦͯ֬͠ೝ
Slide 21
Slide 21 text
ॾʑ࡞ • mkdir puppeteer_handson • cd puppeteer_handson • npm init • શ෦ Enter ͰOK • npm install puppeteer
Slide 22
Slide 22 text
εΫϦϓτϑΝΠϧ࡞ • ҎԼͷαΠτ͔ΒɺεΫϦϓτΛίϐʔ͢Δ • https://gist.github.com/ cocoeyes02/7c2cc9caacb4e14d0827d9d43ef7e51d • touch colab.js • vi colab.js • ฤूϞʔυʢiʣ • ϖʔετ͢Δ • อଘ͢Δʢ:wqʣ
Slide 23
Slide 23 text
εΫϦϓτϑΝΠϧ࡞ • node colab.js Λ࣮ߦ͢Δ • ͏·͍͚͘ɺλʔϛφϧ or ίϚϯυϓϩ ϯϓτͷը໘ʹ json ܗࣜͷจࣈྻ͕දࣔ͞ Ε·͢
Slide 24
Slide 24 text
Puppeteer Λ͏࣌ͷҙ
Slide 25
Slide 25 text
࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • 20103݄ࠒɺࢢຽ͔Β Ԭ࡚ࢢཱਤॻؗͷΣϒαΠτ ͷଂॻݕࡧγεςϜʹର͠ଓ͕ग़དྷͳ͍ͱ͕ۤ͋Γɺ ͦͷޙΣϒαΠτͷӾཡ͕ࠔʹͳΔࣄଶ͕૬͍࣍ ͩɻ • 5݄25ʹΞΫηεΛߦ͍ͬͯͨஉੑ͕ଂॻݕࡧγεςϜ ʹߴසͷϦΫΤετΛނҙʹૹΓ͚ͭͨͱِͯ͠ܭۀ ༰ٙͰୁั͞Εͨɻ
Slide 26
Slide 26 text
࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • உੑ͕࣮ࡍʹߦ͍ͬͯͨͷɺଂॻݕࡧγες Ϝͷ͍উखʹຬ͠ͳ͔ͬͨͨΊࣗͰ࡞ ͨ͠ΫϩʔϥΛ࣮ߦ͠ɺଂॻݕࡧγεςϜ͔Β ਤॻใΛऔಘ͢Δ͜ͱͰ͋ͬͨɻ • ࢀরɿԬ࡚ࢢཱதԝਤॻؗࣄ݅ - Wikipedia
Slide 27
Slide 27 text
͜͏͍͏ͷͬͪΌμϝʂ • ར༻نͰεΫϨΠϐϯάΛېࢭ͍ͯ͠ΔαΠτ ͰɺεΫϨΠϐϯάΛͨ͠ • εΫϨΠϐϯάͷස͕ߴ͘ɺαʔόʹର͢Δ ෛՙ͕େ͖͔ͬͨނʹαʔόΛམͱͯ͠͠·ͬͨ • εΫϨΠϐϯάʹΑΓऔಘͨ͠ใΛෆਖ਼ʹ ༻͢Δ
Slide 28
Slide 28 text
ར༻نͰεΫϨΠϐϯάΛېࢭͯ͠ ͍ΔαΠτͰɺεΫϨΠϐϯάΛͨ͠ • ͪΌΜͱར༻نΛಡΈ·͠ΐ͏ • ex. Facebook • 2. FacebookͰڞ༗Մೳͳίϯςϯπ͓ΑͼೝΊΒΕΔߦҝ • ฐ͔ࣾΒࣄલͷڐՄΛಘΔ͜ͱͳ͘ɺࣗಈԽ͞ΕͨखஈΛ ༻͍ͯͷσʔλʹΞΫηεͨ͠ΓσʔλΛऔಘͨ͠Γ ͢Δ͜ͱɺΞΫηεڐՄͷͳ͍σʔλͷΞΫηεΛࢼ ΈΔ͜ͱΛېࢭ͠·͢ɻ
Slide 29
Slide 29 text
εΫϨΠϐϯάͷස͕ߴ͘ɺ αʔόʹର͢Δෛՙ͕େ͖͔ͬͨނʹ αʔόΛམͱͯ͠͠·ͬͨ • Լख͢Δͱِܭۀʹͳͬͯ͠·͏͜ͱ… • ex. Librahackࣄ݅ʮ1࣌ؒʹ400Ҏ্ϦΫΤετΛૹΒ ΕΔͱଞͷϦΫΤετͷॲཧ͕ෆՄೳʹͳΔෆ۩߹Λ ؚΜͰ͍ͨʯ • աͳ༻߇͑·͠ΐ͏ • উख͕Θ͔Βͳ͚ΕɺਓؒͷखͰͰ͖ΔൣғͷϦΫ Τετ͕ແ
Slide 30
Slide 30 text
εΫϨΠϐϯάʹΑΓऔಘͨ͠ ใΛෆਖ਼ʹ༻͢Δ • ࢲతར༻Ͱ͋ΕOK • ͜͏͍͏ͷNG • ༻తͰ͏ • εΫϨΠϐϯάͷ݁Ռɺ͘͠Ճͨ͠ͷΛଞऀ ʹެ։͢Δ • etc..
Slide 31
Slide 31 text
ͦͷଞ • ͪ͜Β߹ΘͤͯಡΈ·͠ΐ͏ • WebεΫϨΠϐϯάͷҙࣄ߲Ұཡ - Qiita @nezuq • https://qiita.com/nezuq/items/ c5e827e1827e7cb29011
Slide 32
Slide 32 text
·ͱΊ
Slide 33
Slide 33 text
·ͱΊ • Puppeteer ը໘্Ͱݟ͑ͳ͍ Chrome ΛࣗಈͰ ૢ࡞͢Δ Google ެࣜπʔϧ • ڥߏஙָͰɺεΫϨΠϐϯάࣗಈϒϥβς ετΛ࢝ΊΔʹ͍ͬͯ͜ • Puppeteer Λར༻ͨ͠εΫϨΠϐϯάʹ͍ͭͯɺ ๏త͕Ͳ͏ͯ͠ආ͚ΒΕͳ͍ͷͰௐͳ͕Β ͬͯͶ