ギリギリでもなんとかなるWWDC＆Safari 12 and WebKit (and Web AR) / WWDC18JP

小川楓太 - DMM.com LLC

2018/06/18
【DMM meetup】Apple WWDC 2018 報告会
https://dmmcj.connpass.com/event/88801/

#WWDC18JP

Transcript

1. ΪϦΪϦͰ΋ͳΜͱ͔ͳΔWWDC
   ˍ
   Safari 12 and WebKit (and Web AR)
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. DMM.comάϧʔϓ ձ௕ࣨʗ
   NEWPEACE Inc. ڞಉ૑ۀऀɾςΫχΧϧσΟϨΫλʔ
   খ઒෨ଠ
   •1995೥ੜ·Εͷ23ࡀ
   •޷͖ͳςΫϊϩδʔ
   •JavaScript (Virtual DOM)
   •Firebase
   •CDN
   •HLS
   

   View Slide

4. View Slide

5. ʢࢀՃऀͷΈͳ͞·ʣ
   WWDCͷ४උ͸͍͔ͭΒ࢝Ί·͔ͨ͠ʁ
   

   View Slide

6. ͔ͬ͠Γ४උͯ͠Δϒϩά͕͍ͬͺ͍
   

   View Slide

7. ࣗ෼͸ඈߦػνέοτΛऔͬͨ
   ͷ͕ग़ൃ2िؒલͰͨ͠
   

   View Slide

8. ࠷ऴ೔ͷϗςϧΛ༧໿ͨ͠ͷ͸
   ݱ஍Ͱധ·Δલ೔ɻɻ
   

   View Slide

9. શ෦ΪϦΪϦ
   

   View Slide

10. ͔ͬ͠Γ४උ͠ͳͯ͘΋
    ͳΜͱ͔ͳͬͨ࿩Λ͠·͢ʂ
    ͳΜͱ͔ͳΒͳ͔ͬͨ࿩΋͠·͢
    

    View Slide

11. ౰બϝʔϧɿ10िؒલ
    

    View Slide

12. © DMM.com Labo Co., Ltd.
    !12
    

    View Slide

13. ձࣾʹߦ͖͍ͨࢫΛ఻͑Δɿ
    3िؒલ
    

    View Slide

14. ΫϨδοτΧʔυͷਃ͠ࠐΈɿ
    3िؒલ
    

    View Slide

15. ॓ധ৔ॴɺESTAɺඈߦػɿ
    2िؒલ
    

    View Slide

16. View Slide

17. ΫϨδοτΧʔυͷΩϟογϯά࿮
    Λ࡞Δɿ1िؒલ
    ʢ݁Ռɺؒʹ߹Θͣʣ
    

    View Slide

18. ύοΩϯάɿग़ൃ4࣌ؒલ͔Β
    

    View Slide

19. ׵ۚɿ͠ͳ͔ͬͨ
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. ձ৔΁ͷҠಈखஈɿ౸ணޙ
    Uber? Lift?
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. ݟΔηογϣϯબͼɿ౰೔
    

    View Slide

30. ৯ࣄɿͦͷ౎౓
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. τϥϒϧू
    

    View Slide

35. ͋Εʁ͓౔࢈͕ͳ͍
    

    View Slide

36. View Slide

37. ͋ΕʁαΠϑ͕ͳ͍
    

    View Slide

38. View Slide

39. αΠϑΛͳͯ͘͠͠·ͬͨͷͰ͕͢…
    &ࠓ೔͸΋͏Ϋϩʔζ͔ͨ͠Β໌೔དྷ͍ɻ
    

    View Slide

40. Hotel Marriott San JoseͷΈͳ͞·
    ͋Γ͕ͱ͏͍͟͝·͢
    

    View Slide

41. ͋Εʁඈߦػ͕͍ͳ͍
    

    View Slide

42. Delta AirlinesͷΞϓϦ͕༏लͳͷͰ༉அ͍ͯͨ͠
    

    View Slide

43. View Slide

44. Delta AirlinesͷΈͳ͞·
    ͋Γ͕ͱ͏͍͟͝·͢
    

    View Slide

45. From JapanͷFacebookάϧʔϓ
    

    View Slide

46. From JapanάϧʔϓͷΈͳ͞·
    ͋Γ͕ͱ͏͍͟͝·͢
    

    View Slide

47. ·ͱΊ
    • ΩονϦ༧ఆΛ૊Έ͗͢ΔΑΓ΋ྟػԠมʹ༧ఆΛܾΊΔख΋͋Δ
    • ඞͣ΍Γ͍ͨ͜ͱ͸ࣄલʹ໨੕Λ͚͓ͭͯ͘
    • τϥϒϧʹૺ۰ͯ͠΋߄ͯͣྫྷ੩ʹରԠ͢Ε͹ͳΜͱ͔ͳΔ
    

    View Slide

48. Safari 12 and WebKit
    

    View Slide

49. Safariͷಈ޲ͬͯ
    ௥͏ඞཁ͋Δʁ
    

    View Slide

50. IDC Japanʮ2018೥ୈ1࢛൒ظ ࠃ಺εϚʔτϑΥϯग़ՙ୆਺ ϕϯμʔผ γΣΞʯΑΓ
    

    View Slide

51. WebKit:
    50% of mobile in Japan
    

    View Slide

52. Session 234:
    What’s New in Safari and WebKit ΑΓ
    

    View Slide

53. Security
    •
    WKWebView
    •
    Safari Extensions
    •
    Subresource Integrity
    •
    Intelligent Tracking Prevention
    •
    Automatic Strong Passwords
    •
    Security Code AutoFill
    

    View Slide

54. Performance
    •
    Font collections
    •
    font-display descriptor
    •
    Videos in image elements
    •
    Passive event listeners
    •
    Async image decoding
    •
    Beacon API
    

    View Slide

55. Rich Experience
    •
    Drag and drop
    •
    Payment Request API
    •
    Service Worker API
    •
    Fullscreen API on iPad
    •
    AR Quick Look + Safari
    •
    watchOS
    

    View Slide

56. ࠷΋Ξπ͍ͷ͸
    one-time-codeͷAutoFill
    Ͱ͕͢͜Ε͸LT 5Ͱৄ͘͠ղઆ͞Ε͍ͯΔͱࢥ͏ͷͰ৮Ε·ͤΜ
    

    View Slide

57. Videos in Image Elements
    

    View Slide

58. 
    
    
    

    View Slide

59. View Slide

60. Ͱ͍͍ͷͰ͸ʁ
    

    View Slide

61. View Slide

62. iOSͰಈը͕ࣗಈ࠶ੜͰ͖Δ
    

    View Slide

63. • ΞχϝʔγϣϯGIFͷ୅ସΛ૝ఆʢGIFൺ90%Ҏ্ͷܰྔԽʣ
    • ղ૾౓ͷߴ͗͢Δಈըɺ࠶ੜ࣌ؒͷ௕͗͢Δಈը͸ࢭ·Δ
    • Ի͸ग़ͳ͍
    • ࠶ੜ੍ޚ͸Ͱ͖ͳ͍
    • H.264ͰΤϯίʔυ͞ΕͨMP4ݶఆ
    • H.265 / HEVCʹ͸ඇରԠ
    • CSSͷ `background-image` ͱͯ͠΋ࢦఆՄೳ
    

    View Slide

64. Safari 11.1͔Βར༻Մೳ
    2018/04ʹϦϦʔεࡁΈ
    

    View Slide

65. https://cloudinary.com/blog/evolution_of_img_gif_without_the_gif
    

    View Slide

66. Fullscreen API on iPad
    

    View Slide

67. 
    
    ϑϧεΫϦʔϯʂ
    
    Start Fullscreen
    <br/>document.getElementById("start").addEventListener("click", () => {<br/>document.getElementById("fullscreen-<br/>components").webkitRequestFullscreen();<br/>});<br/>
    
    

    View Slide

68. View Slide

69. https://www.youtube.com/watch?v=FNGSsXDom4U
    iOS 12.0
    

    View Slide

70. http://www.nicovideo.jp/watch/so32567840
    iOS 11.4
    

    View Slide

71. • iPadݶఆ
    • iPhoneͰ͸ґવಈ࡞͠ͳ͍
    • iPad޲͚WebΞϓϦέʔγϣϯͰࣸਅΪϟϥϦʔ΍ϓϨθϯςʔγϣϯ
    Λຊ֨తʹ࣮ݱͰ͖ΔΑ͏ʹͳΔ
    • PC޲͚ʹϑϧεΫϦʔϯΛ࡞ΓࠐΜͰ͍ͨαʔϏε͸ಛʹରԠඞཁͳ͠
    • ͋͑ͯϑϧεΫϦʔϯԽ͠ͳ͍Α͏࡞ΓࠐΜͰ͍ͨαʔϏεʢྫɿχί
    χίʣ͸ରԠ͕ඞཁ
    

    View Slide

72. Web AR
    

    View Slide

73. iOS Safari 12 built-in Web AR
    File format: USDZ
    

    View Slide

74. `$ xcran usdz_converter`
    USDZϑΝΠϧʹม׵͢ΔίϚϯυ
    

    View Slide

75. `$ xcran usdz_converter`
    • ୅දతͳ3DͷϑΝΠϧϑΥʔϚοτʹରԠ
    • OBJ file
    • Single-frame Alembic (ABC) file
    • USD file (either .usda or .usdc)
    • Xcode 10ʹ෇ଐ
    

    View Slide

76. Step 1
    

    View Slide

77. Step 2
    

    View Slide

78. Step 3
    

    View Slide

79. Step 4
    

    View Slide

80. ೔ຊޠϑΝΠϧʹؔ͢Δ
    όάͰ࣮ݱͤͣ……ɻ
    

    View Slide

81. ·ͱΊ
    • Safari΋ணʑͱਐԽ͍ͯ͠Δ
    • ͜Ε·ͰiOSͰ੍ݶ͞Ε͍ͯͨػೳ΋ղ์͞Ε͖͍ͯͯΔ
    • iOSͷػೳ੍ݶʹԊͬͯಠࣗͷػೳ௥Ճ΋ߦΘΕͭͭ͋Δ
    • Web VR͸ͲΕ͚ͩUSDZϑΝΠϧͷ࡞੒Λ؆୯ʹͰ͖Δ͔͕ϙΠϯτʹ
    ͳΓͦ͏
    

    View Slide

82. DMMͰ͸iOSΤϯδχΞͷ
    ࠾༻΋ੵۃతʹߦͳ͓ͬͯΓ·͢ʂ
    ͝ڵຯͷ͋Δํ͸࠙਌ձͰͥͻ͓੠͕͚͍ͩ͘͞
    

    View Slide

83. View Slide

84. View Slide

85. https://inside.dmm.com/
    

    View Slide