GyaPC::Asia Tokyo 2016 LT

D023ec30c31449e8dcf483e2286eeb84?s=47 daiiz
November 23, 2016
Programming
0
210

GyaPC::Asia Tokyo 2016 LT

SVG ScreenShot
https://svgscreenshot.appspot.com/ についての話です

D023ec30c31449e8dcf483e2286eeb84?s=128

daiiz

November 23, 2016
Tweet

More Decks by daiiz

See All by daiiz
D023ec30c31449e8dcf483e2286eeb84?s=48 daiz713
0
300
D023ec30c31449e8dcf483e2286eeb84?s=48 daiz713
1
210

Other Decks in Programming

See All in Programming
73b0a25ed03f649ec63ded82ce4ac7cb?s=48 nunulk
0
130
Dbfa12cd7e1ff8b06a588609369d6e49?s=48 eddie
1
690
0eba807ea367a2b648480d20f52d3af3?s=48 haco
0
210
62340514ee3033d54d79c9e7a3db68d5?s=48 kazutomo
0
770
9e9eb825c69d719f2d3c32bdd3bc971e?s=48 atp
1
170
21a4b941766d805333e11c5766be43b4?s=48 takahashim
0
1k
3528f569ab96088a8a2b00b3c33de599?s=48 erickhun
1
150
B337bccaf042748ab81c81ea623bad40?s=48 regtan
0
170
D02d96057c4cd905d60d14549b00db0d?s=48 stvansolano
0
230
D1804d3c315cbb850aaa88d2fbadc3cf?s=48 keitheis
0
150
27c093d0834208f4712faaaec38c2c5c?s=48 ramalho
0
130
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
0
110

Featured

See All Featured
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
107
11k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
400
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
14
1.4k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
166
19k
79acae287842acf29084005533a7fb3b?s=48 hursman
105
9.2k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
27
900
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.7k
78b475797a14c84799063c7cd073962f?s=48 holman
448
130k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
295
39k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
192
8.4k

Transcript

  1. $ISPNF֦ுػೳ ʮ47(4DSFFO4IPUʯ ͷ։ൃ࿩ !EBJ[QMVT (ZB1$"TJB5PLZP

  2. ࣗݾ঺հ ɾ!EBJ[QMVTJEEBJJ[ ɾిؾ௨৴େֶ#

  3. ΢Σϒϖʔδͷ εΫϦʔϯγϣοτ

  4. ΢ΣϒϖʔδͷεΫϦʔϯγϣοτ ɾ೔ʑࡱΓͨΊΔ ɹɹɾษڧɺௐ΂΋ͷ ɾϝʔϧͰૹΒΕͯ͘Δ ɾ4/4Ͱݟ͚ͭΔ

  5. εΫϦʔϯγϣοτ͕ ࡱΒΕͨ΢Σϒϖʔδ ΛಡΈ͍ͨ

  6. εΫϦʔϯγϣοτ ʹؚ·Ε͍ͯΔ ϦϯΫઌͷϖʔδ ΛಡΈ͍ͨ

  7. 47(4DSFFO4IPU $ISPNF֦ு ΢ΣϒΞϓϦ

  8. ɾΩϟϓνϟ ɾҰཡ ɾϓϨϏϡʔ ɾຒΊࠐΈ

  9. Ωϟϓνϟ ࢦఆൣғͷը૾ ʴ ࡱӨݩϖʔδ63- ʴ ϖʔδ಺ϦϯΫ৘ใ

  10. Ωϟϓνϟ ࢦఆൣғͷը૾ ɾ#BDLHSPVOEQBHF ɾchrome.tabs.captureVisibleTab() ϖʔδ಺ϦϯΫҐஔͱαΠζ ɾ$POUFOUTDSJQUT ɾgetBoundingClientRect()

  11. <svg data-url> <image> … </image> <a> <rect></rect> <text> … </text>

    </a> <a> <rect></rect> <text> … </text> </a> </svg> ࡱӨൣғ಺ ͷϦϯΫ৘ใ ʢ63- ҐஔͳͲʣ ࡱӨൣғ಺ ͷΩϟϓνϟը૾ Ωϟϓνϟ

  12. Ωϟϓνϟ

  13. ͜Ε·Ͱʹ࡞੒ͨ͠ εΫϦʔϯγϣοτΛ ϦετΞοϓ Ұཡ

  14. Ұཡ

  15. 47(εΫϦʔϯγϣοτ ͷϓϨϏϡʔϖʔδ ϓϨϏϡʔ

  16. ϓϨϏϡʔ

  17. 47(εΫϦʔϯγϣοτ ΛϖʔδʹຒΊࠐΜͰ ڞ༗͢Δ αΠτʹຒΊࠐΉ

  18. αΠτʹຒΊࠐΉ svgλάΑΓ΋ imgλάͷํ͕ ຒΊࠐΈ΍͍͢ͱࢥ͏

  19. svgͷ୅ΘΓʹpngΛఏڙ imgλάͰදࣔ pngΛݟ͚ͭ࣍ୈ.svgͷ ϨΠϠʔΛੜ੒ ֦ுػೳ αΠτʹຒΊࠐΉ

  20. 47(εΫϦʔϯ γϣοτΛࡱͬͯ 4DSBQCPYʹ షΓ෇͚ΔྲྀΕ

  21. ֦ுػೳͰࡱӨ͢Δ

  22. pngը૾ͷ63-Λऔಘ

  23. pngը૾ΛషΓ෇͚

  24. ը૾͕දࣔ͞ΕΔ

  25. onmouseͨ͠ͱ͖͚ͩsvg͕දࣔ͞ΕΔ

  26. 47(4DSFFO4IPU IUUQTTWHTDSFFOTIPUBQQTQPUDPN