GyaPC::Asia Tokyo 2016 LT

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. 
    …
    
    
    …
    
    
    
    …
    
    
    ࡱӨൣғ಺
    ͷϦϯΫ৘ใ
    ʢ63- ҐஔͳͲʣ
    ࡱӨൣғ಺
    ͷΩϟϓνϟը૾
    Ωϟϓνϟ
    

    View Slide

12. Ωϟϓνϟ
    

    View Slide

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

    View Slide

14. Ұཡ
    

    View Slide

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

    View Slide

16. ϓϨϏϡʔ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. ֦ுػೳͰࡱӨ͢Δ
    

    View Slide

22. pngը૾ͷ63-Λऔಘ
    

    View Slide

23. pngը૾ΛషΓ෇͚
    

    View Slide

24. ը૾͕දࣔ͞ΕΔ
    

    View Slide

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

    View Slide

26. 47(4DSFFO4IPU
    IUUQTTWHTDSFFOTIPUBQQTQPUDPN
    

    View Slide