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
620
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
780
Apricot LT
daiz713
1
270
Other Decks in Programming
See All in Programming
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
CSC305 Summer Lecture 12
javiergs
PRO
0
130
令和最新版手のひらコンピュータ
koba789
14
8.1k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
930
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
Vue・React マルチプロダクト開発を支える Vite
andpad
0
100
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
110
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.3k
TDD 実践ミニトーク
contour_gara
1
250
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
AWS発のAIエディタKiroを使ってみた
iriikeita
1
100
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Raft: Consensus for Rubyists
vanstee
140
7.1k
BBQ
matthewcrist
89
9.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Cult of Friendly URLs
andyhume
79
6.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Adaptive Systems
keathley
43
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Being A Developer After 40
akosma
90
590k
The Language of Interfaces
destraynor
160
25k
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