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

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

ɹʮΕͬϨεϙϯγϒʂʯ 8)0*4͸*1ΞυϨε΍υϝΠϯ໊ͷར༻ऀΛݕࡧ͢ΔͨΊͷ࢓૊ΈͰ͢ɻ ͍Γ͞Θˏ$ÛOFMXPSL ✓ ৽ׁʹҠॅ͍͍ͯͩͨ͠೥ ✓ 8FC͍͍ͩͨ೥ ✓ ۀ຿ݴޠʮ1)1ʷ.Z42-ʯʮ81ʯ ✓
&$αʔϏεʮ৽ׁ௚ૹܭըʯ ✓ ؔ৺ࣄʮ"84ʯ ϞόΠϧͱ͍͑͹

ʘ͹͹ʔΜʗ ͝ΊΜͳ͍͞

ͪΐͬͱ͚͔ͩͩΒʜ ʮ৽ׁ௚ૹܭըʯ ▸ ߹ݴ༿ɿถ͔͠ͳ͍ͱɺࢥ͏ͳΑɻ ▸ ৽ׁݝ಺࠷େڃͷ࢈஍௚ૹܕ͓औΓدͤ&$αΠτ ▸ ӡӦɿגࣜձࣾ$ÛOFMXPSLʢچɿ߹ಉձࣾ௚ૹܭըʣ ▸ ։࢝ɿ೥ʙ
▸ ग़ళऀ਺ɿʗ঎඼਺ɿʢ4,6਺ɿ ʙʣ ▸ ྲྀ௨ֹʢ೥ʣɿԯ ສԁ ▸ ൃૹ݅਺ʢ೥ʣɿ ݅ ▸ ͝ར༻ՄೳͳϓϥοτϑΥʔϜɿ8FCɾϞόΠϧΞϓϦ

ΞϓϦ΋͋Γ㽂 J04"OESPJEˠ 8FCˠ 8FC7JFXʂ

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

ຊ୊

จࣈଟ͗͢ͳ͍ 4&0 4/4 ($1 "41 $1$ 4&4 &'0 8&# $.4
-57 8% 4&. $1" 14% 044 944 "1* 888 18" ".1 41"

Կ͔ଟ͍ʂ

".1ͱ͸ ".1ʜ"DDFMFSBUFE.PCJMF1BHFT ▸ ୊ͯ͠ɿ໿ଋ͞ΕͨϞόΠϧര଎Ωϟογϯά ▸ ࢖͍ํɿʮ͏ͪͷ8FCαΠτɺ".1ରԠͤͨ͞Αʯ ▸ ओಋɿ(PPHMF ▸ ࣌ظɿ೥ʙ
▸ ໨తʢϢʔβʣɿ  ʮදࣔ଎౓޲্ʯͱʮΤϯήʔδϝϯτͷ޲্ʯ ▸ ໨తʢఏڙଆʣɿ  ʮΧϧʔηϧදࣔʯͱʮ4&0ޮՌʯ ▸ #JOHɿ0,ʢ೥݄ʙʣɹ:BIPPɿ0,ʢ೥ʣ

ྫ͑͹ʁ

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

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

Ͳ͏΍Δͷʁ

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

".1ͱ͸ Θ͋͋͋͋

".1ͱ͸ ಾͷڋ൱ײ

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

18"ͱ͸ 18"ʜ1SPHSFTTJWF8FC"QQT ▸ ୊ͯ͠ɿ8FCʹΞϓϦͷ69ɻಀ͢ͳϢʔβʔߴΊΖ$7ʂ ▸ ࢖͍ํɿʮ͏ͪͷ8FCαΠτɺ18"ରԠͤͨ͞Αʯ ▸ ओಋɿ(PPHMFɹ࣌ظɿ೥ʙ ▸ ݴޠɿͱʹ͔͘+BWB4DSJQU
▸ 44-ඞਢɿɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ (PPHMFʹΑΔৗ࣌44-ӡಈɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ೥ʙ$ISPNF͔Βશ)551αΠτʹܯࠂ ▸ େࣄͳ͜ͱɿʮϒϥ΢βʯΛհͯ͠ಈ࡞͢Δ ▸ ಋೖࣄྫɿʮ5XJUUFSʯʮ*OTUBHSBNʯʮ1JOUFSFTUʯɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ʮ4VVNPʯʮ3FUUZά ϧϝχϡʔεʯʮ೔ܦిࢠ൛ʯʜ

ཧ૝

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

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

ͳΜͯʁ

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

ϞόΠϧͰྑ͍ͷͰ͸ ·͋·͋

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

·ͨɺͳΜ͔Ͱ͖ͯͨ

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

0, (PPHMF

ڧҾʹ·ͱΊͨ

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

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

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

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

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ొ࿥΋Մೳ

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

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

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

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

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

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

ͪͳΈʹ

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

໭ΔΑ

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

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

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

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

18"Λͭͬͯ͘ΈΔ

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

18"Λͭͬͯ͘ΈΔ

Ͱ͖ͨʂ

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

18"ͦͷଞ 18"ΛऔΓר͘࿩୊ ɾ"QQMFͷରԠʜ஗͗͢ʜʁ ɾ(PPHMF1MBZ4UPSFͰ഑৴Ͱ͖Δͧʂ ɾ.JDSPTPGU4UPSF΋͍͚Δͧʂʢͨͩ͠&EHFͷΈʣ ɾ݁ہετΞ͔Α ɾ".1ͱབྷΊΑ͏ͥ ˠʮ".1XJUI18"ʯʮ".1UP18"ʯˠ͏Θ͋͋͋ ɾͲΕબͿʁओཁϥΠϒϥϦɾϑϨʔϜϫʔΫ ˠ8PSLCPY
(PPHMF "OHVMBS3FBDU /FYUKT 7VF /VYUKT ˠ͜Εͱ͍ͬͨਖ਼߈๏͸ͳ͠ɻ͝Γ͝ΓࣗલͰ΋࣮૷Մ

41"ͱ͸ 41"ʜ4JOHMF1BHF"QQMJDBUJPO ▸ ୊ͯ͠ɿ8FCͷषΈΛऔΓআ͘ɻը໘ϫϯλονඇಉظνΣϯδϟʔ ▸ ิ଍ɿϖʔδભҠͳ͠ʹ୯ҰͷϖʔδͰίϯςϯπΛಈత੾Γସ͑ ▸ ࢖͍ํɿʮ͏ͪͷ8FCαΠτɺ41"ରԠͤͨ͞Αʯ ▸ ࣌ظɿʙ೥ʁ͘Β͍͔Β
▸ ݴޠɿͱʹ͔͘+BWB4DSJQU ▸ എܠɿɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ 3*"ʢ3JDI*OUFSOFU"QQMJDBUJPOʣͷ୅ସٕज़ͱͯ͠஫໨͕ू·Δɻ )5.-ʢಛʹΠϯλϥΫςΟϒίϯςϯπʣͷීٴʹΑͬͯΑΓҙࣝ͞ ΕΔΑ͏ʹɻࢧ͑ࠎͱͳ͍ͬͯΔͷ͸"KBYɾ8FC4PDLFUɻɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ೥ʮ(PPHMF.BQʯˠͳʹ͜Ε΍͹ɻ͍ͭಡΈࠐΜͰΜͷɻ ▸ େࣄͳ͜ͱɿ6*͸ΠέͯΔɻ͕ɺ4&0ʢಛʹϝλʣʹཁ஫ҙʂ

8FCͷषΈ ͱ͸

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

Ұํɺ

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

શମͰݟͯΈΑ͏

41"Πϝʔδ

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

41"ͱ૬ੑൈ܈ Ҿ༻ɿ"QQ4IFMMϞσϧ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTBSDIJUFDUVSFBQQTIFMM IMKB "QQ4IFMMϞσϧ ˣ Ωϟογϡ͠ͱ͚͹ྑ͘Ͷʁ ΜͰඇಉظͰऔಘɾ੾Γସ͑Ε͹ྑ͘Ͷˣ ˣ 4FSWJDF8PSLFSʂ
ˣ ͸͍࣍ճҎ߱ര଎ʙ ͲͷϖʔδͰ΋Ұॹ͡ΌͶʁ

จࣈ௨Γ ΞϓϦʹͳͬͪΌͬͨΑ

·ͱΊ

จࣈ௨Γ ΞϓϦʹͳͬͪΌͬͨΑ

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

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

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

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

Other Decks in Programming

Featured

Transcript