Renewal of UIT INSIDE beyonds native app and web

「UIT INSIDEリニューアル そしてネイティブアプリとWebの境界」
LINE株式会社 フロントエンドエンジニア
Tamada Akihiro

PWA Night vol.43 ～Web技術でここまで出来る〜
https://pwanight.connpass.com/event/258205/

Transcript

1. UIT INSIDEϦχϡʔΞϧ ͦͯ͠ωΠςΟϒΞϓϦͱ Webͷڥք PWA Night vol. 43 2022.09.21 / @spring-raining
2. ࣗݾ঺հ • HN: spring-raining (͸Δ͞Ί) / Tamada Akihiro • LINEגࣜձࣾ ϑϩϯτΤϯυΤϯδχΞ • UIT INSIDEͷωλΛߟ͑ͨΓ࿩Λͨ͠Γ͍ͯ͠·͢
3. What’s UIT INSIDE? • https://uit-inside.linecorp.com • 2019೥ͷ͸͡Ί͔Β࢝·ͬͨɺLINEͷϑϩϯτΤϯυ૊৫UITʹΑΔ Podcast • WebϑϩϯτΤϯυʹؔ͢Δ࿩୊Λத৺ʹɺݱࡏ·ͰͰྦྷܭ130Τϐ ιʔυΛެ։
4. https://github.com/webmaxru/progressive-web-apps-logo
5. ͱ͜ΖͰPWAͬͯͳΜ͚ͩͬ……ʁ • “ϓϩάϨογϒ΢ΣϒΞϓϦ (Progressive web apps, PWA) ͸ɺ৽͠ ͍΢Σϒ API ͱ఻౷తͳϓϩάϨογϒͳ֦ுઓུΛ࢖༻ͯ͠ɺΫϩ εϓϥοτϑΥʔϜͷ΢ΣϒΞϓϦέʔγϣϯʹωΠςΟϒΞϓϦͱ ಉ༷ͷ࢖͍উखΛ΋ͨΒ͢΢ΣϒΞϓϦͷ͜ͱͰ͢ɻ” https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps
6. UIT INSIDE͸Ҏલ͔ΒPWAʹͳ͍ͬͯͨ • manifest.jsonɺsw.js ઃஔ • ΞΠίϯɺςʔϚΧϥʔͷઃఆ • ଞʹPWAͷͨΊʹ΍Δ͜ͱͱ͸……ʁ
7. ωΠςΟϒΞϓϦͱWebͷڥք
8. ͳΜͱͳ͘WebͬΆ͍ɾΞϓϦͬΆ͍ͱࢥ͏෦෼ • ϨΠΞ΢τɾUI͕ΞϓϦͬΆ͘ͳ͍ • εΫϩʔϧ͕ͳΊΒ͔Ͱͳ͍ͱWebͬΆ͍ • SPAʹͳ͓ͬͯΒͣϖʔδભҠͰಡΈࠐΈ͕ൃੜ͢ΔɾSPAʹͳͬͯ ͍ͯ΋ϖʔδભҠ͕มͩͱWebͬΆ͍
9. ʮͳΜͱͳ͘WebͬΆ͍ʯ෦෼Λ ແ͍ͯ͘͘͠
10. MediaSession API
11. ϝσΟΞϓϨΠϠʔͷͨΊͷAPI • ಈը΍Ի੠ͷ࠶ੜ΍Ұ࣌ఀࢭΛίϯτϩʔϧͰ͖ΔɺUIT INSIDEͷͨ Ίʹ͋Δ͔ͷΑ͏ͳAPI
12. ϒϥ΢βɾOSͷϝσΟΞ௨஌ͱ࿈ܞ • MediaSession APIʹ͸MediaMetadata (λΠτϧɾΞʔςΟετͳͲ) ΋ઃఆ Ͱ͖Δ • @potato4d͕2022೥3݄ࠒʹରԠ
13. PodcastͷԻ੠ॻ͖ى͜͠
15. ॻ͖ى͜͠ͷৄࡉ • CLOVA NoteΛ࢖ͬͯॻ͖ى͜͞ΕͨςΩετΛදࣔͯ͠ɺ࠶ੜҐஔ ʹ௥ैͤ͞Δ • PWAͱ͸ؔ܎ͳ͍͚ͲɺΑΓଟ͘ͷ؀ڥͰࢹௌ͢Δͱ͍͏໨త͸ୡ ੒Ͱ͖ͨͷ͔΋……ʁ • ΞΫηγϏϦςΟతͳҙຯͰ΋ྑ͘ͳͬͨ͸ͣ https://clovanote.line.me/
16. PWAతͳ஫໨఺ • PC/SPͳͲʹͱΒΘΕͳ͍ɺ σόΠεͷେ͖͞ʹదͨ͠ ϨΠΞ΢τ
17. μʔΫϞʔυରԠ
18. ୺຤ͷઃఆʹԠͨ͡μʔΫϞʔυ • ஍ຯ͚ͩͲ࣮֬ʹΞϓϦͬΆ͞Λग़ͤΔ෦෼
19. μʔΫϞʔυͷ๨Ε͕ͪͳઃఆ • μʔΫϞʔυ࣌͸جຊtheme-color΋ม͑ͨ΄͏͕ྑͦ͞͏
20. ΑΓϢʔβʔʹ༏͍͠μʔΫςʔϚ • μʔΫςʔϚͰ͸৭Λ൓సͤ͞Δ͚ͩͰͳ͘ɺͦͷޙͷௐ੔͕ॏཁ
21. ·ͱΊ • ࠷௿ݶͷରԠ͕͋Ε͹PWAͱͯ͠͸੒Γཱ͚ͭͲɺ͔ͦ͜Βઌͷ ʮΞϓϦΒ͠͞ʯͷͨΊͷվળ͕PWAͷຊ࣭ • Ͳ͏͢Ε͹ΞϓϦΒ͘͠ͳΔ͔ʁ ͸ΞϓϦͷཁ݅࣍ୈ ͍ͭ΋৺ʹPWA