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

WebReplayから見るWeb開発の未来 #builderscon

kyo_ago
September 08, 2018

WebReplayから見るWeb開発の未来 #builderscon

宣伝
・macで「ポインタを自動的に規定のボタンの上に移動する(U)」やるやつ
https://github.com/kyo-ago/Automatically-Move-Mouse-Pointer-To-Default-Button-in-a-dialog-box-for-mac
・Chrome extension上でPuppeteerコードを実行するやつ
https://github.com/kyo-ago/puppeteer-chrome-extension-player

kyo_ago

September 08, 2018
Tweet

More Decks by kyo_ago

Other Decks in Programming

Transcript

  1. WebReplay͔ΒݟΔ
    Web։ൃͷະདྷ
    @kyo_ago

    View Slide

  2. એ఻

    View Slide

  3. kyo-ago/Automatically-Move-
    Mouse-Pointer-To-Default-
    Button-in-a-dialog-box-for-mac
    macͰʮϙΠϯ
    λΛࣗಈతʹن
    ఆͷϘλϯͷ্
    ʹҠಈ͢Δ
    (U)ʯ΍Δ΍ͭ
    Λ࡞Γ·ͨ͠

    View Slide

  4. kyo-ago/puppeteer-
    chrome-extension-player
    Chrome
    extension্Ͱ
    Puppeteer
    ίʔυΛ࣮ߦ
    ͢Δ΍ͭΛ࡞
    Γ·ͨ͠

    View Slide

  5. WebReplayͱ͸
    Կ͔ʁ

    View Slide

  6. WebReplayͱ͸Կ͔ʁ
    • ͍ΘΏΔTimeTravelDebugging(TTD)

    WindowsͷωΠςΟϒΞϓϦ΍JVM؀ڥͰ࣮૷͋Γ

    • ίʔυͷ࣮ߦঢ়ଶΛཤྺͱͯ͠อ࣋͠ɺʮר͖໭͠ʯ͕Ͱ
    ͖Δ

    • ϒϥ΢βσόοΨʔͷػೳͰ͋ͬͯɺWebඪ४౳ͱ͸ແؔ
    ܎

    View Slide

  7. ͳͥWebReplayͷ
    ࿩Λ͢Δͷ͔ʁ

    View Slide

  8. ͳͥWebReplayͷ
    ࿩Λ͢Δͷ͔ʁ
    • ࠷ۙFirefox nightyʹϑϥά෇͖Ͱೖͬͨ

    ݱঢ়macOSͷΈର৅

    • Web্ͷ৘ใ͸গͳ͍͕࣮ݱͰ͖ͨΒ௒ศརͬΆ͍

    • ݸਓతʹͣͬͱʢ̍̌೥ҐʁʣࣅͨΑ͏ͳ΋ͷΛ࡞Ζ͏ͱ
    ͯͨ͠

    View Slide

  9. WebReplay͸
    ࠓͲ͏͍͏ঢ়ଶͳͷ͔ʁ

    View Slide

  10. WebReplay͸
    ࠓͲ͏͍͏ঢ়ଶͳͷ͔ʁ
    • FirefoxͰ͸࣮ݧత࣮͗ͯ͢༻͸ਏ͍

    ؆୯ͳίʔυ͸ಈ͕࣮͘؀ڥͰͷ࢖༻͸ɻɻɻ

    • WebKit(Safari)Ͱ͸2014೥͘Β͍ʹ࣮૷ཤྺ͋Δ

    ͕ɺ͓ͦΒ͘࡟আࡁΈ

    • Edge͸VisualStudioͱ૊Έ߹ΘͤΔͱಈ͘ʁ

    2015೥͘Β͍ʹղઆಈը͕͋Δ͕ৄࡉෆ໌

    ʢௐ͖ࠪ͠Εͳ͔ͬͨɻɻɻʣ

    View Slide

  11. ͔͜͜Β͸Firefox൛
    WebReplayΛલఏʹ࿩͠·͢
    ʢݕূ͕͠΍͔ͬͨ͢ͷͰʣ

    View Slide

  12. WebReplay͸
    ͳΜͷͨΊʹ͋Δͷ͔ʁ

    View Slide

  13. ΫϥΠΞϯταΠυͷ
    όά࠶ݱͷͨΊ

    View Slide

  14. ΫϥΠΞϯταΠυͷ
    όά࠶ݱͷͨΊ
    • গͳ͘ͱ΋ݱঢ়͸جຊతʹʮه࿥ʯɺʮอଘʯɺʮస
    ૹʯɺʮ࠶ੜʯͷϢʔεέʔεΛ૝ఆͯ͠ΔͬΆ͍

    • υΩϡϝϯτ্Ͱ΋ʮಈ࡞ʹӨڹ͢Δมߋ͸ߦ͑ͳ͍ʯ
    ͱ͍͏આ໌͋Γɻ

    • ࣮ࡍɺม਺ͷࢀর͸Ͱ͖ͯ΋ॻ͖׵͑͸Ͱ͖ͳ͔ͬͨɻ

    View Slide

  15. WebReplayͷ

    ࠓޙͷݟ௨͠͸ʁ

    View Slide

  16. WebReplayͷ

    ࠓޙͷݟ௨͠͸ʁ
    • ҆ఆԽ

    ݱঢ়΄ͬͱ͘ͱ݁ߏམͪΔ

    • ଟ؀ڥαϙʔτ

    macOSҎ֎Ͱ΋ಈ͘Α͏ʹ

    • อଘՄೳͳػೳͷ૿Ճ

    ·ͩະରԠͳૢ࡞͕͋ΔʢVideoܥͱ͔ɺWorkerͱ͔ʣ

    • อଘܗࣜͷվળ

    ݱঢ়࠷௿Ͱ΋27MBͷόΠφϦͳͷͰ΋͏ͪΐͬͱখ͘͞ͳΒͳ͍͔
    ͳɻɻɻ

    View Slide

  17. ͭ·Γʁ

    View Slide

  18. ݱঢ়։ൃϑϩʔʹ
    Өڹ͢ΔػೳͰ͸ͳ͍

    View Slide

  19. ݱঢ়։ൃϑϩʔʹ
    Өڹ͢ΔػೳͰ͸ͳ͍
    • ͦ΋ͦ΋NightlyͰabout:configΛมߋͯ͠༗ޮʹ͢Δػೳ

    • ҆ఆԽͱଟ؀ڥαϙʔτ͚ͩͰ΋਺೥͔͔ΔͷͰ͸

    View Slide

  20. ͜͜·Ͱ
    WebReplayͷ࿩

    View Slide

  21. ͔͜͜Β
    Web։ൃͷະདྷͷ࿩

    View Slide

  22. ࡢࠓͷDevTools͕
    ௒ػೳ๛෋ͳ݅

    View Slide

  23. ࡢࠓͷDevTools͕
    ௒ػೳ๛෋ͳ݅
    • ಛʹ஫໨ͯ͠Δͷ͕ҎԼͷ̏ͭ

    • Live-edit

    • Local Overrides

    • SourceMap

    View Slide

  24. ΋͠WebReplayΛ
    ૊Έ߹ΘͤΕ͹ʁ

    View Slide

  25. ΋͠WebReplayΛ
    ૊Έ߹ΘͤΕ͹ʁ
    • DevTools্Ͱ೚ҙͷঢ়ଶͰετοϓ

    • ͔ͦ͜Βר͖໭͠

    • ίʔυΛमਖ਼ͯ͠࠶ੜ͠௚͢

    View Slide

  26. ͭ·Γ

    View Slide

  27. ʮ͋ͷࠒʯʹ໭ΕΔʂ
    ʮ΋͏Ұ౓΍Γ௚͢ʯ
    ͜ͱ͕Ͱ͖Δʂ

    View Slide

  28. Web։ൃͷະདྷ

    View Slide

  29. ͝ਗ਼ௌ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠

    View Slide