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
2. એ఻
3. kyo-ago/Automatically-Move- Mouse-Pointer-To-Default- Button-in-a-dialog-box-for-mac macͰʮϙΠϯ λΛࣗಈతʹن ఆͷϘλϯͷ্ ʹҠಈ͢Δ (U)ʯ΍Δ΍ͭ Λ࡞Γ·ͨ͠
4. kyo-ago/puppeteer- chrome-extension-player Chrome extension্Ͱ Puppeteer ίʔυΛ࣮ߦ ͢Δ΍ͭΛ࡞ Γ·ͨ͠
5. WebReplayͱ͸ Կ͔ʁ
6. WebReplayͱ͸Կ͔ʁ • ͍ΘΏΔTimeTravelDebugging(TTD)
 WindowsͷωΠςΟϒΞϓϦ΍JVM؀ڥͰ࣮૷͋Γ • ίʔυͷ࣮ߦঢ়ଶΛཤྺͱͯ͠อ࣋͠ɺʮר͖໭͠ʯ͕Ͱ ͖Δ • ϒϥ΢βσόοΨʔͷػೳͰ͋ͬͯɺWebඪ४౳ͱ͸ແؔ ܎
7. ͳͥWebReplayͷ ࿩Λ͢Δͷ͔ʁ
8. ͳͥWebReplayͷ ࿩Λ͢Δͷ͔ʁ • ࠷ۙFirefox nightyʹϑϥά෇͖Ͱೖͬͨ
 ݱঢ়macOSͷΈର৅ • Web্ͷ৘ใ͸গͳ͍͕࣮ݱͰ͖ͨΒ௒ศརͬΆ͍ • ݸਓతʹͣͬͱʢ̍̌೥ҐʁʣࣅͨΑ͏ͳ΋ͷΛ࡞Ζ͏ͱ ͯͨ͠
9. WebReplay͸ ࠓͲ͏͍͏ঢ়ଶͳͷ͔ʁ
10. WebReplay͸ ࠓͲ͏͍͏ঢ়ଶͳͷ͔ʁ • FirefoxͰ͸࣮ݧత࣮͗ͯ͢༻͸ਏ͍
 ؆୯ͳίʔυ͸ಈ͕࣮͘؀ڥͰͷ࢖༻͸ɻɻɻ • WebKit(Safari)Ͱ͸2014೥͘Β͍ʹ࣮૷ཤྺ͋Δ
 ͕ɺ͓ͦΒ͘࡟আࡁΈ • Edge͸VisualStudioͱ૊Έ߹ΘͤΔͱಈ͘ʁ
 2015೥͘Β͍ʹղઆಈը͕͋Δ͕ৄࡉෆ໌
 ʢௐ͖ࠪ͠Εͳ͔ͬͨɻɻɻʣ
11. ͔͜͜Β͸Firefox൛ WebReplayΛલఏʹ࿩͠·͢ ʢݕূ͕͠΍͔ͬͨ͢ͷͰʣ
12. WebReplay͸ ͳΜͷͨΊʹ͋Δͷ͔ʁ
13. ΫϥΠΞϯταΠυͷ όά࠶ݱͷͨΊ
14. ΫϥΠΞϯταΠυͷ όά࠶ݱͷͨΊ • গͳ͘ͱ΋ݱঢ়͸جຊతʹʮه࿥ʯɺʮอଘʯɺʮస ૹʯɺʮ࠶ੜʯͷϢʔεέʔεΛ૝ఆͯ͠ΔͬΆ͍ • υΩϡϝϯτ্Ͱ΋ʮಈ࡞ʹӨڹ͢Δมߋ͸ߦ͑ͳ͍ʯ ͱ͍͏આ໌͋Γɻ • ࣮ࡍɺม਺ͷࢀর͸Ͱ͖ͯ΋ॻ͖׵͑͸Ͱ͖ͳ͔ͬͨɻ
15. WebReplayͷ
 ࠓޙͷݟ௨͠͸ʁ
16. WebReplayͷ
 ࠓޙͷݟ௨͠͸ʁ • ҆ఆԽ
 ݱঢ়΄ͬͱ͘ͱ݁ߏམͪΔ • ଟ؀ڥαϙʔτ
 macOSҎ֎Ͱ΋ಈ͘Α͏ʹ • อଘՄೳͳػೳͷ૿Ճ
 ·ͩະରԠͳૢ࡞͕͋ΔʢVideoܥͱ͔ɺWorkerͱ͔ʣ • อଘܗࣜͷվળ
 ݱঢ়࠷௿Ͱ΋27MBͷόΠφϦͳͷͰ΋͏ͪΐͬͱখ͘͞ͳΒͳ͍͔ ͳɻɻɻ
17. ͭ·Γʁ
18. ݱঢ়։ൃϑϩʔʹ Өڹ͢ΔػೳͰ͸ͳ͍
19. ݱঢ়։ൃϑϩʔʹ Өڹ͢ΔػೳͰ͸ͳ͍ • ͦ΋ͦ΋NightlyͰabout:configΛมߋͯ͠༗ޮʹ͢Δػೳ • ҆ఆԽͱଟ؀ڥαϙʔτ͚ͩͰ΋਺೥͔͔ΔͷͰ͸
20. ͜͜·Ͱ WebReplayͷ࿩
21. ͔͜͜Β Web։ൃͷະདྷͷ࿩
22. ࡢࠓͷDevTools͕ ௒ػೳ๛෋ͳ݅
23. ࡢࠓͷDevTools͕ ௒ػೳ๛෋ͳ݅ • ಛʹ஫໨ͯ͠Δͷ͕ҎԼͷ̏ͭ • Live-edit • Local Overrides • SourceMap
24. ΋͠WebReplayΛ ૊Έ߹ΘͤΕ͹ʁ
25. ΋͠WebReplayΛ ૊Έ߹ΘͤΕ͹ʁ • DevTools্Ͱ೚ҙͷঢ়ଶͰετοϓ • ͔ͦ͜Βר͖໭͠ • ίʔυΛमਖ਼ͯ͠࠶ੜ͠௚͢
26. ͭ·Γ
27. ʮ͋ͷࠒʯʹ໭ΕΔʂ ʮ΋͏Ұ౓΍Γ௚͢ʯ ͜ͱ͕Ͱ͖Δʂ
28. Web։ൃͷະདྷ
29. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠