GyaPC::Asia Tokyo 2016 LT

D023ec30c31449e8dcf483e2286eeb84?s=47 daiiz
November 23, 2016

GyaPC::Asia Tokyo 2016 LT

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

D023ec30c31449e8dcf483e2286eeb84?s=128

daiiz

November 23, 2016
Tweet

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