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

LINE Developer Meetup #43で行ったLTの資料です

Transcript

1. FirebaseΛ࢖ͬͯ࡞Δ PWA দຊ
   ޾େ
   -*/&
   %FWFMPQFS
   .FFUVQ
   JO
   ,ZPUP
   
2. ࣗݾ঺հ ໋ཱؗେֶ
   ৘ใཧ޻ֶ෦ճੜ
   দຊ
   ޾େ
   5XJUUFS
   !OPCJUB
   w ໋ཱؗίϯϐϡʔλΫϥϒॴଐ
   w 8FC
   
   ݴޠॲཧܥ
   ։ൃ
   w ؔ਺ܕϓϩάϥϛϯά
 )BTLFMM
   
   4.- 6TFS4USFBNͷফ͑ͨ
4. ͓඼ॻ͖ w 18"ͷ֓ཁ
   ಋೖͷϝϦοτσϝϦοτ
   ࣮૷ํ๏
   w طଘͷ8FCٕज़ͱͷ૊Έ߹Θͤ
   18"ͷࠓޙ
   w 'JSFCBTFͷ֓ཁ
   w ݸਓ։ൃͷΞϓϦͷ঺հ
   'JSFCBTFಋೖࣄྫ
   w ·ͱΊ
5. 18"
   1SPHSFTTJWF
   8FC
   "QQT
6. 18"
   ͱ͸ 8FCϖʔδΛɺ
 ঃʑʹωΠςΟϒΞϓϦͷΑ͏ͳڍಈΛ
 ࣮ݱ͢ΔΑ͏ʹ֦ுͰ͖Δٕज़
7. 18"
   㲈
   ಛघͳ41" 4JOHMF
   1BHF
   "QQMJDBUJPO
8. 18"Λಋೖ͢ΔϝϦοτ w ϓογϡ௨஌
   
   Ωϟογϡػೳ
   ͕ར༻Մೳ
   w όοΫάϥ΢ϯυͰͷಉظॲཧ͕Մೳ
   w Πϯετʔϧͷख͕ؒল͚Δ
   w ΦϑϥΠϯͰ΋ಈ࡞
   w ߋ৽͕؆୯
9. σϝϦοτ w ϓογϡ௨஌
   
   όοΫάϥϯυͰͷಉظ
   ͸
 ؀ڥʹΑͬͯ͸ར༻Ͱ͖ͳ͍
   
   J04
   
   w ωΠςΟϒ޲͚ͷ"1*͸ར༻Ͱ͖ͳ͍
   w ΦϑϥΠϯͰͷॲཧ͕ෳࡶʹͳΓ͕ͪ
   w ඇಉظͭΒ͍
   41"ͱࣄ৘͕ࣅ͍ͯΔ
10. ಋೖࣄྫ 5XJUUFS
    -JUF
11. 8JOͰ΋18" ৄ͘͠͸
    IUUQTEFWFMPQFSNJDSPTPGUDPNKBKQXJOEPXTQXB 681ͱͯ͠Ϗϧυͯ͠8JOEPXTετΞͰ഑෍Մೳ
12. 2
    ैདྷͷ࣮૷ͱͷҧ͍͸ʁ
13. "
    ͋Μ·Γͳ͍
14. 5P
    %P NBOJGFTUKTPO
    ͷઃஔ
    4FSWJDF
    8PSLFS
    Λಋೖ͢Δ
15. NBOJGFTUKTPO w ΞϓϦͷ৘ใΛ·ͱΊͨKTPOϑΝΠϧ

    ΞΠίϯ༻ͷը૾
    εϓϥογϡը໘
    ςʔϚ৭ ։͘63-ͳͲ
    
    w
    MJOLλάͰࢦఆ͢Δ͚ͩͰඥ෇͚͕׬ྃ
16. 4FSWJDF
    8PSLFS w ϒϥ΢β͕όοΫάϥ΢ϯυͰ࣮ߦ͢ΔεΫϦϓτ
    w ϦΫΤετΛϓϩΩγ͢Δ͜ͱ͕Ͱ͖Δ
    w
    ϥΠϑαΠΫϧ͕ଘࡏ͠ɺΠϕϯτυϦϒϯͰ࣮૷
    w %0.ʹΞΫηεͰ͖ͳ͍

    ૢ࡞͢ΔͳΒ
    QPTU.FTTBHF
    Ͱ௨৴͢Δඞཁ͋Γ
    w ඞཁʹԠͯ͡ىಈऴྃ͞ΕΔͨΊม਺ͷ஋͕อ࣋͞Εͳ͍

    σʔλอଘʹ͸
    $BDIF
    *OEFYFE%#
    ౳Λར༻͢Δඞཁ͋Γ
    
    w
    IUUQT
    ͔
    MPDBMIPTU
    ্Ͱ͔͠ಈ࡞͠ͳ͍
17. ͓඼ॻ͖ w 18"ͷ֓ཁ
    ಋೖͷϝϦοτσϝϦοτ
    ࣮૷ํ๏
    w طଘͷ8FCٕज़ͱͷ૊Έ߹Θͤ
    
 18"ͷࠓޙ
    w 'JSFCBTFͷ֓ཁ
    w ݸਓ։ൃͷΞϓϦͷ঺հ
    'JSFCBTFಋೖࣄྫ
    w ·ͱΊ
18. طଘͷ8FCٕज़ͱͷ૊Έ߹Θͤ w 8FC35$
    w 8FC(-
    w 8FC"TTFNCMZ
    ͜ΕΒͷٕज़͕ซ༻Մೳ
19. 18"ͷࠓޙ͸ʜ
20. "QQMFͷରԠ࣍ୈ
21. w J04޲͚4BGBSJͰͷ18"ͷαϙʔτ͸ݶఆత
    w ϒϥ΢β͔Β18"Λࣗ༝ʹΠϯετʔϧ͢Δ
 ͜ͱΛڐ͢ʁڐ͞ͳ͍ʁ
    w ωΠςΟϒΞϓϦͷετΞͱͷ݉Ͷ߹͍͕
 ωοΫʹͳΔ
22. 'JSFCBTF
23. 'JSFCBTF
    ͷαʔϏε w )PTUJOH
    
    ੩తϑΝΠϧḉ
    
    w $MPVE
    'VODUJPOT
    
    'BB4
    
    w $MPVE
    'JSFTUPSF
    
    /P42-
    σʔλϕʔε
    
    w 4UPSBHF
    
    ը૾
    ಈը༻ετϨʔδ
    
    w "VUIFOUJDBUJPO
    
    Ϣʔβʔೝূ
    
    ؅ཧ
    
    w .-
    ,JU
    
    ػցֶशϥΠϒϥϦ
    
24. 'JSFCBTF
    )PTUJOH w ੩తϖʔδͷϗεςΟϯά
    w ϧʔςΟϯά౳ͷઃఆ͸
    KTPO
    ϑΝΠϧͰ
25. 2
    σϓϩΠํ๏͸ʁ
26. "
    firebase deploy
    ίϚϯυΛ
 ୟ͚ͩ͘
27. $MPVE
    'VODUJPOT
    GPS
    'JSFCBTF w ଞͷ'JSFCBTFͷػೳ΍)5514ϦΫΤετʹ
 ΑͬͯτϦΨʔ͞ΕͨΠϕϯτʹԠͯ͡ɺ
 όοΫΤϯυίʔυΛࣗಈͰ࣮ߦ͢Δ
    w όοΫΤϯυίʔυ
    
    σϓϩΠ͞Εͨݸʑͷؔ਺
    w 'BB4
    
    'VODUJPO
    BT
    B
    4FSWJDF
    
28. 'BB4
    
    'VODUJPO
    BT
    B
    4FSWJDF
    w Ϋϥ΢υͷϓϩόΠμଆͰඞཁͳόοΫΤϯυ ίʔυΛ࣮ߦ͢ΔαʔϏεΠϯϑϥ
    w ཁ͸όοΫΤϯυͷॲཧΛؔ਺ʹ෼ׂͯ͠
 ͦΕͧΕσϓϩΠͯ͠ݺͼग़ͤΔαʔϏε
29. ΫϥΠΞϯτ͔Βͷ
 ؔ਺ͷݺͼग़͠ํ ҎԼͷछྨ
    
    ؔ਺Λఆٛ͢Δͱ͖ʹࢦఆ
    
    w )551ϦΫΤετ
    w $BMMBCMF
    )5514
    ͲͪΒΛબͿͱͯ͠΋
    'JSFCBTF
    ͷ
    4%,
    ͕ඞཁ
30. $BMMBCMF
    )5514 w 4%,ʹΑͬͯɺϦΫΤετʹೝূ৘ใ͕
 ෇༩͞ΕΔ
    w ϝΠϯͷιʔεϑΝΠϧʹɺೝূ৘ใΛ
 ෇Ճ͢ΔॲཧΛॻ͘ඞཁ͕ͳ͍
    w ೝূ৘ใ
    
    'JSFCBTF
    "VUI
    
    $MPVE
    .FTTBHJOHͷτʔΫϯ
31. 2
    σϓϩΠํ๏͸ʁ
32. "
    firebase deploy
    ίϚϯυΛ
 ୟ͚ͩ͘
33. $MPVE
    'VODUJPOTͷ
    ୯ମςετ w firebase-functions-test
    ύοέʔδ͕
 OQN
    Ͱ഑෍͞Ε͍ͯΔ
    w ΦϑϥΠϯϞʔυ
    
    ΦϯϥΠϯϞʔυ
34. ΦϑϥΠϯϞʔυͰͷ୯ମςετ w ෭࡞༻ͳ͠ʹαΠϩԽ͞ΕͨΦϑϥΠϯͷ
 ୯ମςετ
    w 'JSFCBTF
    ϓϩμΫτͱ΍ΓऔΓ͢Δϝιου
 ݺͼग़͠͸ελϒ͞ΕΔඞཁ͕͋Δ
35. ΦϯϥΠϯϞʔυͰͷ୯ମςετ w σʔλϕʔε΁ͷॻ͖ࠐΈ΍
 Ϣʔβʔͷ࡞੒ͳͲ ෭࡞༻ ͕࣮ࡍʹߦΘΕΔ
    w ςετઐ༻ͷ
    'JSFCBTF
    ϓϩδΣΫτ͕ඞཁ
36. 'JSFCBTF
    ͷྉۚϓϥϯ w 4QBSL
    ແྉ
    ϓϥϯ
    w 'MBNF
    ྉۚݻఆ
    ϓϥϯ
    w #MB[F
    ैྔ՝੍ۚ
    ϓϥϯ
    ৄ͘͠͸
    IUUQTpSFCBTFHPPHMFDPNQSJDJOH
37. ͓඼ॻ͖ w 18"ͷ֓ཁ
    ಋೖͷϝϦοτσϝϦοτ
    ࣮૷ํ๏
    w طଘͷ8FCٕज़ͱͷ૊Έ߹Θͤ
    w 18"ͷࠓޙ
    w 'JSFCBTFͷ֓ཁ
    w ݸਓ։ൃͷΞϓϦͷ঺հ
    'JSFCBTFಋೖࣄྫ
    w ·ͱΊ
38. ٕज़ॻɺੵಡͯ͠·ͤΜ͔ʁ
39. ੵಡ
    ŨƃŪƄŞ lੵΜͰ͓͘z
    ͱ
    υΫ
    ಡ
    ͱΛ͔͚ͨᔬམ
    ॻ෺Λಡ·ͣʹੵΜͰ͓͘͜ͱ
    
    ޿ࣙԓୈ൛ΑΓ
40. ΞϓϦͷ֓ཁ w ੵಡফԽࢧԉ18"ʮ5TVOEPLVʯ
    w Ծ૝ͷຊ୨ʹੵಡঢ়ଶͷຊΛ௥Ճ͢Δ
    w ੵಡফԽͷਐḿ ϖʔδ਺
    ಺༰
    ؔ࿈͢Δ(JU)VCͰͷίϛοτ Λ
 ࿈ܞ4/4Ͱڞ༗Ͱ͖Δ
    w ਐḿ͕ग़͍ͯΔຊ΄Ͳɺ
 ຊ୨Ͱදࣔ͞ΕΔαϜωΠϧ͕઱΍͔ʹͳΔ
    w ຊ୨ʹొ࿥Ͱ͖Δ࡭਺ʹ͸্ݶ͕͋Γɺ
 ਃ੥Λ͢Ε͹্ݶΛஈ֊తʹղ์Ͱ͖Δ
 ͦͷ͔ΘΓɺ্ݶΛղ์ͨ͜͠ͱ͸ຖճ4/4Ͱڞ༗͞ΕΔ
41. w 'JSFCBTF
    )PTUJOH
    $MPVE
    'VODUJPOT 
 $MPVE
    'JSFTUPSF
    "VUI
    Λར༻
    
    #MB[F
    ϓϥϯ
    
    w IUUQTHJUIVCDPNOPCJUB5TVOEPLV 5TVOEPLVͷٕज़తཁૉ 
42. 5TVOEPLVͷٕज़తཁૉ  w όοΫΤϯυ͸
 $MPVE
    'VODUJPOT
    
    'JSFTUPSF
    
    "VUI
    
 /PEFKT 7FS
    ݻఆ
    w ϑϩϯτΤϯυ͸
 /PEFKT OQN
    
    "OHVMBS
    
    5ZQF4DSJQU
    
    54-JOU
    
    #PPUTUSBQ

    'JSFCBTF
    )PTUJOH
    Ͱ഑৴
    
43. 'JSFCBTF
    ͷ࢖༻ײ w ϒϥ΢β্ͰݟΕΔίϯιʔϧ͔Βɺ
 %#ͷ؅ཧ͕(6*Ͱߦ͑Δͷ͕-(5.
    w σϓϩΠָ͕͘͢͝
    w 'BB4
    ͸୯ମςετ͕ͪΐͬͱେม
    w $MPVE
    'VODUJPOTʹ͸ɺ
 ͸΍͘࠷৽ͷ/PEFKTʹରԠͯ͠΄͍͠
44. ·ͱΊ w 18"
    ͸
    69
    ΛߴΊΔΞπ͍ٕज़
    w ಋೖ͸؆୯
    
    ؀ڥґଘͳ෦෼ʹ͸஫ҙ
    w 'JSFCBTF
    ΊͬͪΌศར
    w 18"ʮ5TVOEPLVʯ։ൃத
 4UBS
    *TTVF
    ϓϧϦΫ
    ͓଴ͪͯ͠·͢ʂ
45. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠