Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebベースでアプリライクなUI/UXが実現できる「PWA×SPA」という選択肢
Search
t-iri
October 11, 2019
Programming
3
1.3k
WebベースでアプリライクなUI/UXが実現できる「PWA×SPA」という選択肢
PWA(with AMP🤔?) + SPA = 次代のUI & UX !!
t-iri
October 11, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
380
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
從零到一:搭建你的第一個 Observability 平台
blueswen
0
220
型安全なDrag and Dropの設計を考える
yudppp
5
660
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
410
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.2k
PT AI без купюр
v0lka
0
200
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
260
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
1.1k
人には人それぞれのサービス層がある
shimabox
3
470
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Thoughts on Productivity
jonyablonski
69
4.7k
Producing Creativity
orderedlist
PRO
346
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Code Review Best Practice
trishagee
68
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
82
How STYLIGHT went responsive
nonsquared
100
5.6k
Building Applications with DynamoDB
mza
95
6.4k
Transcript
8FCϕʔεͰΞϓϦϥΠΫͳ 6*ʗ69͕࣮ݱͰ͖Δ ʮ18"º41"ʯͱ͍͏બࢶ ݄ .PCJMF$SFX/JJHBUB
8)0*4
ɹʮΕͬϨεϙϯγϒʂʯ 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"ͱ 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
גࣜձࣾΫʔωϧϫʔΫ Ͱ ࠾༻Λ͕Μ͍ͬͯ·͢