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

Transcript

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

2. ࣗݾ঺հ ໋ཱؗେֶ
   ৘ใཧ޻ֶ෦ճੜ
   দຊ
   ޾େ
   5XJUUFS
   !OPCJUB
   w ໋ཱؗίϯϐϡʔλΫϥϒॴଐ
   w 8FC
   
   ݴޠॲཧܥ
   ։ൃ
   w

   ؔ਺ܕϓϩάϥϛϯά
 )BTLFMM
   
   4.- 6TFS4USFBNͷফ͑ͨ
3. None

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠