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
600
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
770
Apricot LT
daiz713
1
260
Other Decks in Programming
See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
30
18k
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
220
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
510
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
300
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
690
Select API from Kotlin Coroutine
jmatsu
1
160
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
210
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
230
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.7k
Datadog RUM 本番導入までの道
shinter61
1
290
FormFlow - Build Stunning Multistep Forms
yceruto
1
170
ワンバイナリWebサービスのススメ
mackee
10
7.7k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
690
How to Ace a Technical Interview
jacobian
276
23k
Side Projects
sachag
455
42k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
The World Runs on Bad Software
bkeepers
PRO
68
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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