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
260
「とりあえずAI」が招く悲劇〜私がAIで生産性を下げるまでの話〜 / The tragedy caused by "AI for now" - The story of how I used AI to reduce my productivity
taminif
1
330
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.3k
SkyWayで一年間運用してきたけどWebRTCってつらいんじゃないの
taminif
2
1k
オンライン英会話とSkyWay
taminif
0
550
オンライン英会話アプリとSkyWay
taminif
0
500
Other Decks in Technology
See All in Technology
グローバル基準のSREは、運用現場でどう機能したか:成熟度アセスメントの実践 / SRE NEXT 2026
sorawatanabe
0
230
モダンフロントエンド 開発研修
recruitengineers
PRO
4
630
Digitization部 紹介資料
sansan33
PRO
2
7.7k
ブラウザ研修 2026
recruitengineers
PRO
6
990
FORENSIA: ローカルLLMフォレンジックハーネス
sumeshi
2
380
AWS ネットワーク構築でハマった(ハマりかけた) 5選とそこから得た教訓
nagisa53
4
210
QAエンジニア起点で進める、SmartHRにおける信頼性向上について
kaomi_wombat
1
140
ボトムアップ文化が強い組織で セキュリティをどう根付かせていくかの現在進行形の話 / Making Security Stick in a Bottom-Up Organization
yamaguchitk333
0
220
DatadogのBits Chatが開発組織にもたらしたもの / What Bits Chat Has Brought Us
sms_tech
1
260
20260804_Q4AzureUpdateBite_FabricDataAgentの精度を高める設計.pdf
matayuuu
1
130
オートロックマンションなのに、各部屋は施錠なし!? 攻撃者が組織内ネットワークで大暴れする理由 / The Front Door Is Locked, but the Rooms Are Wide Open: Why Attackers Move Freely Inside Enterprise Networks
nttcom
1
2.8k
サイバー捜査員研修(前半)
nomizone
1
2k
Featured
See All Featured
[SF Ruby Conf 2025] Rails X
palkan
2
1.3k
Agile that works and the tools we love
rasmusluckow
331
22k
Un-Boring Meetings
codingconduct
0
380
How to Ace a Technical Interview
jacobian
281
24k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Designing for Timeless Needs
cassininazir
1
440
Unsuck your backbone
ammeep
672
58k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
490
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
We Have a Design System, Now What?
morganepeng
55
8.3k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
It's Worth the Effort
3n
188
29k
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
ʮ͜ͷςετࣗಈԽͷ Ͱ͋Γ·ͤΜʯ ʮࣗಈԽ͢Δ͜ͱ͕Ͱ͖Δʯ ʮࣗಈԽ͢ΔπʔϧͰ͋Δʯ
ීஈͷ࡞ۀΛࣗಈԽ͢Δ ͜Εͦ͜ΤϯδχΞϦϯά
ͬͯΈͨ͘ͳΓ·ͤΜ͔ʁ
ࣗಈԽ Έͳ͞Μͥͻ ͬͯΈ·͠ΐ͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠