Save 37% off PRO during our Black Friday Sale! »

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

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

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

2f710cd36766586d2b6210f2a2be2b97?s=128

0918nobita

August 22, 2018
Tweet

Transcript

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

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

    ؔ਺ܕϓϩάϥϛϯά
 )BTLFMM4.- 6TFS4USFBNͷফ͑ͨ
  3. None
  4. ͓඼ॻ͖ w 18"ͷ֓ཁ ಋೖͷϝϦοτσϝϦοτ  ࣮૷ํ๏ w طଘͷ8FCٕज़ͱͷ૊Έ߹Θͤ 18"ͷࠓޙ w

    'JSFCBTFͷ֓ཁ w ݸਓ։ൃͷΞϓϦͷ঺հ 'JSFCBTFಋೖࣄྫ  w ·ͱΊ
  5. 18" 1SPHSFTTJWF8FC"QQT

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

  7. 18"㲈ಛघͳ41" 4JOHMF1BHF"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ͷઃஔ 4FSWJDF8PSLFSΛಋೖ͢Δ

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

  16. 4FSWJDF8PSLFS 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

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