Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GyaPC::Asia Tokyo 2016 LT

daiiz
November 23, 2016

GyaPC::Asia Tokyo 2016 LT

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

daiiz

November 23, 2016
Tweet

More Decks by daiiz

Other Decks in Programming

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