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

WebベースでアプリライクなUI/UXが実現できる「PWA×SPA」という選択肢

t-iri
October 11, 2019

 WebベースでアプリライクなUI/UXが実現できる「PWA×SPA」という選択肢

PWA(with AMP🤔?) + SPA = 次代のUI & UX !!

t-iri

October 11, 2019
Tweet

Other Decks in Programming

Transcript

  1. ͪΐͬͱ͚͔ͩͩΒʜ ʮ৽ׁ௚ૹܭըʯ ▸ ߹ݴ༿ɿถ͔͠ͳ͍ͱɺࢥ͏ͳΑɻ ▸ ৽ׁݝ಺࠷େڃͷ࢈஍௚ૹܕ͓औΓدͤ&$αΠτ ▸ ӡӦɿגࣜձࣾ$ÛOFMXPSLʢچɿ߹ಉձࣾ௚ૹܭըʣ ▸ ։࢝ɿ೥ʙ

    ▸ ग़ళऀ਺ɿʗ঎඼਺ɿʢ4,6਺ɿ ʙʣ ▸ ྲྀ௨ֹʢ೥ʣɿԯ ສԁ ▸ ൃૹ݅਺ʢ೥ʣɿ ݅ ▸ ͝ར༻ՄೳͳϓϥοτϑΥʔϜɿ8FCɾϞόΠϧΞϓϦ
  2. จࣈଟ͗͢ͳ͍ 4&0 4/4 ($1 "41 $1$ 4&4 &'0 8&# $.4

    -57 8% 4&. $1" 14% 044 944 "1* 888 18" ".1 41"
  3. ".1ͱ͸ ".1ʜ"DDFMFSBUFE.PCJMF1BHFT ▸ ୊ͯ͠ɿ໿ଋ͞ΕͨϞόΠϧര଎Ωϟογϯά ▸ ࢖͍ํɿʮ͏ͪͷ8FCαΠτɺ".1ରԠͤͨ͞Αʯ ▸ ओಋɿ(PPHMF ▸ ࣌ظɿ೥ʙ

    ▸ ໨తʢϢʔβʣɿ
 ʮදࣔ଎౓޲্ʯͱʮΤϯήʔδϝϯτͷ޲্ʯ ▸ ໨తʢఏڙଆʣɿ
 ʮΧϧʔηϧදࣔʯͱʮ4&0ޮՌʯ ▸ #JOHɿ0,ʢ೥݄ʙʣɹ:BIPPɿ0,ʢ೥ʣ
  4. 18"ͱ͸ 18"ʜ1SPHSFTTJWF8FC"QQT ▸ ୊ͯ͠ɿ8FCʹΞϓϦͷ69ɻಀ͢ͳϢʔβʔߴΊΖ$7ʂ ▸ ࢖͍ํɿʮ͏ͪͷ8FCαΠτɺ18"ରԠͤͨ͞Αʯ ▸ ओಋɿ(PPHMFɹ࣌ظɿ೥ʙ ▸ ݴޠɿͱʹ͔͘+BWB4DSJQU

    ▸ 44-ඞਢɿɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ (PPHMFʹΑΔৗ࣌44-ӡಈɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ೥ʙ$ISPNF͔Βશ)551αΠτʹܯࠂ ▸ େࣄͳ͜ͱɿʮϒϥ΢βʯΛհͯ͠ಈ࡞͢Δ ▸ ಋೖࣄྫɿʮ5XJUUFSʯʮ*OTUBHSBNʯʮ1JOUFSFTUʯɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ʮ4VVNPʯʮ3FUUZά ϧϝχϡʔεʯʮ೔ܦిࢠ൛ʯʜ
  5. 18"ͱ͸Ωʔϫʔυू 4FSWJDF8PSLFSͷొ࿥ํ๏ ɾ໊শ೚ҙͷ+4ϑΝΠϧΛ࡞੒ʢྫ͑͹TXKTʣ ɾάϩʔόϧΦϒδΣΫτʮ/BWJHBUPSʯʹTFSWJDF8PSLFS͕ଘࡏ͢ Ε͹SFHJTUFS Λίʔϧʂతͳهड़ˣΛ௥Ճ if ('serviceWorker' in navigator)

    { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then(function(registration) { // Registration was successful }, function(err) { // registration failed :( }); }); } ɾϑΝΠϧͷઃஔσΟϨΫτϦˠ௒େࣄʢείʔϓ͕ܾ·Δʣ ˠσ ΟϨΫτϦຖʹҟͳΔ4FSWJDF8PSLFSొ࿥΋Մೳ
  6. 41"ͱ͸ 41"ʜ4JOHMF1BHF"QQMJDBUJPO ▸ ୊ͯ͠ɿ8FCͷषΈΛऔΓআ͘ɻը໘ϫϯλονඇಉظνΣϯδϟʔ ▸ ิ଍ɿϖʔδભҠͳ͠ʹ୯ҰͷϖʔδͰίϯςϯπΛಈత੾Γସ͑ ▸ ࢖͍ํɿʮ͏ͪͷ8FCαΠτɺ41"ରԠͤͨ͞Αʯ ▸ ࣌ظɿʙ೥ʁ͘Β͍͔Β

    ▸ ݴޠɿͱʹ͔͘+BWB4DSJQU ▸ എܠɿɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ 3*"ʢ3JDI*OUFSOFU"QQMJDBUJPOʣͷ୅ସٕज़ͱͯ͠஫໨͕ू·Δɻ )5.-ʢಛʹΠϯλϥΫςΟϒίϯςϯπʣͷීٴʹΑͬͯΑΓҙࣝ͞ ΕΔΑ͏ʹɻࢧ͑ࠎͱͳ͍ͬͯΔͷ͸"KBYɾ8FC4PDLFUɻɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ೥ʮ(PPHMF.BQʯˠͳʹ͜Ε΍͹ɻ͍ͭಡΈࠐΜͰΜͷɻ ▸ େࣄͳ͜ͱɿ6*͸ΠέͯΔɻ͕ɺ4&0ʢಛʹϝλʣʹཁ஫ҙʂ