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.4k
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
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
9
1k
JETLS.jl ─ A New Language Server for Julia
abap34
2
470
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
340
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
160
Python札幌 LT資料
t3tra
7
1.1k
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
7
2.4k
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
120
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
maryang
1
150
Findy AI+の開発、運用におけるMCP活用事例
starfish719
0
2k
生成AI時代を勝ち抜くエンジニア組織マネジメント
coconala_engineer
0
37k
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
maroon1st
0
300
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
bengo4com
0
450
Featured
See All Featured
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
110
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
34
Become a Pro
speakerdeck
PRO
31
5.8k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
200
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
0
48
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
0
170
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
180
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
0
990
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
גࣜձࣾΫʔωϧϫʔΫ Ͱ ࠾༻Λ͕Μ͍ͬͯ·͢