「にゃーん」となくWebアプリを作った話 #ゆるWeb札幌

Vue.js + Firebase で作った個人サービスの話。
https://nyan3.tacck.net/

Transcript

1. ΏΔ8FCษڧձ!ࡳຈ
   @tacck
   ʮʹΌʔΜʯͱͳ͘

   8FCΞϓϦΛ࡞ͬͨ࿩
   2019/05/11
   7VFKT'JSFCBTF
   

   View Slide

2. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
   ୭
   • ໊લ
   
   tacck
   
   • ࢓ࣄ
   
   Vue.jsΛʮ΍ͬͯͶʯͱ

   ؙ౤͛͢Δਓ
   
   • ޷͖ͳϑΟΪϡΞεέʔτͷٕ
   
   εϓϨουɾΠʔάϧ
   

   View Slide

3. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
   /ZBO/ZBO/ZBO
   

   View Slide

4. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
   /ZBO/ZBO/ZBO
   • ࡞ͬͨ΋ͷͷ঺հ
   
   • Firebaseͷͬ͘͟Γ֓ཁ
   
   • ίʔυͷ঺հ
   

   View Slide

5. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
   /ZBO/ZBO/ZBOը໘
   

   View Slide

6. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
   /ZBO/ZBO/ZBOը໘
   

   View Slide

7. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
   'JSFCBTFͱ͸
   

   View Slide

8. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
   ͦ΋ͦ΋
   • FirebaseΛฉ͍ͨ͜ͱ͋Δਓ?
   
   ✋
   

   View Slide

9. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
   ͦ΋ͦ΋
   • FirebaseΛ࢖ͬͨ͜ͱ͋Δਓ?
   
   
   

   View Slide

10. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    'JSFCBTFͱ͸
    • mBaaSͱݺ͹ΕΔαʔϏε
    
    • ϞόΠϧ޲͚ͷόοΫΤϯυػೳΛఏڙͯ͘͠ΕΔ΋ͷɻ

    ( Mobile Backend as a Service )
    
    • ϞόΠϧ޲͚ͱ͋Δ͕ɺJavaScriptͰར༻Ͱ͖Δػೳ΋͍͔ͭ͋͘Δɻ
    
    • ແྉར༻࿮΋ͦͦ͜͜࢖͑Δɻ

    (ࠓճઆ໌͢ΔϑϩϯτΤϯυ޲͚ͷػೳ͸ɺແྉར༻࿮͕͋Δɻ)
    

    View Slide

11. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    N#BB4ͷΧόʔൣғ
    Πϯϑϥ
    όοΫΤϯυ
    ϑϩϯτΤϯυ ϞόΠϧΞϓϦ
    

    View Slide

12. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    Πϯϑϥ
    όοΫΤϯυ
    N#BB4ͷΧόʔൣғ
    ϑϩϯτΤϯυ ϞόΠϧΞϓϦ
    ͜ͷ͘Β͍໘౗Λݟͯ͘ΕΔ
    (όοΫΤϯυͷҰ෦͸

    ࣗ෼Ͱ࣮૷Մೳ)
    

    View Slide

13. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    'JSFCBTFͰͰ͖Δ͜ͱ
    ओʹϑϩϯτΤϯυͰ
    
    

    View Slide

14. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ओͳ'JSFCBTFͷػೳ
    • Πϯϑϥ
    
    • Hosting / WebαʔόͱσΟεΫྖҬ
    
    • HTMLɺCSSɺJSͳͲͷ੩తϑΝΠϧΛ͙͢ʹσϓϩΠՄೳɻ
    
    • Functions / όοΫΤϯυػೳ
    
    • Node.jsͰόοΫΤϯυػೳΛ࣮૷Մೳɻ
    
    • ࣗ෼Ͱ࣮૷͢ΔͷͰΠϯϑϥଆͷػೳͱͳΔɻ
    

    View Slide

15. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ओͳ'JSFCBTFͷػೳ
    • όοΫΤϯυ
    
    • Authentication / ೝূ
    
    • EmailɺTwitterɺGoogle AccountɺͳͲ΋࢖͑Δೝূػೳɻ
    
    • Cloud Firestore / σʔλϕʔε
    
    • NoSQLܕͷσʔλϕʔεͱͯ͠ར༻Մೳɻ
    

    View Slide

16. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    Hosting
    Functions
    Firebase
    Local
    Hosting
    Functions
    Authentication
    Firestore
    

    View Slide

17. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    Hosting
    Functions
    Firebase
    Local
    Hosting
    Functions
    σϓϩΠ
    Authentication
    Firestore
    

    View Slide

18. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    Hosting
    Functions
    Firebase
    WebαΠτ
    API
    Authentication
    Firestore
    SDKͰར༻
    σϓϩΠ׬ྃͨ͠Β
    ͙͢ʹར༻Մೳ
    

    View Slide

19. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    /ZBO/ZBO/ZBOͷ৔߹
    • FirebaseػೳͰ࢖͍ͬͯΔ͜ͱ
    
    • Hosting
    
    • Functions (GCPͷײ৘෼ੳͱͷ΍ΓͱΓ)
    
    • Cloud Firestore (෼ੳ݁ՌͷΈอ࣋)
    
    • ֎෦
    
    • GCP Cloud Natural Language API (Functionsܦ༝ͷײ৘෼ੳ)

    ※ແྉ࿮ͷ৔߹Functions͸GoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍
    
    • Google Analytics
    
    • Google AdSense
    

    View Slide

20. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    /ZBO/ZBO/ZBO

    ɹͷத਎
    

    View Slide

21. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    /ZBO/ZBO/ZBOͷ৔߹
    • FirebaseػೳͰ࢖͍ͬͯΔ͜ͱ
    
    • Hosting
    
    • Functions (GCPͷײ৘෼ੳͱͷ΍ΓͱΓ)
    
    • Cloud Firestore (෼ੳ݁ՌͷΈอ࣋)
    
    • ֎෦
    
    • GCP Cloud Natural Language API (Functionsܦ༝ͷײ৘෼ੳ)
    
    • Google Analytics
    
    • Google AdSense
    
    ※ແྉ࿮ͷ৔߹Functions͸GoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍
    ͜ͷ͋ͨΓͷ࿩
    

    View Slide

22. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    )PTUJOH 7VFKT
    
    • ίʔυΛͬ͘͟Γ
    

    View Slide

23. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    'VODUJPOT /PEFKT
    
    • ίʔυΛͬ͘͟Γ
    

    View Slide

24. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ؀ڥ
    • ։ൃ൛

    →खݩͰಈ͔͠ͳ͕Βਵ࣌֬ೝ
    
    • εςʔδϯά൛

    →Firebase্Ͱ૝ఆ௨Γʹಈ͔͘ͷ֬ೝ
    
    • ϦϦʔε൛

    →ϦϦʔε!
    

    View Slide

25. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    )PTUJOH 7VFKT
    
    • ؀ڥΛ஍ຯʹ࢖͍෼͚
    
    • “config/dev.env.js”, “build/webpack.dev.conf.js” / ։ൃ൛
    
    • “config/stg.env.js”, “build/webpack.stg.conf.js” / εςʔδϯά൛
    
    • “config/prod.env.js”, “build/webpack.prod.conf.js” / ϦϦʔε൛
    
    • ։ൃ൛Λ࢖͏৔߹

    →ϩʔΧϧͰ “yarn dev” ࣮ߦ
    
    • εςʔδϯά൛Λ࢖͏৔߹

    →ϩʔΧϧͰ “yarn build && yarn deploy” ࣮ߦ
    
    • ϦϦʔε൛Λ࢖͏৔߹

    →ϩʔΧϧͰ “yarn rel-build && yarn rel-deploy” ࣮ߦ
    

    View Slide

26. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    'VODUJPOT /PEFKT
    
    • ؀ڥม਺Λ஍ຯʹ࢖͍෼͚

    …͔͕ͨͬͨɺएׯ໘౗ɻ
    
    • ։ൃ൛Λ࢖͏৔߹

    →ϩʔΧϧͰ “npm run serve” ࣮ߦ
    
    • εςʔδϯά൛Λ࢖͏৔߹

    →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn deploy” ࣮ߦ
    
    • ϦϦʔε൛Λ࢖͏৔߹

    →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn rel-deploy” ࣮ߦ
    

    View Slide

27. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ·ͱΊ
    

    View Slide

28. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ·ͱΊ
    • Vue.js + Firebase Ͱ

    ʮʹΌʔΜʯͱͳ͘WebΞϓϦΛ࡞ͬͨɻ
    
    • Firebase Λ࢖͏ͱɺ

    ؆୯ʹϑϩϯτΤϯυத৺ͷαʔϏεΛ࡞ΕΔɻ
    
    • ؀ڥͷ࢖͍෼͚΋ Vue.js + Firebase ͰͰ͖Δɻ
    

    View Slide

29. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ·ͱΊ
    • Vue.js ͷίϯϙʔωϯτͳͲͷߏ੒͸ɺ

    ϦϑΝΫλͷ༨஍͋Γɻ
    
    • ͦ΋ͦ΋ɺVue CLI 3 Ͱ࡞Γ௚͍ͨ͠ɻ
    
    • ؀ڥͷઃఆ΍࢖͍෼͚͸ɺ

    ͪΌΜͱ੔ཧɾखॱԽ͓͖͍ͯͨ͠ɻ
    

    View Slide

30. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    13
    

    View Slide

31. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ΏΔ8FCษڧձ
    XJUI.POBDB6(JO4BQQPSP
    

    View Slide

32. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ΏΔ8FCษڧձ
    XJUI.POBDB6(JO4BQQPSP
    2019೥5݄30೔ (໦)
    ։࠵ܾఆ!!!
    

    View Slide

33. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ΏΔ8FCษڧձ
    XJUI.POBDB6(JO4BQQPSP
    Monaca ͱ͸?
    → HTML/CSS/JavaScriptͰ

    ɹεϚϗΞϓϦΛ࡞ΕΔ

    ɹϓϥοτϑΥʔϜ
    

    View Slide

34. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ΏΔ8FCษڧձ
    XJUI.POBDB6(JO4BQQPSP
    ڵຯͷ͋Δํ͸

    ӈͷQRίʔυΛνΣοΫ!!
    

    View Slide

35. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    ΏΔ8FCษڧձ
    XJUI.POBDB6(JO4BQQPSP
    ٸื:

    ɹ͜ͷษڧձͰ

    ɹൃදͯ͘͠ΕΔਓ!
    20෼࿮ 1໊ / LT(5෼)࿮ 1໊
    

    View Slide

36. ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL
    FOE
    

    View Slide