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
790
Apricot LT
daiz713
1
270
Other Decks in Programming
See All in Programming
OSS開発者という働き方
andpad
5
1.7k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
楽して成果を出すためのセルフリソース管理
clipnote
0
180
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
はじめてのMaterial3 Expressive
ym223
2
880
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
240
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
個人軟體時代
ethanhuang13
0
330
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building an army of robots
kneath
306
46k
Six Lessons from altMBA
skipperchong
28
4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
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