GyaPC::Asia Tokyo 2016 LT

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

Transcript

1. $ISPNF֦ுػೳ
   ʮ47(
   4DSFFO4IPUʯ
   ͷ։ൃ࿩ !EBJ[QMVT (ZB1$"TJB
   5PLZP
   
2. ࣗݾ঺հ ɾ!EBJ[QMVT
   
   JEEBJJ[
   ɾిؾ௨৴େֶ
   #
3. ΢Σϒϖʔδͷ
   εΫϦʔϯγϣοτ
4. ΢ΣϒϖʔδͷεΫϦʔϯγϣοτ ɾ೔ʑࡱΓͨΊΔ
   ɹɹɾษڧɺௐ΂΋ͷ
   ɾϝʔϧͰૹΒΕͯ͘Δ
   ɾ4/4Ͱݟ͚ͭΔ
5. εΫϦʔϯγϣοτ͕
   ࡱΒΕͨ΢Σϒϖʔδ
   ΛಡΈ͍ͨ
6. εΫϦʔϯγϣοτ
   ʹؚ·Ε͍ͯΔ
   ϦϯΫઌͷϖʔδ
   ΛಡΈ͍ͨ
7. 47(
   4DSFFO4IPU $ISPNF֦ு
   
   ΢ΣϒΞϓϦ
8. ɾΩϟϓνϟ
   ɾҰཡ
   ɾϓϨϏϡʔ
   ɾຒΊࠐΈ
9. Ωϟϓνϟ ࢦఆൣғͷը૾
   ʴ
   
   ࡱӨݩϖʔδ63-
   ʴ
   ϖʔδ಺ϦϯΫ৘ใ
10. Ωϟϓνϟ
    
    ࢦఆൣғͷը૾
    
    ɾ#BDLHSPVOE
    QBHF
    
    ɾchrome.tabs.captureVisibleTab() ϖʔδ಺ϦϯΫҐஔͱαΠζ
    
    ɾ$POUFOU
    TDSJQUT
    
    ɾ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