PWAのサンプルアプリを作ってみた

Slide 1

Slide 1 text

઒ౡܛ(.01FQBCP *OD ୈճ1)1ษڧձ 18"ͷαϯϓϧΞϓϦ ࡞ͬͯΈͨ

Slide 2

Slide 2 text

ΤϯδχΞ ઒ౡܛ!OB[POPIJUP 4)ࣄۀ෦+6(&.νʔϜ IUUQOB[POPIJUPKVHFNKQ

Slide 3

Slide 3 text

TDIPP͞ΜͰ-BSBWFMͷतۀ࡞Γ·ͨ͠

Slide 4

Slide 4 text

໨࣍ w18"ͱ͸ w18"͕΋ͨΒ͢ϝϦοτ w18"ͷݱࡏ wαϯϓϧΞϓϦͷσϞ wαϯϓϧΞϓϦͷ࣮૷ύλʔϯ

Slide 5

Slide 5 text

ࠓ೔࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ w࿩͢͜ͱ w18"ͷ֓ཁ wαϯϓϧΞϓϦΛ࡞ͬͨಘͨ஌ݟ w࿩͞ͳ͍͜ͱ wϑϩϯτΤϯυٕज़

Slide 6

Slide 6 text

18"ͱ͸

Slide 7

Slide 7 text

18"ͱ͸ w1SPHSFTTJWF8FC"QQTͷུশ w৽͍ٕ͠ज़ʹΑͬͯωΠςΟϒΞϓϦͷΑ͏ͳಈ࡞͕Մೳʹͳͬͨ 8FCΞϓϦέʔγϣϯ

Slide 8

Slide 8 text

4UBU$PVOUFS %FTLUPQWT.PCJMFWT5BCMFU.BSLFU4IBSF8PSMEXJEF IUUQHTTUBUDPVOUFSDPNQMBUGPSN NBSLFUTIBSFEFTLUPQNPCJMFUBCMFUXPSMEXJEFNPOUIMZ

Slide 9

Slide 9 text

18"ͷੜ·Εͨഎܠ wϞόΠϧ୺຤ͷར༻࣌ؒͷׂ͸ωΠςΟϒΞϓϦʹ࢖ΘΕ͍ͯΔ wIUUQXXXOFUSBUJOHTDPKQOFXT@SFMFBTF /FXTSFMFBTFIUNM ˞͜ͷൃදதͷఆٛ˞ ϞόΠϧ8FCϞόΠϧ୺຤Ͱϒϥ΢βΛ௨ͨ͠8FCମݧ

Slide 10

Slide 10 text

ϞόΠϧ8FCʻωΠςΟϒΞϓϦ wΦϑϥΠϯͰಈ࡞్͕੾ΕΔ wಈ࡞͕ॏ͘ײ͡Δ wϓογϡ௨஌Ͱ͖ͳ͍ʢαʔϏεఏڙ ଆࢹ఺ʣ

Slide 11

Slide 11 text

྆ऀͷൺֱ ϞόΠϧ8FC ωΠςΟϒΞϓϦ ΦϑϥΠϯಈ࡞ ෆՄ Մೳ ϓογϡ௨஌ ෆՄ Մೳ ىಈ·Ͱεςοϓ ଟ͍ʢϒοΫϚʔΫొ࿥Ͱ؇࿨Ͱ͖Δʣ গͳ͍ʢϗʔϜը໘͔Βىಈʣ 69 ѱ͍ʢKBWBTDSJQU౳Ͱ؇࿨Ͱ͖Δʣ ྑ͍ Πϯετʔϧ ෆཁ ඞਢ ݕࡧੑ ߴ͍ ௿͍ ։ൃίετ ௿͍ ߴ͍ ϦϦʔείετ ௿͍ ߴ͍

Slide 12

Slide 12 text

྆ऀͷ͍͍ͱ͜औΓ wΦϑϥΠϯಈ࡞ wϓογϡ௨஌ wΠϯετʔϧϨε wݕࡧɾϦϯΫՄೳ Կ͔

Slide 13

Slide 13 text

྆ऀͷ͍͍ͱ͜औΓ wϞόΠϧ8FCΛϕʔεʹɺ৽͍͠ςΫϊϩδʔΛ༻͍࣮ͯݱ͢Δ .PCJMF8FC /FX5FDIOPMPHZ 18"

Slide 14

Slide 14 text

18"ͷॾٕज़ w4FSWJDF8PSLFS w8FC"QQ.BOJGFTU w1BZNFOU3FRVFTU"1* w"VUPpMM w'FUDI"1* w$BDIF"1* w1VTI"1* w#BDLHSPVOE4ZOD"1* w(FPMPDBUJPO"1* w%FWJDF.PUJPO&WFOU w'VMMTDSFFO"1* w$SFEFOUJBM.BOBHFNFOU"1*

Slide 15

Slide 15 text

4FSWJDF8PSLFSͷओͳ໾ׂ w)551ϦΫΤετͷΠϯλʔηϓτ w)551Ϩεϙϯεͷίϯτϩʔϧ wϓογϡ௨஌଴ͪड͚ wόοΫάϥ΢ϯυಉظ

Slide 16

Slide 16 text

4FSWJDF8PSLFS ᶃ ᶄ

Slide 17

Slide 17 text

4FSWJDF8PSLFS ᶃ ᶄ ᶅ ᶆ DMJFOUTJEF

Slide 18

Slide 18 text

4FSWJDF8PSLFS ᶃ ᶄ ᶅ 165 DMJFOUTJEF

Slide 19

Slide 19 text

4FSWJDF8PSLFS ᶃ ᶄ ᶅ (&5 DMJFOUTJEF

Slide 20

Slide 20 text

4FSWJDF8PSLFS (&5 DMJFOUTJEF +BWBTDSJQUͰ੍ޚ͢Δ

Slide 21

Slide 21 text

4FSWJDF8PSLFS ᶃ ᶅ /FUXPSL'JSTU ᶆ (&5 ᶄ ᶃ ᶅ $BDIF'JSTU ᶆ (&5 ᶄ 165 ᶇ ᶈ

Slide 22

Slide 22 text

4FSWJDF8PSLFS ᶄ ᶃ ϒϥ΢β͕ด͡ΒΕͯ΋ಈ͘

Slide 23

Slide 23 text

4FSWJDF8PSLFS ᶃ TZODSFHJTUFS

Slide 24

Slide 24 text

4FSWJDF8PSLFS ᶃ TZODFWFOU ᶄ ᶅ ΦϯϥΠϯ෮ؼ࣌ʹ ൃੜ͢ΔΠϕϯτ

Slide 25

Slide 25 text

4FSWJDF8PSLFSͷಛ௃ wෆ҆ఆͳωοτϫʔΫ؀ڥΛٵऩ͢ΔϓϩΩγ w௨஌ͷ଴ͪड͚Λߦ͏όοΫάϥ΢ϯυϓϩηε wΦϯϥΠϯ࣌ͷδϣϒΛ࣮ߦ͢ΔϫʔΧʔϓϩηε

Slide 26

Slide 26 text

8FC"QQ.BOJGFTU w8FCΞϓϦέʔγϣϯͷϗʔϜը໘΁ͷ௥Ճํ๏Λఆٛ͢ΔKTPO wΞϓϦέʔγϣϯىಈ࣌ͷΦϓγϣϯ΋ࢦఆͰ͖Δ

Slide 27

Slide 27 text

8FC"QQ.BOJGFTU { "short_name": "PWA TEST", "name": "PWA TEST(Vue.js/OnsenUI)", "icons": [ { "src": "/images/launcher-icon-1x.png", "type": "image/png", "sizes": "128x128" }, { "src": "/images/launcher-icon-2x.png", "type": "image/png", "sizes": "256x256" }, { "src": "/images/launcher-icon-4x.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/app", "background_color": "#FFFFFF", "theme_color": "#FFFFFF", "display": "standalone" } ϗʔϜը໘ʹදࣔ͞ΕΔΞϓϦ໊ ىಈ࣌ʹΞΫηε͢Δ63- ϗʔϜը໘ʹදࣔ͞ΕΔΞΠίϯ ϒϥ΢βͷදࣔϞʔυ

Slide 28

Slide 28 text

8FC"QQ.BOJGFTU ̍ ̎ ̏ ϗʔϜը໘௥Ճϓϩϯϓτ ʢϒϥ΢βϝχϡʔ͔Β΋Մʣ ϗʔϜը໘ʹΞϓϦͷ௥Ճ

Slide 29

Slide 29 text

8FC"QQ.BOJGFTU ̐ ̑ ̒ ىಈ࣌ͷεϓϥογϡը໘ ʢΧϥʔ΍ΞΠίϯ͸ࢦఆՄʣ ϒϥ΢βϝχϡʔ͕ඇදࣔ

Slide 30

Slide 30 text

18"ͷಛ௃ wஈ֊త wϨεϙϯγϒ wωοτϫʔΫ઀ଓʹґଘ͠ͳ͍ wΞϓϦײ֮ wৗʹ࠷৽ ࢀߟIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTDPEFMBCTZPVSpSTUQXBQQ IMKB w҆શ wൃݟ͠΍͍͢ w࠶ΤϯήʔδϝϯτՄೳ wΠϯετʔϧՄೳ wϦϯΫՄೳ

Slide 31

Slide 31 text

ʮ18"ʯͱ͸ϚʔέςΟϯάϫʔυͳͷͰ͢ɻ ݫີͳఆٛ͸ಛʹ͋Γ·ͤΜɻ 1SPHSFTTJWF8FC"QQT3PBETIPX5PLZP2"

Slide 32

Slide 32 text

·ͱΊ w18"ͱ͸৽͍ٕ͠ज़ʹΑͬͯҰ࣍ݩ্ͷମݧΛఏڙ͢Δ8FCΞϓϦ w8FCͱωΠςΟϒΞϓϦͷ྆໘ͷྑ͞Λ࣋ͪ߹Θ͍ͤͯΔ

Slide 33

Slide 33 text

18"ͷ΋ͨΒ͢ϝϦοτ

Slide 34

Slide 34 text

18"ͷ΋ͨΒ͢ϝϦοτ w8FCͷٕज़Ͱ׬݁Ͱ͖Δ wҰͭͷίʔυͰ׬݁͢Δ wΞϓϦϚʔέοτʹറΒΕͳ͍ wΞϓϦར༻։࢝·Ͱͷোน͕খ͘͞ͳΔ

Slide 35

Slide 35 text

8FCͷٕज़Ͱ׬݁͢Δ ૉࡐIUUQXXXGSFFQJLDPN 8FC%JSFDUPS 8FC%FTJHOFS 8FC&OHJOFFS J04&OHJOFFS "OESPJE&OHJOFFS 8FC%JSFDUPS 8FC%FTJHOFS 8FC&OHJOFFS

Slide 36

Slide 36 text

ҰͭͷίʔυͰ׬݁͢Δ

Slide 37

Slide 37 text

ΞϓϦϚʔέοτʹറΒΕͳ͍ wϦϦʔε͕αʔϏεଆͰ׬શʹίϯτϩʔϧͰ͖Δ wόʔδϣϯΞοϓ΍ςετʹର͔͚ͯ͠Δίετ͕গͳ͘ͳΔ

Slide 38

Slide 38 text

ΞϓϦར༻։࢝·Ͱͷোน͕খ͘͞ͳΔ wΠϯετʔϧϨε wσʔλαΠζ΋খ͘͞ͳΔ܏޲͕͋Δ

Slide 39

Slide 39 text

18"ͷݱࡏ

Slide 40

Slide 40 text

4FSWJDF8PSLFSͷ࣮૷ঢ়گ IUUQTDBOJVTFDPNGFBUTFSWJDFXPSLFST

Slide 41

Slide 41 text

Կނɺࠓ18"ͳͷ͔ʁ w8FCLJU͕ΑΓ4FSWJDF8PSLFSͷ࣮૷ʹணखͨ͠ IUUQTXFCLJUPSHTUBUVT TFBSDITFSWJDFXPSLFS ʢJ04ͷϒϥ΢β͸8FCLJUͰ࣮૷͠ͳ͚Ε͹ͳΒͳ੍͍໿͕͋Δʣ

Slide 42

Slide 42 text

σϞ

Slide 43

Slide 43 text

ߏ੒ w-BSBWFM w7VFKT w0OTFO6* IUUQTTISPVEFEEVTLIFSPLVBQQDPN

Slide 44

Slide 44 text

"QQ4IFMMϞσϧ "QQMJDBUJPO4IFMM෦෼ʢ੩తίϯςϯπʣ ಈతίϯςϯπ 18"Λߏங͢ΔΞʔΩςΫνϟɻ 6*͕ػೳ͢Δ࠷௿ݶͷΞηοτ ʢ"QQMJDBUJPO4IFMMʣΛࣄલ Ωϟογϡ͢Δɻ

Slide 45

Slide 45 text

ϓογϡ௨஌ʹΑΔԾొ࿥ ϓογϡ௨஌ΛڐՄͯ͠΋Β͏͜ ͱΛϢʔβԾొ࿥ͱͯ͠ѻ͏ɻ ΞϓϦར༻։࢝·Ͱͷεςοϓ਺ Λগͳ͘͢Δɻ

Slide 46

Slide 46 text

ϓογϡ௨஌ڐՄͷࣄલ֬ೝ ϓογϡ௨஌ڐՄͷϓϩϯϓτ͸ Ұ౓ϒϩοΫ͞ΕΔͱೋ౓ͱදࣔ ͞Εͳ͘ͳΔɻ μϒϧύʔϛογϣϯύλʔϯͰ ΑΓ࣮֬ʹڐՄͯ͠΋Β͏ɻ ͠͹Β͘࠶දࣔͰ͖ͳ͍ ೋ౓ͱ࠶දࣔͰ͖ͳ͍ʂʂ

Slide 47

Slide 47 text

ొ࿥͞Εͨϓογϡ௨஌ڐՄΛऔ ΓԼ͛ͨޙʹɺϓϩϯϓτΛ࠶ද ࣔͤͨ͘͞ͳ͍ɻ ௨஌ͷ༗ແ͸બ୒Ͱ͖Δ͕ɺϒϥ ΢βͷ௨஌ڐՄ͸࢒ͨ͠··ʹ͢ Δ͜ͱͰଈ࣌ݩʹ໭ͤΔΑ͏ʹ͢ Δɻ ϓογϡ௨஌ڐՄͷऔΓԼ͛ "MMPX ௨஌ڐՄ͸࢒ͨ͠··

Slide 48

Slide 48 text

هࣄͷϓϦϑΣον λΠϜϥΠϯը໘ʹදࣔ͞Εͨه ࣄ͸ϓϦϑΣον͢Δ͜ͱͰɺه ࣄৄࡉͷදࣔΛߴ଎Խ͍ͯ͠Δɻ ϓϦϑΣον͞Εͨهࣄ৘ใ͸ 4FSWJDF8PSLFSͷΩϟογϡʹ ͨ·Δɻ Ӭଓతʹ࢒͢ඞཁͰ͸ͳ͍ͷͰ ෼ఔ౓ͰFYQJSFͤ͞Δɻ GFUDI GFUDI GFUDI GFUDI GFUDI 165

Slide 49

Slide 49 text

هࣄͷϓϦϑΣον දࣔ͞Ε͍ͯΔهࣄͷ෼ͷ ϦΫΤετΛ౤͛·͘Δ ϦΫΤετͷॏෳ͸ؾʹ͠ͳ͍ Ωϟογϡ͞Ε͍ͯͳ͍෼͔͠ ωοτϫʔΫʹग़ͯߦ͔ͳ͍

Slide 50

Slide 50 text

هࣄͷϓϦϑΣον ᶃ ᶄ ᶅ ωοτϫʔΫΑΓશવૣ͍͕ɺ ͘͝Θ͔ͣʹ͕͔͔࣌ؒΔɾɾɾ ʢdNTʣ

Slide 51

Slide 51 text

هࣄͷϓϦϑΣον { 4: {id: 4, title: 'title', body: 'body'}, 5: {id: 5, title: 'title', body: 'body'}, 6: {id: 6, title: 'title', body: 'body'} } ᶄ ᶃ ᶅ 4FSWJDF8PSLFSͷΩϟογϡΛ ͞Βʹ+4্Ͱ΋อ࣋

Slide 52

Slide 52 text

ϓϦϑΣονPOϓογϡ௨஌ wهࣄ౤ߘ͕ϓογϡ௨஌͞Εͨ৔߹ɺର৅ͷهࣄΛϓϦϑΣον wϓογϡ௨஌͕λοϓ͞Εͨ࣌ʹର৅ͷهࣄΛߴ଎ͰදࣔͰ͖Δ ᶄ ᶃ ᶅ 165 ᶆ ᶇ

Slide 53

Slide 53 text

όοΫάϥ΢ϯυಉظ ʮ͍͍Ͷʯ͸஗Ԇ͕ڐ͞ΕΔͷͰ ΦϑϥΠϯͰ΋ૹ৴Ͱ͖ͨΑ͏ͳ දࣔΛߦ͏ɻ ૹ৴͸όοΫάϥ΢ϯυಉظͰΦ ϯϥΠϯ෮ؼ࣌ʹࣗಈͰߦΘΕΔɻ ΦϑϥΠϯͰ΋ද্ࣔ͸ૹ৴ Ͱ͖͔ͨͷΑ͏ʹදࣔ͢Δ

Slide 54

Slide 54 text

Ξόλʔը૾ͷΩϟογϡઓུ wΩϟογϡ͔Βฦ͕͢ɺಉ࣌ʹωοτϫʔΫ͔Βऔಘ͠ɺΩϟογϡ Λߋ৽͢Δʢࠓճ͸$MPVEJOBSZΛ࢖༻͍ͯ͠ΔͷͰҙຯ͕ແ͍ʜʣ wৗʹ࠷৽ͷը૾͕දࣔ͞ΕΔΘ͚Ͱ͸ͳ͍͕ɺߋ৽ස౓͕௿͍ͨΊڐ ͞ΕΔ ᶃ ᶄ` 4UBMF8IJMF3FWBMJEBUF ᶅ` (&5 ᶄ 165 ᶆ` ᶅ

Slide 55

Slide 55 text

ᶇ Ξόλʔը૾ͷϑΥʔϧόοΫ w4FSWJDF8PSLFS͸औಘʹࣦഊͨ͠৔߹ͷϨεϙϯε΋੍ޚͰ͖Δ wϑΥʔϧόοΫϨεϙϯεͷ಺༰͸63-ผʹ෼͚Δ͜ͱ΋Ͱ͖Δ ᶃ (&5 ᶄ ᶆ ᶅ ϑΥʔϧόοΫ༻ը૾

Slide 56

Slide 56 text

4FSWJDF8PSLFSͷճආ ઃఆը໘ͷΞόλʔը૾͚ͩ͸࠷ ৽ͷ΋ͷ͕දࣔ͞Εͳ͍ͱߋ৽͕ ଈ࣌൓ө͞Εͳ͍ɻ ΫΤϦύϥϝʔλʹΑͬͯ 4FSWJDF8PSLFSͷΩϟογϡΛ ճආ͢Δɻ ௨ৗϦΫΤετJNBHFTBWBUBSTVTFSOBNFQOH 4FSWJDF8PSLFS௨աϦΫΤετJNBHFTBWBUBSTVTFSOBNFQOH TFMG

Slide 57

Slide 57 text

ߋ৽࣌ͷϦϩʔυཁٻ 4FSWJDF8PSLFSͷߋ৽͸ଈ࣮࣌ ߦ͞Εͣɺલͷόʔδϣϯͷ 4FSWJDF8PSLFS͕؅ཧ͍ͯ͠Δશ ͯͷϒϥ΢βλϒ͕ด͡ΒΕΔ· Ͱߋ৽͞Εͳ͍ɻʢྫ֎͋Γʣ ϞʔμϧΛग़͢͜ͱͰϢʔβʹ࠶ ىಈΛଅ͢ɻ

Slide 58

Slide 58 text

4FSWJDF8PSLFSͷߋ৽ ᶃ ᶄ ᶅ (&5

Slide 59

Slide 59 text

4FSWJDF8PSLFSͷߋ৽ ᶃ ᶄ ᶅ (&5 "QQMJDBUJPO4IFMMͷΞηοτΛ ߋ৽ͯ͠΋ ϩʔΧϧΩϟογϡ͕࢖༻͞ΕΔ ίʔυʹมߋ͕ͳ͚Ε͹ɺ 4FSWJDF8PSLFS͸ߋ৽͞Εͳ͍

Slide 60

Slide 60 text

4FSWJDF8PSLFSͷߋ৽࣮ߦ৚݅ ᶆ ᶄ ᶅ 165 ᶃ ৽͍͠4FSWJDF8PSLFSͷ ΠϯετʔϧϓϩηεͰ ৽͍͠Ξηοτ͕Ωϟογϡ͞ΕΔ

Slide 61

Slide 61 text

4FSWJDF8PSLFSͷߋ৽ ৽͍͠4FSWJDF8PSLFSͷ Πϯετʔϧ͸ όοΫάϥ΢ϯυͰߦΘΕΔ