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
GyaPC::Asia Tokyo 2016 LT
Search
daiiz
November 23, 2016
Programming
0
510
GyaPC::Asia Tokyo 2016 LT
SVG ScreenShot
https://svgscreenshot.appspot.com/
についての話です
daiiz
November 23, 2016
Tweet
Share
More Decks by daiiz
See All by daiiz
Dentoo.LT #15
daiz713
0
650
Apricot LT
daiz713
1
260
Other Decks in Programming
See All in Programming
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
CSC307 Lecture 11
javiergs
PRO
0
240
Activities at Cairo Library
cairolibrary720
0
1.2k
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
生成AIをkintoneに連携してみた
hideg
0
230
Trial
cairolibrary720
1
130
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
유연한 Composable 설계
l2hyunwoo
0
380
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
リハビリmruby
kishima
1
160
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
307
41k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Rails Girls Zürich Keynote
gr2m
93
13k
Optimizing for Happiness
mojombo
373
69k
Being A Developer After 40
akosma
72
580k
Six Lessons from altMBA
skipperchong
24
3.2k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Gamification - CAS2011
davidbonilla
78
4.9k
Transcript
$ISPNF֦ுػೳ ʮ47(4DSFFO4IPUʯ ͷ։ൃ !EBJ[QMVT (ZB1$"TJB5PLZP
ࣗݾհ ɾ!EBJ[QMVTJEEBJJ[ ɾిؾ௨৴େֶ#
Σϒϖʔδͷ εΫϦʔϯγϣοτ
ΣϒϖʔδͷεΫϦʔϯγϣοτ ɾʑࡱΓͨΊΔ ɹɹɾษڧɺௐͷ ɾϝʔϧͰૹΒΕͯ͘Δ ɾ4/4Ͱݟ͚ͭΔ
εΫϦʔϯγϣοτ͕ ࡱΒΕͨΣϒϖʔδ ΛಡΈ͍ͨ
εΫϦʔϯγϣοτ ʹؚ·Ε͍ͯΔ ϦϯΫઌͷϖʔδ ΛಡΈ͍ͨ
47(4DSFFO4IPU $ISPNF֦ு ΣϒΞϓϦ
ɾΩϟϓνϟ ɾҰཡ ɾϓϨϏϡʔ ɾຒΊࠐΈ
Ωϟϓνϟ ࢦఆൣғͷը૾ ʴ ࡱӨݩϖʔδ63- ʴ ϖʔδϦϯΫใ
Ωϟϓνϟ ࢦఆൣғͷը૾ ɾ#BDLHSPVOEQBHF ɾchrome.tabs.captureVisibleTab() ϖʔδϦϯΫҐஔͱαΠζ ɾ$POUFOUTDSJQUT ɾgetBoundingClientRect()
<svg data-url> <image> … </image> <a> <rect></rect> <text> … </text>
</a> <a> <rect></rect> <text> … </text> </a> </svg> ࡱӨൣғ ͷϦϯΫใ ʢ63- ҐஔͳͲʣ ࡱӨൣғ ͷΩϟϓνϟը૾ Ωϟϓνϟ
Ωϟϓνϟ
͜Ε·Ͱʹ࡞ͨ͠ εΫϦʔϯγϣοτΛ ϦετΞοϓ Ұཡ
Ұཡ
47(εΫϦʔϯγϣοτ ͷϓϨϏϡʔϖʔδ ϓϨϏϡʔ
ϓϨϏϡʔ
47(εΫϦʔϯγϣοτ ΛϖʔδʹຒΊࠐΜͰ ڞ༗͢Δ αΠτʹຒΊࠐΉ
αΠτʹຒΊࠐΉ svgλάΑΓ imgλάͷํ͕ ຒΊࠐΈ͍͢ͱࢥ͏
svgͷΘΓʹpngΛఏڙ imgλάͰදࣔ pngΛݟ͚ͭ࣍ୈ.svgͷ ϨΠϠʔΛੜ ֦ுػೳ αΠτʹຒΊࠐΉ
47(εΫϦʔϯ γϣοτΛࡱͬͯ 4DSBQCPYʹ షΓ͚ΔྲྀΕ
֦ுػೳͰࡱӨ͢Δ
pngը૾ͷ63-Λऔಘ
pngը૾ΛషΓ͚
ը૾͕දࣔ͞ΕΔ
onmouseͨ͠ͱ͖͚ͩsvg͕දࣔ͞ΕΔ
47(4DSFFO4IPU IUUQTTWHTDSFFOTIPUBQQTQPUDPN