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 Summit の片隅で、体育座りしながらコミュニティがにぎわう理由を考えた
k_adachi_01
2
340
5分でわかるDuckDB Quack
chanyou0311
4
300
なぜ人は自分のプロジェクトを 「なんちゃってアジャイル」と 自嘲するのか
kozotaira
0
240
そのタスクオンスケですか?
poropinai1966
0
120
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
laysakura
2
8k
秘密度ラベル初心者が第1歩でつまづかないための「設計・運用」ポイント
seafay
PRO
1
570
Keeping applications secure by evolving OAuth 2.0 and OpenID Connect
ahus1
PRO
1
130
“ID沼入口” - 基本とセキュリティから始める、考え続けるためのID管理技術勉強会 告知&イントロ
ritou
0
380
本当の”仕事”を手放せる未来が見えた
mu7889yoon
0
220
CVE-2026-20833_脆弱性対応とAES 化について
jukishiya
0
350
飲食店もAIで。レジ締めやハンディシステムをつくってる話 / Using AI for restaurant management
vtryo
0
230
なぜ私たちのSREプラクティスはなかなか機能しないのか 〜システムより先に組織を見る〜 / Why our SRE practices aren't really working
vtryo
0
110
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
The Cost Of JavaScript in 2023
addyosmani
55
10k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.1k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.7k
Git: the NoSQL Database
bkeepers
PRO
432
67k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
エンジニアに許された特別な時間の終わり
watany
107
250k
How STYLIGHT went responsive
nonsquared
100
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
210
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
ʮ͜ͷςετࣗಈԽͷ Ͱ͋Γ·ͤΜʯ ʮࣗಈԽ͢Δ͜ͱ͕Ͱ͖Δʯ ʮࣗಈԽ͢ΔπʔϧͰ͋Δʯ
ීஈͷ࡞ۀΛࣗಈԽ͢Δ ͜Εͦ͜ΤϯδχΞϦϯά
ͬͯΈͨ͘ͳΓ·ͤΜ͔ʁ
ࣗಈԽ Έͳ͞Μͥͻ ͬͯΈ·͠ΐ͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠