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

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

ギリギリでもなんとかなる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

B1a92722c01c73a58b8db38094a3f23e?s=128

Futa Ogawa

June 18, 2018
Tweet

Transcript

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

  2. ࣗݾ঺հ

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

    DOM) •Firebase •CDN •HLS
  4. None
  5. ʢࢀՃऀͷΈͳ͞·ʣ WWDCͷ४උ͸͍͔ͭΒ࢝Ί·͔ͨ͠ʁ

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

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

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

  9. શ෦ΪϦΪϦ

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

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

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

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

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

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

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

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

  19. ׵ۚɿ͠ͳ͔ͬͨ

  20. None
  21. None
  22. None
  23. None
  24. None
  25. ձ৔΁ͷҠಈखஈɿ౸ணޙ Uber? Lift?

  26. None
  27. None
  28. None
  29. ݟΔηογϣϯબͼɿ౰೔

  30. ৯ࣄɿͦͷ౎౓

  31. None
  32. None
  33. None
  34. τϥϒϧू

  35. ͋Εʁ͓౔࢈͕ͳ͍

  36. None
  37. ͋ΕʁαΠϑ͕ͳ͍

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

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

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

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

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

  45. From JapanͷFacebookάϧʔϓ

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

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

  48. Safari 12 and WebKit

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

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

  51. WebKit: 50% of mobile in Japan

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

  53. Security • WKWebView • Safari Extensions • Subresource Integrity •

    Intelligent Tracking Prevention • Automatic Strong Passwords • Security Code AutoFill
  54. Performance • Font collections • font-display descriptor • Videos in

    image elements • Passive event listeners • Async image decoding • Beacon API
  55. Rich Experience • Drag and drop • Payment Request API

    • Service Worker API • Fullscreen API on iPad • AR Quick Look + Safari • watchOS
  56. ࠷΋Ξπ͍ͷ͸ one-time-codeͷAutoFill Ͱ͕͢͜Ε͸LT 5Ͱৄ͘͠ղઆ͞Ε͍ͯΔͱࢥ͏ͷͰ৮Ε·ͤΜ

  57. Videos in Image Elements

  58. <body> <img src="/dmm.mp4" style="width: 100%;"> </body>

  59. None
  60. <video> Ͱ͍͍ͷͰ͸ʁ

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

  63. • ΞχϝʔγϣϯGIFͷ୅ସΛ૝ఆʢGIFൺ90%Ҏ্ͷܰྔԽʣ • ղ૾౓ͷߴ͗͢Δಈըɺ࠶ੜ࣌ؒͷ௕͗͢Δಈը͸ࢭ·Δ • Ի͸ग़ͳ͍ • ࠶ੜ੍ޚ͸Ͱ͖ͳ͍ • H.264ͰΤϯίʔυ͞ΕͨMP4ݶఆ

    • H.265 / HEVCʹ͸ඇରԠ • CSSͷ `background-image` ͱͯ͠΋ࢦఆՄೳ
  64. Safari 11.1͔Βར༻Մೳ 2018/04ʹϦϦʔεࡁΈ

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

  66. Fullscreen API on iPad

  67. <body> <div id="fullscreen-components"> <h1>ϑϧεΫϦʔϯʂ</h1> </div> <button id="start">Start Fullscreen</button> <script> document.getElementById("start").addEventListener("click",

    () => { document.getElementById("fullscreen- components").webkitRequestFullscreen(); }); </script> </body>
  68. None
  69. https://www.youtube.com/watch?v=FNGSsXDom4U iOS 12.0

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

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

    ͋͑ͯϑϧεΫϦʔϯԽ͠ͳ͍Α͏࡞ΓࠐΜͰ͍ͨαʔϏεʢྫɿχί χίʣ͸ରԠ͕ඞཁ
  72. Web AR

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

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

  75. `$ xcran usdz_converter` • ୅දతͳ3DͷϑΝΠϧϑΥʔϚοτʹରԠ • OBJ file • Single-frame

    Alembic (ABC) file • USD file (either .usda or .usdc) • Xcode 10ʹ෇ଐ
  76. Step 1

  77. Step 2

  78. Step 3

  79. Step 4

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

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

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

  83. None
  84. None
  85. https://inside.dmm.com/