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

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

ࣗݾ঺հ

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

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

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

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

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

શ෦ΪϦΪϦ

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

౰બϝʔϧɿ10िؒલ

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

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

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

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

ύοΩϯάɿग़ൃ4࣌ؒલ͔Β

׵ۚɿ͠ͳ͔ͬͨ

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

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

৯ࣄɿͦͷ౎౓

τϥϒϧू

͋Εʁ͓౔࢈͕ͳ͍

͋ΕʁαΠϑ͕ͳ͍

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

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

͋Εʁඈߦػ͕͍ͳ͍

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

Delta AirlinesͷΈͳ͞· ͋Γ͕ͱ͏͍͟͝·͢

From JapanͷFacebookάϧʔϓ

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

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

Safari 12 and WebKit

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

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

WebKit: 50% of mobile in Japan

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

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

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

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

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

Videos in Image Elements

<video> Ͱ͍͍ͷͰ͸ʁ

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

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

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

https://cloudinary.com/blog/evolution_of_img_gif_without_the_gif

Fullscreen API on iPad

<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>

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

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

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

Web AR

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

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

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

Step 1

Step 2

Step 3

Step 4

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

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

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

https://inside.dmm.com/

ギリギリでもなんとかなるWWDC＆Safari 12 and WebKit (and Web ...

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

More Decks by Futa Ogawa

Other Decks in Technology

Featured

Transcript