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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
310
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
AIのReact習熟度を測る
uhyo
2
690
2026 AI Memory Architecture
nagatsu
0
370
クレデンシャル流出 ― 攻撃 3 時間 vs 復旧 10 時間。この非対称性にどう備えるか
kazzpapa3
3
580
Agile and AI Redmine Japan 2026
hiranabe
4
490
週末にループ・エンジニアリングの理解を深めるためのスライド
nagatsu
0
380
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
11k
自分が詳しくない領域でAIを使う #プロヒス2026
konifar
20
7.5k
ぼっちではじめた登壇が「51名」「241件」の発信に化けた
subroh0508
1
320
「ビジネスがわかるエンジニア」とは何か?
ryooob
0
330
PostgreSQL 19 新機能概要 OSC Hokkaido 2026
nori_shinoda
0
250
AIに障害切り分けを全部やってもらった。 。 。 。
estie
0
170
【2026年版】 ベクトル検索とEmbedding最前線
mocobeta
24
7.6k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2k
Unsuck your backbone
ammeep
672
58k
What does AI have to do with Human Rights?
axbom
PRO
1
2.2k
Paper Plane
katiecoart
PRO
1
52k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.8k
A Modern Web Designer's Workflow
chriscoyier
698
190k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
450
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.5k
How to Ace a Technical Interview
jacobian
281
24k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.7k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
200
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
ʮ͜ͷςετࣗಈԽͷ Ͱ͋Γ·ͤΜʯ ʮࣗಈԽ͢Δ͜ͱ͕Ͱ͖Δʯ ʮࣗಈԽ͢ΔπʔϧͰ͋Δʯ
ීஈͷ࡞ۀΛࣗಈԽ͢Δ ͜Εͦ͜ΤϯδχΞϦϯά
ͬͯΈͨ͘ͳΓ·ͤΜ͔ʁ
ࣗಈԽ Έͳ͞Μͥͻ ͬͯΈ·͠ΐ͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠