Firebaseを使って作るPWA (LINE Developer Meetup #43)

by 0918nobita

Slide 1

Slide 1 text

FirebaseΛ࢖ͬͯ࡞Δ PWA দຊ޾େ -*/&%FWFMPQFS.FFUVQJO,ZPUP

Slide 2

Slide 2 text

ࣗݾ঺հ ໋ཱؗେֶ ৘ใཧ޻ֶ෦ճੜ দຊ޾େ 5XJUUFS!OPCJUB w ໋ཱؗίϯϐϡʔλΫϥϒॴଐ w 8FCݴޠॲཧܥ։ൃ w ؔ਺ܕϓϩάϥϛϯά  )BTLFMM4.- 6TFS4USFBNͷফ͑ͨ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

͓඼ॻ͖ w 18"ͷ֓ཁ ಋೖͷϝϦοτσϝϦοτ ࣮૷ํ๏ w طଘͷ8FCٕज़ͱͷ૊Έ߹Θͤ 18"ͷࠓޙ w 'JSFCBTFͷ֓ཁ w ݸਓ։ൃͷΞϓϦͷ঺հ 'JSFCBTFಋೖࣄྫ w ·ͱΊ

Slide 5

Slide 5 text

18" 1SPHSFTTJWF8FC"QQT

Slide 6

Slide 6 text

18"ͱ͸ 8FCϖʔδΛɺ  ঃʑʹωΠςΟϒΞϓϦͷΑ͏ͳڍಈΛ  ࣮ݱ͢ΔΑ͏ʹ֦ுͰ͖Δٕज़

Slide 7

Slide 7 text

18"㲈ಛघͳ41" 4JOHMF1BHF"QQMJDBUJPO

Slide 8

Slide 8 text

18"Λಋೖ͢ΔϝϦοτ w ϓογϡ௨஌Ωϟογϡػೳ͕ར༻Մೳ w όοΫάϥ΢ϯυͰͷಉظॲཧ͕Մೳ w Πϯετʔϧͷख͕ؒল͚Δ w ΦϑϥΠϯͰ΋ಈ࡞ w ߋ৽͕؆୯

Slide 9

Slide 9 text

σϝϦοτ w ϓογϡ௨஌όοΫάϥϯυͰͷಉظ͸  ؀ڥʹΑͬͯ͸ར༻Ͱ͖ͳ͍ J04 w ωΠςΟϒ޲͚ͷ"1*͸ར༻Ͱ͖ͳ͍ w ΦϑϥΠϯͰͷॲཧ͕ෳࡶʹͳΓ͕ͪ w ඇಉظͭΒ͍ 41"ͱࣄ৘͕ࣅ͍ͯΔ

Slide 10

Slide 10 text

ಋೖࣄྫ 5XJUUFS-JUF

Slide 11

Slide 11 text

8JOͰ΋18" ৄ͘͠͸IUUQTEFWFMPQFSNJDSPTPGUDPNKBKQXJOEPXTQXB 681ͱͯ͠Ϗϧυͯ͠8JOEPXTετΞͰ഑෍Մೳ

Slide 12

Slide 12 text

2ैདྷͷ࣮૷ͱͷҧ͍͸ʁ

Slide 13

Slide 13 text

"͋Μ·Γͳ͍

Slide 14

Slide 14 text

5P%P NBOJGFTUKTPOͷઃஔ 4FSWJDF8PSLFSΛಋೖ͢Δ

Slide 15

Slide 15 text

NBOJGFTUKTPO w ΞϓϦͷ৘ใΛ·ͱΊͨKTPOϑΝΠϧ  ΞΠίϯ༻ͷը૾ εϓϥογϡը໘ ςʔϚ৭ ։͘63-ͳͲ w MJOLλάͰࢦఆ͢Δ͚ͩͰඥ෇͚͕׬ྃ

Slide 16

Slide 16 text

4FSWJDF8PSLFS w ϒϥ΢β͕όοΫάϥ΢ϯυͰ࣮ߦ͢ΔεΫϦϓτ w ϦΫΤετΛϓϩΩγ͢Δ͜ͱ͕Ͱ͖Δ w ϥΠϑαΠΫϧ͕ଘࡏ͠ɺΠϕϯτυϦϒϯͰ࣮૷ w %0.ʹΞΫηεͰ͖ͳ͍  ૢ࡞͢ΔͳΒQPTU.FTTBHFͰ௨৴͢Δඞཁ͋Γ w ඞཁʹԠͯ͡ىಈऴྃ͞ΕΔͨΊม਺ͷ஋͕อ࣋͞Εͳ͍  σʔλอଘʹ͸$BDIF *OEFYFE%#౳Λར༻͢Δඞཁ͋Γ w IUUQT͔MPDBMIPTU্Ͱ͔͠ಈ࡞͠ͳ͍

Slide 17

Slide 17 text

͓඼ॻ͖ w 18"ͷ֓ཁ ಋೖͷϝϦοτσϝϦοτ ࣮૷ํ๏ w طଘͷ8FCٕज़ͱͷ૊Έ߹Θͤ   18"ͷࠓޙ w 'JSFCBTFͷ֓ཁ w ݸਓ։ൃͷΞϓϦͷ঺հ 'JSFCBTFಋೖࣄྫ w ·ͱΊ

Slide 18

Slide 18 text

طଘͷ8FCٕज़ͱͷ૊Έ߹Θͤ w 8FC35$ w 8FC(- w 8FC"TTFNCMZ ͜ΕΒͷٕज़͕ซ༻Մೳ

Slide 19

Slide 19 text

18"ͷࠓޙ͸ʜ

Slide 20

Slide 20 text

"QQMFͷରԠ࣍ୈ

Slide 21

Slide 21 text

w J04޲͚4BGBSJͰͷ18"ͷαϙʔτ͸ݶఆత w ϒϥ΢β͔Β18"Λࣗ༝ʹΠϯετʔϧ͢Δ  ͜ͱΛڐ͢ʁڐ͞ͳ͍ʁ w ωΠςΟϒΞϓϦͷετΞͱͷ݉Ͷ߹͍͕  ωοΫʹͳΔ

Slide 22

Slide 22 text

'JSFCBTF

Slide 23

Slide 23 text

'JSFCBTFͷαʔϏε w )PTUJOH ੩తϑΝΠϧḉ w $MPVE'VODUJPOT 'BB4 w $MPVE'JSFTUPSF /P42-σʔλϕʔε w 4UPSBHF ը૾ ಈը༻ετϨʔδ w "VUIFOUJDBUJPO Ϣʔβʔೝূ؅ཧ w .-,JU ػցֶशϥΠϒϥϦ

Slide 24

Slide 24 text

'JSFCBTF)PTUJOH w ੩తϖʔδͷϗεςΟϯά w ϧʔςΟϯά౳ͷઃఆ͸KTPOϑΝΠϧͰ

Slide 25

Slide 25 text

2σϓϩΠํ๏͸ʁ

Slide 26

Slide 26 text

"firebase deployίϚϯυΛ  ୟ͚ͩ͘

Slide 27

Slide 27 text

$MPVE'VODUJPOT GPS'JSFCBTF w ଞͷ'JSFCBTFͷػೳ΍)5514ϦΫΤετʹ  ΑͬͯτϦΨʔ͞ΕͨΠϕϯτʹԠͯ͡ɺ  όοΫΤϯυίʔυΛࣗಈͰ࣮ߦ͢Δ w όοΫΤϯυίʔυσϓϩΠ͞Εͨݸʑͷؔ਺ w 'BB4 'VODUJPOBTB4FSWJDF

Slide 28

Slide 28 text

'BB4 'VODUJPOBTB4FSWJDF w Ϋϥ΢υͷϓϩόΠμଆͰඞཁͳόοΫΤϯυ ίʔυΛ࣮ߦ͢ΔαʔϏεΠϯϑϥ w ཁ͸όοΫΤϯυͷॲཧΛؔ਺ʹ෼ׂͯ͠  ͦΕͧΕσϓϩΠͯ͠ݺͼग़ͤΔαʔϏε

Slide 29

Slide 29 text

ΫϥΠΞϯτ͔Βͷ  ؔ਺ͷݺͼग़͠ํ ҎԼͷछྨ ؔ਺Λఆٛ͢Δͱ͖ʹࢦఆ w )551ϦΫΤετ w $BMMBCMF)5514 ͲͪΒΛબͿͱͯ͠΋'JSFCBTFͷ4%,͕ඞཁ

Slide 30

Slide 30 text

$BMMBCMF)5514 w 4%,ʹΑͬͯɺϦΫΤετʹೝূ৘ใ͕  ෇༩͞ΕΔ w ϝΠϯͷιʔεϑΝΠϧʹɺೝূ৘ใΛ  ෇Ճ͢ΔॲཧΛॻ͘ඞཁ͕ͳ͍ w ೝূ৘ใ'JSFCBTF"VUI$MPVE.FTTBHJOHͷτʔΫϯ

Slide 31

Slide 31 text

2σϓϩΠํ๏͸ʁ

Slide 32

Slide 32 text

"firebase deployίϚϯυΛ  ୟ͚ͩ͘

Slide 33

Slide 33 text

$MPVE'VODUJPOTͷ ୯ମςετ w firebase-functions-testύοέʔδ͕  OQNͰ഑෍͞Ε͍ͯΔ w ΦϑϥΠϯϞʔυΦϯϥΠϯϞʔυ

Slide 34

Slide 34 text

ΦϑϥΠϯϞʔυͰͷ୯ମςετ w ෭࡞༻ͳ͠ʹαΠϩԽ͞ΕͨΦϑϥΠϯͷ  ୯ମςετ w 'JSFCBTFϓϩμΫτͱ΍ΓऔΓ͢Δϝιου  ݺͼग़͠͸ελϒ͞ΕΔඞཁ͕͋Δ

Slide 35

Slide 35 text

ΦϯϥΠϯϞʔυͰͷ୯ମςετ w σʔλϕʔε΁ͷॻ͖ࠐΈ΍  Ϣʔβʔͷ࡞੒ͳͲ ෭࡞༻ ͕࣮ࡍʹߦΘΕΔ w ςετઐ༻ͷ'JSFCBTFϓϩδΣΫτ͕ඞཁ

Slide 36

Slide 36 text

'JSFCBTFͷྉۚϓϥϯ w 4QBSL ແྉ ϓϥϯ w 'MBNF ྉۚݻఆ ϓϥϯ w #MB[F ैྔ՝੍ۚ ϓϥϯ ৄ͘͠͸IUUQTpSFCBTFHPPHMFDPNQSJDJOH

Slide 37

Slide 37 text

͓඼ॻ͖ w 18"ͷ֓ཁ ಋೖͷϝϦοτσϝϦοτ ࣮૷ํ๏ w طଘͷ8FCٕज़ͱͷ૊Έ߹Θͤ w 18"ͷࠓޙ w 'JSFCBTFͷ֓ཁ w ݸਓ։ൃͷΞϓϦͷ঺հ 'JSFCBTFಋೖࣄྫ w ·ͱΊ

Slide 38

Slide 38 text

ٕज़ॻɺੵಡͯ͠·ͤΜ͔ʁ

Slide 39

Slide 39 text

ੵಡ ŨƃŪƄŞ lੵΜͰ͓͘zͱυΫ ಡ ͱΛ͔͚ͨᔬམ ॻ෺Λಡ·ͣʹੵΜͰ͓͘͜ͱ ޿ࣙԓୈ൛ΑΓ

Slide 40

Slide 40 text

ΞϓϦͷ֓ཁ w ੵಡফԽࢧԉ18"ʮ5TVOEPLVʯ w Ծ૝ͷຊ୨ʹੵಡঢ়ଶͷຊΛ௥Ճ͢Δ w ੵಡফԽͷਐḿ ϖʔδ਺ ಺༰ ؔ࿈͢Δ(JU)VCͰͷίϛοτ Λ  ࿈ܞ4/4Ͱڞ༗Ͱ͖Δ w ਐḿ͕ग़͍ͯΔຊ΄Ͳɺ  ຊ୨Ͱදࣔ͞ΕΔαϜωΠϧ͕઱΍͔ʹͳΔ w ຊ୨ʹొ࿥Ͱ͖Δ࡭਺ʹ͸্ݶ͕͋Γɺ  ਃ੥Λ͢Ε͹্ݶΛஈ֊తʹղ์Ͱ͖Δ  ͦͷ͔ΘΓɺ্ݶΛղ์ͨ͜͠ͱ͸ຖճ4/4Ͱڞ༗͞ΕΔ

Slide 41

Slide 41 text

w 'JSFCBTF)PTUJOH $MPVE'VODUJPOT   $MPVE'JSFTUPSF "VUIΛར༻ #MB[Fϓϥϯ w IUUQTHJUIVCDPNOPCJUB5TVOEPLV 5TVOEPLVͷٕज़తཁૉ

Slide 42

Slide 42 text

5TVOEPLVͷٕज़తཁૉ w όοΫΤϯυ͸  $MPVE'VODUJPOT'JSFTUPSF"VUI  /PEFKT 7FSݻఆ w ϑϩϯτΤϯυ͸  /PEFKT OQN "OHVMBS5ZQF4DSJQU 54-JOU#PPUTUSBQ  'JSFCBTF)PTUJOHͰ഑৴

Slide 43

Slide 43 text

'JSFCBTFͷ࢖༻ײ w ϒϥ΢β্ͰݟΕΔίϯιʔϧ͔Βɺ  %#ͷ؅ཧ͕(6*Ͱߦ͑Δͷ͕-(5. w σϓϩΠָ͕͘͢͝ w 'BB4͸୯ମςετ͕ͪΐͬͱେม w $MPVE'VODUJPOTʹ͸ɺ  ͸΍͘࠷৽ͷ/PEFKTʹରԠͯ͠΄͍͠

Slide 44

Slide 44 text

·ͱΊ w 18"͸69ΛߴΊΔΞπ͍ٕज़ w ಋೖ͸؆୯؀ڥґଘͳ෦෼ʹ͸஫ҙ w 'JSFCBTFΊͬͪΌศར w 18"ʮ5TVOEPLVʯ։ൃத  4UBS *TTVF ϓϧϦΫ͓଴ͪͯ͠·͢ʂ

Slide 45

Slide 45 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠