Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LINEで馬券を購入する / Purchase a betting ticket at LINE
Search
taminif
August 03, 2018
Technology
1.7k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
LINEで馬券を購入する / Purchase a betting ticket at LINE
関西Node学園3時限目
taminif
August 03, 2018
More Decks by taminif
See All by taminif
React Native New Architecture 移行実践報告
taminif
1
250
「とりあえずAI」が招く悲劇〜私がAIで生産性を下げるまでの話〜 / The tragedy caused by "AI for now" - The story of how I used AI to reduce my productivity
taminif
1
320
PuppeteerとPlaywrightの15日間の演劇 / relation of Puppeteer and Playwright
taminif
3
2.3k
Redashの開発はじめました / How to get started Redash development
taminif
0
810
私の生活を変えたHeadless Chrome / Headless Chrome who changed my life
taminif
3
540
WebSocketをiOSに持ち込んで辛い思いをした経験がありますか!? / have you painful experience in web socket?
taminif
3
6.2k
SkyWayで一年間運用してきたけどWebRTCってつらいんじゃないの
taminif
2
1k
オンライン英会話とSkyWay
taminif
0
550
オンライン英会話アプリとSkyWay
taminif
0
500
Other Decks in Technology
See All in Technology
壊して学ぶAWS CDK: そのcdk deployで消えるもの、残るもの
k_adachi_01
1
460
変更し続けられるシステムをどう保つか — AI時代のSSoTという設計原則
kawauso
1
1k
Aurora MySQL 8.4リリース! Rubyistが備えること / what-rubyist-should-prepare-for-aurora-mysql-8-4
fkmy
0
340
「休む」重要さ
smt7174
5
1.5k
生成AI×AWS CDK×AWS FISで"振り返れる"ミニGameDayをつくろう
yoshimi0227
2
510
データエンジニアリングとドメイン駆動設計
masuda220
PRO
14
2.4k
AIコード生成×サプライチェーン攻撃 — PHPが直面する“二重の信頼問題
shinyasaita
0
440
Jitera Company Deck
jitera
0
260
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする~デザインシステム運用に学ぶ組織レバレッジ~ 渡辺 凌央
legalontechnologies
PRO
1
280
AIと1000本ノックしてたどり着いた、最速のプロダクト開発 ~toC向けAIエージェントUXを、動く選択肢とAIキャパシティで設計する~
lycorptech_jp
PRO
1
110
SRENEXT_2026_Chairs__Talks_in_Tamachi.sre.pdf
srenext
1
130
ここは地獄!つらい朝会を体験することで、チームとしてのより良い振る舞いに気づくワークショップ / The stand-up meeting from hell in the game industry
scrummasudar
0
210
Featured
See All Featured
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
220
The #1 spot is gone: here's how to win anyway
tamaranovitovic
3
1.1k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
280
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.5k
So, you think you're a good person
axbom
PRO
2
2.1k
Paper Plane
katiecoart
PRO
2
52k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
220
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.2k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
190
Scaling GitHub
holman
464
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Bash Introduction
62gerente
615
220k
Transcript
LINEͰഅ݊Λߪೖ͢Δ ؔNodeֶԂ #3 2018/08/03 େౡ ޫو@sbntaminif
ࣗݾհ • ΣϒϦΦגࣜձࣾWEBΤϯδχΞ + ϓϩμΫτ Ϛωʔδϟʔɹ࠷ۙϚωʔδϟʔଟΊ • ҰԠओ࠵ͬͯ·͕͢ࢲͩͬͯΓ͍ͨ • ීஈژͰಇ͍͍ͯ·͢
• ࠓ͜ΕͷҰ͠·ͤΜ↘
Q. അ݊ Ͳ͏ͬͯ ߪೖ͢Δʁ A. ωοτߪೖ αʔϏεΛ ༻͠·͢
അ݊ωοτߪೖαʔϏε • JRA I-PATͱݴ͍·͢ɻ • ଈPAT, A-PAT͋Γ·͢ • ਃ͠ࠐΈ੍ͷձһઐ༻αΠτ •
Webݶఆ • ͪΖΜ20ࡀҎ্ʢֶੜͰOKʣ
ϑΝϛίϯ + ిઢͰ ߪೖͰ͖ͨ ※ݱࡏαʔϏεऴྃɻεʔϑΝϛɺυϦʔϜΩϟετͰങ͑·ͨ͠ https://www.youtube.com/watch?v=ks0JeyhZsR4
LINEͰഅ݊ΛങͬͯΈ͍ͨ εϚʔτϑΥϯશظ ࣗͷ͖ͳUIͰ അ݊Λങ͍͍ͨ
͍ͣΕͷເ അ݊Λߪೖ͢ΔΞϓϦΛ ࡞Γ͍ͨ ※ͨͩ͠APIఏڙ͞Εͳ͍
API͕ͳ͍ͳΒ ࡞Εྑ͍
I-PAT https://www.ipat.jra.go.jp/
ΦϯϥΠϯߪೖͰ͖Δ WebαΠτΛ AutomationԽ࣮ͯ͠ݱ Ͳ͏Δ͔➡
Headless Chrome https://developers.google.com/web/updates/2017/04/headless-chrome?hl=en
Headless Chromeͱ • ChromeΛϔουϨεͰಈ࡞͢Δ • ϔουϨε = UIͳ͠Ͱ࣮ߦ • Chrome59͕Πϯετʔϧ͞Ε͍ͯΕ༻Մ
ೳʢWindows61ʣ • Chromeͷػೳ͕શͯ͑Δ
ίϚϯυ͔Β ChromeΛUIͳ͠Ͱ ࣮ߦͰ͖Δ
ͰCLIͰ શͯͷૢ࡞Λॻ͘ͷਏ͍
ChromeΛ ૢ࡞͢ΔͨΊʹ։ൃ͞Εͨ ϥΠϒϥϦ
puppeteer https://github.com/GoogleChrome/puppeteer
puppeteerͱ • NodeJSͰHeadless ChromeΛ ૢ࡞͢ΔϥΠϒϥϦ • Chrome DevToolsͷ্͔Βૢ࡞͢ΔAPI • GoogleChromeνʔϜ͕࣮
• ʮύϖςΟΞʯͱൃԻ
ಈ࡞ϨΠϠʔ
ChromeΛࣗಈͰಈ͔ͯ͠ അ݊ߪೖ·Ͱ ͨͲΓͭ͘
࣮͢Δ 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://www.ipat.jra.go.jp/’); //////////////////////////////////////////// })(); $ISPNFΛىಈ ৽͍͠λϒΛ։͘ ΟϯυαΠζΛܾఆ 63-Λࢦఆͯ͠ભҠ
࣮͢Δ
࣮͢Δ //////////////////////////////////////////// await page.type(‘[name=“inetid”]’,’********’); await page.click(".button a"); await page.waitForNavigation(); ////////////////////////////////////////////
*%Λೖྗ ϩάΠϯϘλϯΛΫϦοΫ ભҠΛͭ
࣮͢Δ
͜Μͳײ͡Ͱ Ұͭͣͭૢ࡞ͯ͠ త·Ͱୡ͢Δ
࡞ͬͨͷ͕ͪ͜Β https://github.com/taminif/bettingInTheIPAT
awaitࠈ
Ͳ͏ͯ͠ϦΫΤετΛ ͭඞཁ͕͋ΔͷͰ ݁ՌΛͨ͟ΔΛಘͳ͍
ίϚϯυΛୟ͚ അ͕݊ങ͑ΔAPI͕Ͱ͖ͨ
API͕Ͱ͖ͨ .BDڥͰ ಈ࡞͢Δ"1* ίϚϯυݺͼग़͠ ͜Ε͚ͩͰ͜ͷMacͰ͔͑͠ͳ͍
͜ͷAPIΛαʔόʔͰ ݺͼग़ͤΔΑ͏ʹ͍ͨ͠
APIΛͲ͜Ͱಈ͔͔͢ • Headless ChromeͲͷڥͰಈ͘ • puppeteerNode v6.4.0͔Βಈ͘ • ͭ·Γαʔόʔߏஙͯ͠ڥΛ༻ҙ͢Εಈ͘ ->
ͰΊΜͲ͍͘͞ • AWS LambdaGCPͰಈ͘ ->AWS LambdaͰಈ͔ͯ͠APIʹ͢Δ
LambdaͰಈ͔ͨ͠ -BNCEBͰ ಈ࡞͢Δ"1* -BNCEBݺͼग़͠ +40/ \ QMBDFbവؗ SBDF/Pb
SBDFS/P`` BNPVOU ^ ʢิʣ "84-BNCEBͷ࠷େλΠϜΞτઃఆ ඵ ભҠ͕ଟ͗͢Δͱ͕࣌ؒΓͳ͍ Մೳੑ͋Δ
·ͩAWSͷ ཧը໘͔Β͔͑͠ͳ͍ ͜ͷAPIΛͲ͔͜ΒͰ ݺͼग़ͤΔΑ͏ʹ͍ͨ͠
API Gateway͔Βݺͼग़͢ -BNCEBͰ ಈ࡞͢Δ"1* )5513FRVFTUΛ ड͚͚Δ )5514௨৴ +40/ \ QMBDFbവؗ
SBDF/Pb SBDFS/P`` BNPVOU ^
͔͠͠ɺ্ख͍͜ͱ ಈ͍ͯ͘Εͳ͍ API GatewayͷλΠϜΞτʹ Ҿ͔͔ͬΔ
API GatewayͷλΠϜΞτ 2
Lambda͔ΒLambdaΛίʔϧ ඇಉظͰݺͼग़͢ )5514௨৴ +40/ \ QMBDFbവؗ SBDF/Pb SBDFS/P``
BNPVOU ^ ݺͼग़ͨ͠Β ऴΘΓ
Ͳ͔͜ΒͰAPIΛ ݺͼग़ͤΔΑ͏ʹͳͬͨ
ωοτϫʔΫΛܦ༝͢Ε അ݊Λങ͑ΔΑ͏ʹͳͬͨ
ωοτϫʔΫؒͰ LINE͕APIΛݺͼग़ͤ അ͕݊ങ͑ΔͷͰ
LINE Messaging API https://developers.line.me/ja/services/messaging-api/
LINE Messaging APIͱ • LINE DeveloperͷҰػೳ • ʮ͋ͳͨͷαʔϏεͱLINEϢʔβʔͷ ɹํίϛϡχέʔγϣϯΛՄೳʹ͢Δʯ •
LINEͷ༑ୡՃϝοηʔδૹ৴ͳͲͷΠϕϯτ ΛτϦΨʔʹWebhookΛ࣮ߦ͢Δ
LINEʹૹ৴ͨ͠Λ API Gateway͔ΒLambdaʹ ͢
LINE BotͰഅ݊Λߪೖ͢Δ ʢਖ਼֬ʹ͜͜ʹ-*/&͞Μͷ αʔόʔ͕͋Δʣ ϝοηʔδ വؗ
-*/&ʹೖྗ͞Εͨ ใΛड -BNCEB༻ʹՃ +40/ \ QMBDFbവؗ SBDF/Pb SBDFS/P`` BNPVOU ^
ങ͑ΔΑ͏ʹͳ͕ͬͨ Ϩεϙϯε͕ͳ͍ LINE Messaging APIͰ ϦΫΤετΛड͚ͨޙʹ ԠϝοηʔδΛฦ͢
Ԡϝοηʔδػೳ • Ϣʔβʔ͔ΒͷϝοηʔδҰ݅ʹରͯ͠ Ұճ͚ͩฦ٫Ͱ͖Δ • ϝοηʔδʹ͍͍ͭͯΔϢʔβʔIDΛͬͯ ԠϝοηʔδΛૹ৴ • ࣗ༝ʹϢʔβʔʹૹ৴͢ΔPush API༗ྉɾɾ
ˢ͜Ε͕͋Εߪೖఆ͕ฦͤΔɾɾ
ԠϝοηʔδΛฦ͢ \ QMBDFbവؗ SBDF/Pb SBDFS/P`` BNPVOU
^ വؗ ύϥϝʔλʔ͕ਖ਼ৗͳΒ -BNCEBΛݺͼग़ͯ͠ ԠϝοηʔδΛૹΔ -BNCEB͔Β-BNCEBΛඇಉظͰ ݺͼग़͍ͯ͠ΔͷͰޭ͔ͨ͠ෆ໌
LINEͰഅ݊Λ ങ͑ΔΑ͏ʹͳͬͨ!
࣮ફฤ puppeteerͰ ͭ·͍ͮͨ͜ͱ
puppeteerͰͭ·͍ͮͨ͜ͱ • ൣғ֎ͷཁૉΫϦοΫ • onclickΠϕϯτ͕ൃՐ͠ͳ͍ • waitForͱwaitForNavigationͱwaitForSelector • ChromeͱpuppeteerͷόʔδϣϯΛ߹ΘͤΔ •
(AWS Lambdaͱͯॲཧ͕͍)
ൣғ֎ͷཁૉΫϦοΫ
Headless ChromeͰ ը໘֎ͷཁૉͷΫϦοΫ͕ൃՐ͠ͳ͍ ΟϯυαΠζΛ ͜͜·Ͱʹઃఆ ͜ͷϘλϯ ΫϦοΫͰ͖ͳ͍ ϒϥβ෯
const puppeteer = require(‘puppeteer'); (async () => { const browser
= await puppeteer.launch({headless: true}); const page = await browser.newPage(); await page.setViewport({width: 1920, height: 2160}); await page.goto(‘https://www.ipat.jra.go.jp/’); })(); ը໘શ͕ͯʹ͓͞·ΔΑ͏ͳେ͖͞ ʢղܾࡦʣ ը໘Λେ͖͘͢Δ
͜͏͢ΕԡͤΔΑ͏ʹͳͬͨʂ ϒϥβ෯ ۭന
waitForͱ waitForNavigationͱ waitForSelector
ͦΕͧΕͷ͍͚ • waitFor -> ϛϦඵΛࢦఆɻࢦఆ͚ͨ࣌ؒͩͭ͠ • waitForNavigation -> Ҿͳ͠ɻ •
waitForSelector -> ηϨΫλͰࢦఆɻཁૉ͕දࣔ͞ΕΔ·Ͱͭ ->͜ΕΒ͚ͩͰͳ͍ɻଞʹ·ͩ͋Δ
࠷ॳͷ͏ͪwaitForͰ ϩʔυΛͭ ׳Εͯ͘Ε ਖ਼͍͚͘͠Δͱ ਐΊ͍͢
·ͩHeadless Chromeͷ ັྗΛͬͯͳ͍
Ξϐʔϧฤ Headless Chrome ૉΒ͍͠ϓϩμΫτͰ͋Δʂ
·ͣ͡Ίʹ Headless ChromeΛ্͢Ͱ ͔ܽͤͳ͍ಈը
The power of Headless Chrome https://www.youtube.com/watch?v=lhZOFUY1weo 2018ͷGoogle IOͷߨԋ
Headless Chromeͱ puppeteerͰग़དྷΔ 10ͷ͜ͱ͕͞Ε͍ͯ·͢ ʢൈਮʣ SSR ABςετ Web Audio ύοΫϚϯ
Headless Chrome େ͖ͳՄೳੑΛൿΊ͍ͯΔ
ࢲͷߟ͑Δ ࠷ັྗతͳٕज़
ͲΜͳWebαʔϏεͰ APIԽͰ͖Δ
Πϯλʔωοτશظ ϒϥβΛΘͳ͍ਓ ΄΅͍ͳ͍Ͱ͢ΑͶ
ීஈͷωοταʔϑΟϯΛ ࣗಈԽͰ͖Δ
ࣗಈԽͯ͠APIʹ͢Ε ͍ͭͰݺͼग़ͤΔ
APIԽ͓͚ͯ͠ ΠϯλʔϑΣʔε ͲΕͰ͑Δ ࠓͷεϚʔτεϐʔΧʔ ͰOK
ԿͰͰ͖Δ
ເ͕͕Γ·ͤΜ͔ʁ
⚠8BSOJOH
Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ https://ja.wikipedia.org/wiki/Ԭ࡚ࢢཱதԝਤॻؗࣄ݅
Γ͗͢Δͱॻྨૹݕ·Ͱ ͋Γ·͢ ৗࣝతͳΞΫηεʹ ԡ͑͞·͠ΐ͏
͜ͷηογϣϯʹײԽ͞Εͯ ൃੜͨ͠ଛʹ͍ͭͯɺ ෛ͍݉Ͷ·͢
༻๏༻ྔΛकͬͯ ศརʹ͍·͠ΐ͏
ͱ͜ΖͰɺࠓ·Ͱͷ εΫϨΠϐϯάπʔϧͰ Ͱ͖ͳ͔ͬͨͷʁ
Ͱ͖ͳ͍͜ͱͳ͍͚ΕͲ ͔ͬͨ͠ • ֤ݴޠͷHTTPϦΫΤετͰϩάΠϯใΛ อ࣋͢Δ͜ͱ͕͔ͬͨ͠ • PhantomJSwebkitϕʔεͰɺSPA৽͍͠λϒ Λ։͘Α͏ͳαʔϏεͷରԠ͕Ͱ͖ͳ͔ͬͨ (Headless Chrome͕ग़ͨ͜ͱͰαʔϏεऴྃ)
• Selenium৮ͬͯͳ͍͚ͲɺAPIԽ͍͠ʁ
Headless Chrome ChromeΛ͍ͬͯΔ Α͏ͳͷͳͷͰ ΄ͱΜͲͷ͜ͱΛָʹରԠͰ͖Δ
࠷ߴ͡Όͳ͍Ͱ͔͢ʁ
͜ͷಈըͷதͰ ڧ͘͞Ε͍ͯΔ͜ͱ https://www.youtube.com/watch?v=lhZOFUY1weo
ʮ͜ͷςετࣗಈԽͷ Ͱ͋Γ·ͤΜʯ ʮࣗಈԽ͢Δ͜ͱ͕Ͱ͖Δʯ ʮࣗಈԽ͢ΔπʔϧͰ͋Δʯ
ීஈͷ࡞ۀΛࣗಈԽ͢Δ ͜Εͦ͜ΤϯδχΞϦϯά
ͬͯΈͨ͘ͳΓ·ͤΜ͔ʁ
ࣗಈԽ Έͳ͞Μͥͻ ͬͯΈ·͠ΐ͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠