GyaPC::Asia Tokyo 2016 LT

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