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

Renewal of UIT INSIDE beyonds native app and web

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/

LINE Developers
PRO

September 22, 2022
Tweet

More Decks by LINE Developers

Other Decks in Technology

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ͷԻ੠ॻ͖ى͜͠

  14. None
  15. ॻ͖ى͜͠ͷৄࡉ • CLOVA NoteΛ࢖ͬͯॻ͖ى͜͞ΕͨςΩετΛදࣔͯ͠ɺ࠶ੜҐஔ ʹ௥ैͤ͞Δ • PWAͱ͸ؔ܎ͳ͍͚ͲɺΑΓଟ͘ͷ؀ڥͰࢹௌ͢Δͱ͍͏໨త͸ୡ ੒Ͱ͖ͨͷ͔΋……ʁ • ΞΫηγϏϦςΟతͳҙຯͰ΋ྑ͘ͳͬͨ͸ͣ

    https://clovanote.line.me/
  16. PWAతͳ஫໨఺ • PC/SPͳͲʹͱΒΘΕͳ͍ɺ σόΠεͷେ͖͞ʹదͨ͠ ϨΠΞ΢τ

  17. μʔΫϞʔυରԠ

  18. ୺຤ͷઃఆʹԠͨ͡μʔΫϞʔυ • ஍ຯ͚ͩͲ࣮֬ʹΞϓϦͬΆ͞Λग़ͤΔ෦෼

  19. μʔΫϞʔυͷ๨Ε͕ͪͳઃఆ • μʔΫϞʔυ࣌͸جຊtheme-color΋ม͑ͨ΄͏͕ྑͦ͞͏

  20. ΑΓϢʔβʔʹ༏͍͠μʔΫςʔϚ • μʔΫςʔϚͰ͸৭Λ൓సͤ͞Δ͚ͩͰͳ͘ɺͦͷޙͷௐ੔͕ॏཁ

  21. ·ͱΊ • ࠷௿ݶͷରԠ͕͋Ε͹PWAͱͯ͠͸੒Γཱ͚ͭͲɺ͔ͦ͜Βઌͷ ʮΞϓϦΒ͠͞ʯͷͨΊͷվળ͕PWAͷຊ࣭ • Ͳ͏͢Ε͹ΞϓϦΒ͘͠ͳΔ͔ʁ ͸ΞϓϦͷཁ݅࣍ୈ ͍ͭ΋৺ʹPWA