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

私の生活を変えたHeadless Chrome / Headless Chrome who changed my life

73e80d16abc7cc65e08d430c2eae811b?s=47 taminif
November 24, 2018

私の生活を変えたHeadless Chrome / Headless Chrome who changed my life

Nodefest 2018 LT

73e80d16abc7cc65e08d430c2eae811b?s=128

taminif

November 24, 2018
Tweet

Transcript

  1. ࢲͷੜ׆Λม͑ͨ
 Headless Chrome ౦ژNodeֶԂࡇ2018 LT 2018/11/24 େౡ ޫو@sbntaminif

  2. ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾ։ൃάϧʔϓϦʔμʔ • ؔ੢NodeֶԂओ࠵ • ීஈ͸ژ౎Ͱಇ͍͍ͯ·͢ • ࠓ೔͜Εͷ࿩Ұ੾͠·ͤΜ↘

  3. ಋೖ 3ϖʔδͰ΍Γ·͢

  4. 1. ఆظߪೖΛࣗಈԽ͍ͨ͠ զ͕ՈͰ͸ ࣗಈԽΛਪਐ ೔༻඼ͷങ͍෺͸ ౎౓εʔύʔ Ͳ͏ʹ͔ࣗಈԽ ͍ͨ͠ Ͱ͖Ε͹yodobashi.comͰങ͍͍ͨʢϙΠϯτͷͨΊʣ ՝୊

  5. 2. Amazon Dash Button ϘλϯΛԡ͚ͩ͢ͰAmazon͔Β঎඼͕ಧ͘

  6. ʊਓਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ3. Yodobashi Dash Buttonɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ

  7. Ͳ͏΍͔ͬͨ

  8. AWS IoT 1-Click Headless Chrome puppeteer

  9. AWS IoT 1-Click ϘλϯΛԡ͢ͱAWSͰ࣮ߦ

  10. AWS IoT 1-Click • Amazon Dash Buttonϋʔυ΢ΣΞΛϕʔεͱͨ͠
 ϓϩάϥϛϯάՄೳͳϘλϯ • ࢖͍ํ͸Amazon

    Dash Buttonͱಉ͡Ͱ
 ϘλϯΛԡͨ࣌͠ͷૢ࡞͕બ΂Δ • ྨࣅσόΠε΋ॱ࣍ൃച͍ͯ͠Δ • SORACOM LTE-M Button powered by AWSͳͲ
  11. Headless Chrome https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja

  12. Headless Chrome https://developers.google.com/web/updates/2017/04/headless-chrome?hl=en

  13. Headless Chromeͱ͸ • ChromeΛϔουϨεͰಈ࡞͢Δ • ϔουϨε = UIͳ͠Ͱ࣮ߦ • Chrome59͕Πϯετʔϧ͞Ε͍ͯΕ͹࢖༻Մ

    ೳʢWindows͸61ʣ • Chromeͷػೳ͕શͯ࢖͑Δ
  14. ͦͯ͠ Headless ChromeΛ ૢ࡞͢ΔͨΊʹ։ൃ͞Εͨ ϥΠϒϥϦ

  15. puppeteer https://github.com/GoogleChrome/puppeteer

  16. puppeteerͱ͸ • Node.jsͰHeadless ChromeΛ
 ૢ࡞͢ΔϥΠϒϥϦ • Chrome DevToolsͷ্͔Βૢ࡞͢ΔAPI • GoogleChromeνʔϜ͕࣮૷

    • ʮύϖςΟΞʯͱൃԻ
  17. ಈ࡞ϨΠϠʔ

  18. ChromeΛࣗಈͰಈ͔ͯ͠ ঎඼ߪೖ·Ͱ ͨͲΓͭ͘

  19. ࣮૷͢Δ const puppeteer = require('puppeteer'); (async () => { const

    browser = await puppeteer.launch({headless: true}); const page = await browser.newPage(); await page.setViewport({width: 640, height: 460}); await page.goto('https://order.yodobashi.com/yc/login/ index.html'); //////////////////////////////////////////// })(); $ISPNFΛىಈ ৽͍͠λϒΛ։͘ ΢Οϯυ΢αΠζΛܾఆ 63-Λࢦఆͯ͠ભҠ
  20. ࣮૷͢Δ

  21. ࣮૷͢Δ //////////////////////////////////////////// await page.type('#memberId', '********'); await page.type('#password', '********'); page.click('#js_i_login0'); await

    page.waitForSelector('#wrapper'); await page.goto('https://www.yodobashi.com/product/ 100000001002383900/'); //////////////////////////////////////////// ϩάΠϯ৘ใΛೖྗ ϩάΠϯϘλϯΛΫϦοΫ ભҠΛ଴ͭ 63-Λࢦఆͯ͠ભҠ
  22. ࣮૷͢Δ

  23. ͜Μͳײ͡Ͱ Ұͭͣͭૢ࡞ͯ͠ ໨త·Ͱୡ੒͢Δ

  24. ࡞ͬͨ΋ͷ͕ͪ͜Β https://github.com/taminif/buyInYodobashi

  25. εΫϦϓτΛ࣮ߦ͢Ε͹ ঎඼͕ߪೖͰ͖ΔΑ͏ʹͳͬͨ

  26. ͜ΕΛAWS LambdaͰ ಈ͔͢

  27. ௨ৗͷpuppeteerΛ࢖͏ͱ Chromium͕ೖΔ ͢ΔͱɺLambdaͷ༰ྔͰ͋Δ 50MBΛ௒͑Δ

  28. serverless-chrome https://github.com/adieuadieu/serverless-chrome

  29. ChromeΛLambdaͷ֎Ͱ ࣮ߦ͢Δ͜ͱͰ ༰ྔΦʔόʔΛճආ͢Δ

  30. LambdaͰಈ͔ͨ͠ -BNCEBͰ ಈ࡞͢Δ"1* -BNCEBݺͼग़͠

  31. Lambdaʹొ࿥͢Δ͜ͱͰ ϘλϯΛԡͤ͹ߪೖͰ͖Δ!

  32. ⚠໰୊ൃੜ⚠

  33. AWS Lambda͔Β yodobashi.com΁ͷ ΞΫηε͕Ͱ͖ͳ͍ ͸঎඼ϖʔδͷΈ 'PSCJEEFO

  34. AWS͚ͩͳͷʁ ଞͷՈిྔൢళαΠτ͸ʁ ͜ΕΒͷ࿩͸ ࠙਌ձͰ͠·͠ΐ͏!

  35. Ͳ͏ճආ͢Δ͔ Heroku͔ΒͳΒ ΞΫηεͰ͖Δ

  36. ߏ੒Λม͑Ε͹͍͚Δ -BNCEBݺͼग़͠ )5514௨৴Ͱ )FSPLVΛίʔϧ εΫϦϓτ࣮ߦ

  37. Yodobashi Dash Button͕ ׬੒ͨ͠!!

  38. puppeteerͷັྗ

  39. ·ͣ͸͡Ίʹ Headless ChromeΛ࿩্͢Ͱ ͔ܽͤͳ͍ಈը

  40. The power of Headless Chrome https://www.youtube.com/watch?v=lhZOFUY1weo 2018೥ͷGoogle IOͷߨԋ

  41. Headless Chrome͸ େ͖ͳՄೳੑΛൿΊ͍ͯΔ

  42. ࢲͷߟ͑Δ ࠷΋ັྗతͳٕज़

  43. ͲΜͳWebαʔϏεͰ΋ APIԽͰ͖Δ

  44. Πϯλʔωοτશ੝ظ ϒϥ΢βΛ࢖Θͳ͍ਓ͸ ΄΅͍ͳ͍Ͱ͢ΑͶ

  45. ීஈͷωοταʔϑΟϯΛ ࣗಈԽͰ͖Δ

  46. ࣗಈԽͯ͠APIʹ͢Ε͹ ͍ͭͰ΋ݺͼग़ͤΔ

  47. APIԽ͓͚ͯ͠͹ ΠϯλʔϑΣʔε͸ ͲΕͰ΋࢖͑Δ ࠓ࿩୊ͷεϚʔτεϐʔΧʔ Ͱ΋OK

  48. ⚠8BSOJOH

  49. Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ https://ja.wikipedia.org/wiki/Ԭ࡚ࢢཱதԝਤॻؗࣄ݅

  50. ΍Γ͗͢Δͱॻྨૹݕ·Ͱ ͋Γ·͢ ৗࣝతͳΞΫηεʹ ԡ͑͞·͠ΐ͏

  51. ͜ͷηογϣϯʹײԽ͞Εͯ ൃੜͨ͠ଛ֐౳ʹ͍ͭͯɺ ੹೚͸ෛ͍݉Ͷ·͢

  52. ༻๏༻ྔΛकͬͯ ศརʹ࢖͍·͠ΐ͏

  53. ͜ͷಈըͷதͰ ڧ͘࿩͞Ε͍ͯΔ͜ͱ https://www.youtube.com/watch?v=lhZOFUY1weo

  54. ʮ͜ͷ࿩͸ςετࣗಈԽͷ ࿩Ͱ͸͋Γ·ͤΜʯ ʮࣗಈԽ͢Δ͜ͱ͕Ͱ͖Δʯ ʮࣗಈԽ͢ΔπʔϧͰ͋Δʯ

  55. ීஈͷ࡞ۀΛࣗಈԽ͢Δ ͜Εͦ͜ΤϯδχΞϦϯά

  56. ΍ͬͯΈͨ͘ͳΓ·ͤΜ͔ʁ

  57. ࣗಈԽ Έͳ͞Μ΋Headless ChromeͰ ੜ׆Λม͍͖͑ͯ·͠ΐ͏ʂ

  58. ͋Γ͕ͱ͏͍͟͝·ͨ͠