$30 off During Our Annual Pro Sale. View Details »

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. 8FCϕʔεͰΞϓϦϥΠΫͳ 6*ʗ69͕࣮ݱͰ͖Δ ʮ18"º41"ʯͱ͍͏બ୒ࢶ ೥݄೔ .PCJMF$SFX/JJHBUB

  2. 8)0*4

  3. ɹʮΕͬϨεϙϯγϒʂʯ 8)0*4͸*1ΞυϨε΍υϝΠϯ໊ͷར༻ऀΛݕࡧ͢ΔͨΊͷ࢓૊ΈͰ͢ɻ ͍Γ͞Θˏ$ÛOFMXPSL ✓ ৽ׁʹҠॅ͍͍ͯͩͨ͠೥ ✓ 8FC͍͍ͩͨ೥ ✓ ۀ຿ݴޠʮ1)1ʷ.Z42-ʯʮ81ʯ ✓

    &$αʔϏεʮ৽ׁ௚ૹܭըʯ ✓ ؔ৺ࣄʮ"84ʯ ϞόΠϧͱ͍͑͹
  4. ʘ͹͹ʔΜʗ ͝ΊΜͳ͍͞

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

    ▸ ग़ళऀ਺ɿʗ঎඼਺ɿʢ4,6਺ɿ ʙʣ ▸ ྲྀ௨ֹʢ೥ʣɿԯ ສԁ ▸ ൃૹ݅਺ʢ೥ʣɿ ݅ ▸ ͝ར༻ՄೳͳϓϥοτϑΥʔϜɿ8FCɾϞόΠϧΞϓϦ
  6. ΞϓϦ΋͋Γ㽂 J04"OESPJEˠ 8FCˠ 8FC7JFXʂ

  7. ຊ୊௚લͷΞφ΢ϯε ࿩ͷίϯηϓτ ɾ18"ʁ41"ʁ಄Ͱ੔ཧ͕௥͍͍͍ͭͯͳ͍ਓ޲͚ ɾ֓೦తͳཁૉଟΊɻ༻ޠͷΠϝʔδΛ಄ʹ ɾ18"ʷ41"΁౿Έग़͢Ұาʂ ಛஈ৮Εͳ͍͜ͱ ɾݴޠ͕Ͳ͏ͱ͔ίʔυతͳਂ۷Γ ɾ࣮૷࣌ͷ஫ҙ఺ͩͱ͔ςΫχΧϧͳ໘ ɾωΠςΟϒΞϓϦͱͷൺֱʢͰ͖ͳ͍ʣ

  8. ຊ୊

  9. จࣈଟ͗͢ͳ͍ 4&0 4/4 ($1 "41 $1$ 4&4 &'0 8&# $.4

    -57 8% 4&. $1" 14% 044 944 "1* 888 18" ".1 41"
  10. Կ͔ଟ͍ʂ

  11. ".1ͱ͸ ".1ʜ"DDFMFSBUFE.PCJMF1BHFT ▸ ୊ͯ͠ɿ໿ଋ͞ΕͨϞόΠϧര଎Ωϟογϯά ▸ ࢖͍ํɿʮ͏ͪͷ8FCαΠτɺ".1ରԠͤͨ͞Αʯ ▸ ओಋɿ(PPHMF ▸ ࣌ظɿ೥ʙ

    ▸ ໨తʢϢʔβʣɿ
 ʮදࣔ଎౓޲্ʯͱʮΤϯήʔδϝϯτͷ޲্ʯ ▸ ໨తʢఏڙଆʣɿ
 ʮΧϧʔηϧදࣔʯͱʮ4&0ޮՌʯ ▸ #JOHɿ0,ʢ೥݄ʙʣɹ:BIPPɿ0,ʢ೥ʣ
  12. ྫ͑͹ʁ

  13. ".1ͱ͸ ʮே೔৽ฉʯ ʮ࢈ܦχϡʔεʯ ʮຖ೔৽ฉʯ ɹˠهࣄίϯςϯπܥ

  14. ".1ͱ͸ ʮே೔৽ฉʯ ʮ࢈ܦχϡʔεʯ ʮຖ೔৽ฉʯ ɹˠهࣄίϯςϯπܥ ΞΫηε͢Δͱ (PPHMFυϝΠϯʢʂʣͷ Ωϟογϡϖʔδ΁ IUUQTXXXHPPHMFDPNBNQTXXXBTBIJDPN

  15. Ͳ͏΍Δͷʁ

  16. ".1ͱ͸ )5.-ʴ$44ʴ+BWB4DSJQU ʢ".1࢓༷͔ͭΠϯϥΠϯʹݶΔʣ EPDUZQFIUNM IUNMBNQMBOHlKBz IFBE TDSJQUBTZODTSDldWKTzTDSJQU TUZMFBNQCPJMFSQMBUFͳΜ͔͍ͬͺ͍TUZMF TUZMFBNQDVTUPNCPEZ\EJTQMBZOPOF^TUZMF CPEZ

    I)")")"I BNQJNBHFTSDlBCDKQHzXJEUIlzIFJHIUlzBNQJNBHF BNQZPVUVCFBNQZPVUVCF CPEZ
  17. ".1ͱ͸ Θ͋͋͋͋

  18. ".1ͱ͸ ಾͷڋ൱ײ

  19. ".1ͱ͸ ɾ".1ͷޡղΛ෷১͢Δ IUUQTEFWFMPQFSTKQHPPHMFCMPHDPN BNQIUNM ʼ͍·΍".1͸".1Ͱ͋Γɺ"DDFMFSBUFE.PCJMF1BHFT ʢߴ଎ϞόΠϧϖʔδʣΛࢦ͢΋ͷͰ͸ͳ͘ͳ͍ͬͯ·͢ɻ ".1͸ϞόΠϧ͚ͩͷ΋ͷͰ͸͋Γ·ͤΜɻ ͓͓ͬ͏

  20. 18"ͱ͸ 18"ʜ1SPHSFTTJWF8FC"QQT ▸ ୊ͯ͠ɿ8FCʹΞϓϦͷ69ɻಀ͢ͳϢʔβʔߴΊΖ$7ʂ ▸ ࢖͍ํɿʮ͏ͪͷ8FCαΠτɺ18"ରԠͤͨ͞Αʯ ▸ ओಋɿ(PPHMFɹ࣌ظɿ೥ʙ ▸ ݴޠɿͱʹ͔͘+BWB4DSJQU

    ▸ 44-ඞਢɿɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ (PPHMFʹΑΔৗ࣌44-ӡಈɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ೥ʙ$ISPNF͔Βશ)551αΠτʹܯࠂ ▸ େࣄͳ͜ͱɿʮϒϥ΢βʯΛհͯ͠ಈ࡞͢Δ ▸ ಋೖࣄྫɿʮ5XJUUFSʯʮ*OTUBHSBNʯʮ1JOUFSFTUʯɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ʮ4VVNPʯʮ3FUUZά ϧϝχϡʔεʯʮ೔ܦిࢠ൛ʯʜ
  21. ཧ૝

  22. ʮ'BTUʯ ʮ*OUFHSBUFEʯ ʮ3FMJBCMFʯ ʮ&OHBHJOHʯ '*3& ͩ Google 18"ͱ͸'*3&

  23. 'BTUɿߴ଎ੑ Google 18"ͱ͸'*3& ಡΈࠐΈʹʮඵʯҎ্ֻ͔Ε͹ʮׂʯͷϢʔβ͕཭୤͢Δɻ ϖʔδαΠζɾϦιʔε͸೥ʑ૿͑ͯΔɻগ͠͸અ໿͠ΖΑɻ ͦͷͨΊʹ͸4FSWJDF8PSLFSʹΑΔ&GGFDUJWFͳ$BDIFઓུΛʜ

  24. ͳΜͯʁ

  25. *OUFHSBUFEɿ04ڃͷಈ࡞ײ Google 18"ͱ͸'*3& ʮϗʔϜը໘ʯ͔Βىಈɻϒϥ΢βˠλϒͩͳΜͯ΋͏ݹ͍ɻ ʮϑϧεΫϦʔϯʯͰϦονͳମݧɻ8FC"1*ͰࠩΛ͚ͭΖɻ ωΠςΟϒΞϓϦͷಈ࡞ײ໋͕ɻϒϥ΢βΛײͤ͡͞ΔͳΑɻ

  26. ϞόΠϧͰྑ͍ͷͰ͸ ·͋·͋

  27. 3FMJBCMFɿ৴པੑ Google 18"ͱ͸'*3& ωοτϫʔΫঢ়ଶʹґΒͳ͍ىಈɾૢ࡞͕Մೳɻ௒େࣄɻ ௨৴؀ڥ͕҆ఆͨ͠ࠃɾ஍Ҭ͹͔Γͩͱࢥ͏ͳΑɻ ͦͷͨΊʹ͸4FSWJDF8PSLFS͕$MJFOU4JEFͷ1SPYZͱͯ͠ಇʜ

  28. ·ͨɺͳΜ͔Ͱ͖ͯͨ

  29. &OHBHJOHɿ௫ΜͰ์͞ͳ͍ Google 18"ͱ͸'*3& ʮϗʔϜը໘ʯͰىಈɻखܰ͞Ͱັྃɻ"QQ4UPSF͸΋͏ෆཁɻ ΞϓϦͷڑ཭ײɻʮϓογϡ௨஌ʯΛ׆༻ͯ͠୤8FCαΠτͩɻ ͦͷͨΊʹ͸8FC"QQ.BOJGFTUΛཱͯͯ4DSFFO*DPOΛʜ

  30. 0, (PPHMF

  31. ڧҾʹ·ͱΊͨ

  32. 18"ͱ͸Ωʔϫʔυू Ωʔϫʔυɿʮ4FSWJDF8PSLFSʯ Ωʔϫʔυɿʮ8FC"QQ.BOJGFTUʯ Ωʔϫʔυɿʮ8FC1VTI/PUJpDBUJPOTʯ Ωʔϫʔυɿʮ-JHIUIPVTFʯ Ωʔϫʔυɿʮ0GqJOF&YQFSJFODFʯ Ωʔϫʔυɿʮ"EEUP)PNF4DSFFOʯ

  33. 18"ͱ͸Ωʔϫʔυू Ωʔϫʔυɿʮ4FSWJDF8PSLFSʯ ɾ18"ͷΩϞɻωοτϫʔΫϓϩΩγʢ1SPYZɿ୅ཧਓʣ ɾ୺຤ͷόοΫάϥ΢ϯυ্Ͱಈ࡞͢ΔεΫϦϓτ ɾ+BWB4DSJQUͰ࡞੒ɻ8FC8PSLFSͷͭ ɾ୺຤ଆͷΩϟογϡΛ੍ޚՄೳ ɾʮ)5514ʯPOMZ ɾ͋͘·Ͱϒϥ΢βΛհͯ͠ಈ࡞ ɾ8FCϖʔδͱ͸ҟͳΔಠࣗϥΠϑαΠΫϧ

  34. 18"ͱ͸Ωʔϫʔυू Ҿ༻ݩɿ$SFBUJOH0GqJOF'JSTU8FC"QQTXJUI4FSWJDF8PSLFST IUUQTBVUIDPNCMPHDSFBUJOHPGqJOFpSTUXFCBQQTXJUITFSWJDFXPSLFST

  35. 18"ͱ͸Ωʔϫʔυू Ҿ༻ݩɿ4FSWJDF8PSLFSͷ঺հ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQSJNFSTTFSWJDFXPSLFST ʮ*OTUBMMJOH͕׬ྃʯ ˠΞηοτͷΩϟογϡ׬ྃɻ ΞϓϦͱͯ͠Πϯετʔϧ͞Ε ͨঢ়ଶʂ ʮ*EMFʯ ˠόοΫάϥ΢ϯυ଴ػঢ়ଶ

  36. 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ొ࿥΋Մೳ
  37. 18"ͱ͸Ωʔϫʔυू Ωʔϫʔυɿʮ8FC"QQ.BOJGFTUʯ ɾΞϓϦͱͯ͠ͷએݴϑΝΠϧʮNBOJGFTUKTPOʯ ɾJDPO৘ใ΍ΒTUBSU@VSM΍Β ɾදࣔܗࣜʢEJTQMBZʣͷࢦఆ΋ ˠʮGVMMTDSFFOʯʮTUBOEBMPOFʯʮNJOJNBMVJʯʜ ɾΧϥʔ৘ใ΋๨Εͣʹ ˠʮUIFNF@DPMPSʯʮCBDLHSPVOE@DPMPSʯ ɾPSJFOUBUJPO΋Ͷ

  38. 18"ͱ͸Ωʔϫʔυू ϞόΠϧΞϓϦײ ˡهड़ྫ

  39. 18"ͱ͸Ωʔϫʔυू Ωʔϫʔυɿʮ"EEUP)PNF4DSFFOʯ ɾʮϗʔϜը໘ʹ௥Ճʯɻ͏Μ ɾγϣʔτΧοτ࡞੒ͱԿ͕͕ͪ͏ͷʁ ɾݟͨํ͕ૣ͍ΑͶʁ ͏Μ☺

  40. 18"ͱ͸Ωʔϫʔυू ը໘খͯ͘͞ ͝ΊΜͳ͍͞ʜ Άͪͬͱͳ :FT)PNF4DSFFO ͍͢͝Ͷʂ ʢΨΫΨΫͯ͠·͢Ͷʣ ը໘্෦ͷ ΞυϨεόʔ͕ͳ͍ʂ

  41. 18"ͱ͸Ωʔϫʔυू Ωʔϫʔυɿʮ8FC1VTI/PUJpDBUJPOTʯ ɾΞϓϦͷఆ൪ɻϓογϡ௨஌ʢ1VTI"1*ʣ ɾ4FSWJDF8PSLFSͷ؅׋ʢόοΫάϥ΢ϯυॲཧʣ ɾ8FCքʹ͸ଘࡏ͠ͳ͔ͬͨըظతػೳ

  42. 18"ͱ͸Ωʔϫʔυू Ωʔϫʔυɿʮ8FC1VTI/PUJpDBUJPOTʯ ɾΞϓϦͷఆ൪ɻϓογϡ௨஌ʢ1VTI"1*ʣ ɾ4FSWJDF8PSLFSͷ؅׋ʢόοΫάϥ΢ϯυॲཧʣ ɾ8FCքʹ͸ଘࡏ͠ͳ͔ͬͨըظతػೳ ϞόΠϧΞϓϦײ ˡهड़ྫ

  43. ͪͳΈʹ

  44. 18"ͱ͸Ωʔϫʔυू ͍ͬͺ͍͋ΔͶʮ8FC"1*ʯ ɾ$BNFSB"1*ʜΧϝϥ ɾ(FPMPDBUJPO"1*ʜҐஔ৘ใ ɾ8FC"VEJP"1*ʜΦʔσΟΦ੍ޚɾϚΠΫ ɾ8FC#MVFUPPUI"1*ʜηϯαʔσʔλ ɾ8FC4IBSF"1*ʜϖʔδγΣΞ ɾ1BZNFOU3FRVFTU"1* 8FC1BZNFOUT ʜ͏ʔΜֵ໋త

    ͳͲͳͲʢ΋ͬͱ͋ΔΑʂʣɻJ04͸ޙखؾຯ
  45. ໭ΔΑ

  46. 18"ͱ͸Ωʔϫʔυू Ωʔϫʔυɿʮ0GqJOF&YQFSJFODFʯ ɾΦϑϥΠϯମݧɻωοτ͕੾Εͯ΋ͱΓ͋͑ͣಈ͘ʂ ɾͪ͜Β΋4FSWJDF8PSLFSͷ؅׋ ˠΦϑϥΠϯ࣌ͷڍಈΛઃܭՄೳ ˠద੾ͳΩϟογϡܭըʹΑΓ&OHBHJOHΛଛΘͳ͍ ˠ͓ͦΒ͘Ұ൪಄Λ೰·ͤΔྖҬɻ࣮૷ଆͷ࿹͕໰Θ ΕΔՕॴʢͲ͜·ͰΛΩϟογϡൣғͱ͢Δ͔ʁ"1*ઃ ܭ͸ʁσʔλઃܭ͸ʁʣ

  47. 18"ͱ͸Ωʔϫʔυू Ωʔϫʔυɿʮ-JHIUIPVTFʯ ɾ18"ͷ։ൃʢ؂ࠪʣπʔϧ ɾ8FC"QQMJDBUJPOͱͯ͠ͷଥ౰ɾਖ਼౰ੑΛνΣοΫ ɾ$ISPNFͷ֦ுػೳͰͺͺͬͱར༻Մ ɾ/PEFϞδϡʔϧ΋͋Γ ɾ"MM*O0OF(PPHMF

  48. ͍΍΋͏͓ෲ͍ͬͺ͍ ΍ͬͯΈΑ͏ʂ

  49. 18"Λͭͬͯ͘ΈΔ ͸͡ΊͯͷϓϩάϨογϒ΢ΣϒΞϓϦ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTDPEFMBCTZPVS pSTUQXBQQ IMKB ɾ؀ڥߏஙΊΜͲ͍ˠ(MJUDIͰ0, ɾϖʔδ͸ͦͦ͜͜ϘϦϡʔϜ ɾͱ͸͍͑ɺ͘͘͞͞ਐΊͯʙ෼͘Β͍ʁ ɾΠϝʔδΛ௫Ήͷʹ͸΋͍ͬͯ͜ ɾͳΜͱ͍͏͔ϗεϐλϦςΟ͕͍͢͝

  50. 18"Λͭͬͯ͘ΈΔ

  51. ͏͓ʔ 18"Λͭͬͯ͘ΈΔ

  52. 18"Λͭͬͯ͘ΈΔ

  53. Ͱ͖ͨʂ

  54. 18"είΞ  ຬ఺ʜʂ 18"ͦͷଞ ʮ"QQTDPQFʯʢ18"ͷ·ͱΊαΠτతͳʣ

  55. 18"ͦͷଞ 18"ΛऔΓר͘࿩୊ ɾ"QQMFͷରԠʜ஗͗͢ʜʁ ɾ(PPHMF1MBZ4UPSFͰ഑৴Ͱ͖Δͧʂ ɾ.JDSPTPGU4UPSF΋͍͚Δͧʂʢͨͩ͠&EHFͷΈʣ ɾ݁ہετΞ͔Α ɾ".1ͱབྷΊΑ͏ͥ ˠʮ".1XJUI18"ʯʮ".1UP18"ʯˠ͏Θ͋͋͋ ɾͲΕબͿʁओཁϥΠϒϥϦɾϑϨʔϜϫʔΫ ˠ8PSLCPY

    (PPHMF "OHVMBS3FBDU /FYUKT 7VF /VYUKT  ˠ͜Εͱ͍ͬͨਖ਼߈๏͸ͳ͠ɻ͝Γ͝ΓࣗલͰ΋࣮૷Մ
  56. 41"͸

  57. 41"ͱ͸ 41"ʜ4JOHMF1BHF"QQMJDBUJPO ▸ ୊ͯ͠ɿ8FCͷषΈΛऔΓআ͘ɻը໘ϫϯλονඇಉظνΣϯδϟʔ ▸ ิ଍ɿϖʔδભҠͳ͠ʹ୯ҰͷϖʔδͰίϯςϯπΛಈత੾Γସ͑ ▸ ࢖͍ํɿʮ͏ͪͷ8FCαΠτɺ41"ରԠͤͨ͞Αʯ ▸ ࣌ظɿʙ೥ʁ͘Β͍͔Β

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

  59. 8FCͷषΈ ͜ΕʮಉظʯભҠ ˣ͜͜ʹ஫໨ ੾ΓସΘΓʢભҠʣ࣌ʹը໘΋ҰॠϗϫΠτʹ

  60. Ұํɺ

  61. 8FCͷषΈ ͜Ε͕ʮඇಉظʯɻ͍͍Ͷ ˣ͜͜ʹ஫໨ Ұ੾͋Ε͕ճΔ͜ͱͷͳ͍շదϩʔσ Οϯά w w

  62. શମͰݟͯΈΑ͏

  63. 41"Πϝʔδ

  64. ૬ੑͷྑ͍ ΞʔΩςΫνϟʢߏஙϞσϧʣ

  65. 41"ͱ૬ੑൈ܈ Ҿ༻ɿ"QQ4IFMMϞσϧ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTBSDIJUFDUVSFBQQTIFMM IMKB "QQ4IFMMϞσϧ ˣ Ωϟογϡ͠ͱ͚͹ྑ͘Ͷʁ ΜͰඇಉظͰऔಘɾ੾Γସ͑Ε͹ྑ͘Ͷˣ ˣ 4FSWJDF8PSLFSʂ

    ˣ ͸͍࣍ճҎ߱ര଎ʙ ͲͷϖʔδͰ΋Ұॹ͡ΌͶʁ
  66. จࣈ௨Γ ΞϓϦʹͳͬͪΌͬͨΑ

  67. ·ͱΊ

  68. จࣈ௨Γ ΞϓϦʹͳͬͪΌͬͨΑ

  69. 18" XJUI".1  41" ࣍୅ͷ6*69 ׬

  70. גࣜձࣾΫʔωϧϫʔΫ Ͱ͸ ࠾༻Λ͕Μ͹͍ͬͯ·͢