使いどころがムズかしいChromeの機能オリンピック

Transcript

1. 1.

   ࢖͍Ͳ͜Ζ͕ Ϝζ͔͍͠ Chromeͷػೳ ΦϦϯϐοΫ Edward Fox 2018/02/21 @Repro ࣾ಺LTձ

2. 2.

   @edwardkenfox Edward Fox ɾΤϯδχΞ@Reproגࣜձࣾ ɾ୅ʑ໦ͷํ͔Βདྷ·ͨ͠ ɾRuby, JavaScript, AWS ɾϒϥ΢βٕज़શൠ, PWA,

   Vue.js
3. 3.

   ੈؒ͸ΦϦϯϐοΫͰ ੝Γ্͕ͬͯ·͕͢

4. 4.

   ࣮͸ͦͷཪͰ ͜ΜͳΦϦϯϐοΫ͕ ։࠵͞Ε͍ͯͨͷΛ ஌͍ͬͯ·͔ͨ͠ʁ

5. 5.

   ࢖͍Ͳ͜Ζ͕ Ϝζ͔͍͠ Chromeͷػೳ ΦϦϯϐοΫ

6. 6.

   ͨ͘͞Μͷڝٕͱ छ໨͕͋Γ·͕͢

7. 7.

   ͜͜Ͱ͸͍͔ͭ͘ͷछ໨ ͔ΒಔʙۚϝμϧΛ ϐοΫΞοϓͯ͠͝঺հ

8. 8.

   ಔϝμϧ

9. 9.

   ಔϝμϧ ʮconsole.log͸੝ΕΔʯ

10. 10.

    console.log͸೚ҙͷ ΦϒδΣΫτ΍จࣈྻΛ ίϯιʔϧʹग़ྗ͢Δͨ Ίͷϒϥ΢βAPIͱ ࢥΘΕ͍ͯ·͕͢

11. 11.

    ੝Ε·͢

12. 12.

    None
13. 13.

    None
14. 14.

    ʮ͓લͷconsole.log͸ ͭ·ΒΜʯ

15. 15.

    None
16. 16.

    None
17. 17.

    ੝ΕͯΔ

18. 18.

    ಔϝμϧड৆ͷཧ༝: ։ൃ࣌ʹ࢖͏͜ͱ͸ͳ͍

19. 19.

    ۜϝμϧ

20. 20.

    ۜϝμϧ ʮChrome(Desktop)͔Β Chrome(Android)ΛૢΔʯ

21. 21.

    DesktopʹChrome͕ೖͬͨ AndroidΛͭͳ͍Ͱ USBσόοάΛΦϯʹ͢Δͱɺ Desktop ChromeͰ Android Chromeͷ ϦϞʔτσόοά͕Ͱ͖Δػೳ

22. 22.

    ۜϝμϧड৆࣌ͷ༷ࢠΛ ݟͯΈ·͠ΐ͏ ʢσϞʣ

23. 23.

    ۜϝμϧड৆ͷཧ༝: ศར͚ͩͲ ϨΠΞ΢τܥͷσόοά͸ ΄΅DesktopͰ·͔ͳ͑Δ

24. 24.

    JSͷΤϯδϯ΋جຊಉ͚ͩ͡Ͳɺ Android ChromeʹͷΈϙʔτ͞Ε ͍ͯΔػೳΛσόοά͢Δͱ͖ ʹ͸ॏๅͦ͠͏

25. 25.

    ۚϝμϧ

26. 26.

    ۚϝμϧ ʮLayersʯ

27. 27.

    DOMߏ଄Λ 3DͰϏδϡΞϥΠζͯ͠ άϦάϦͰ͖Δػೳ

28. 28.

    ۚϝμϧड৆ͷԋٕΛ ݟͯΈ·͠ΐ͏ ʢσϞʣ

29. 29.

    None
30. 30.

    ۚϝμϧड৆ͷཧ༝: ͓΋͠Ζ͍͚Ͳ ΁ʙʙͬͯோΊΔ͘Β͍ ͔͠࢖Θͳ͔ͬͨ

31. 31.

    z-indexΛௐࠪͨ͠Γ parallaxͱ͔ͷࢹ֮ޮՌ ΛΰϦΰϦ࢖͏ͱ͖ʹ͸ ศར͔΋

32. 32.

    ͱ͍͏Θ͚Ͱ

33. 33.

    ΦϦϯϐοΫดձ

34. 34.

    ࣍͸2020೥ ౦ژͰ ձ͍·͠ΐ͏

35. 35.

    ͋Γ͕ͱ͏͍͟͝·ͨ͠