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

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