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

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

Transcript

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

   
   8FCΞϓϦΛ࡞ͬͨ࿩ 2019/05/11 7VFKT
   
   'JSFCBTF
   
2. ΏΔ8FCษڧձ!ࡳຈ
   ΏΔ8FCࡳຈ
   !UBDDL ୭ • ໊લ tacck • ࢓ࣄ Vue.jsΛʮ΍ͬͯͶʯͱ
 ؙ౤͛͢Δਓ • ޷͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
3. ΏΔ8FCษڧձ!ࡳຈ
   ΏΔ8FCࡳຈ
   !UBDDL /ZBO
   /ZBO
   /ZBO
   
4. ΏΔ8FCษڧձ!ࡳຈ
   ΏΔ8FCࡳຈ
   !UBDDL /ZBO
   /ZBO
   /ZBO • ࡞ͬͨ΋ͷͷ঺հ • Firebaseͷͬ͘͟Γ֓ཁ • ίʔυͷ঺հ
5. ΏΔ8FCษڧձ!ࡳຈ
   ΏΔ8FCࡳຈ
   !UBDDL /ZBO
   /ZBO
   /ZBO
   ը໘
6. ΏΔ8FCษڧձ!ࡳຈ
   ΏΔ8FCࡳຈ
   !UBDDL /ZBO
   /ZBO
   /ZBO
   ը໘
7. ΏΔ8FCษڧձ!ࡳຈ
   ΏΔ8FCࡳຈ
   !UBDDL 'JSFCBTF
   ͱ͸
8. ΏΔ8FCษڧձ!ࡳຈ
   ΏΔ8FCࡳຈ
   !UBDDL ͦ΋ͦ΋ • FirebaseΛฉ͍ͨ͜ͱ͋Δਓ? ✋
9. ΏΔ8FCษڧձ!ࡳຈ
   ΏΔ8FCࡳຈ
   !UBDDL ͦ΋ͦ΋ • FirebaseΛ࢖ͬͨ͜ͱ͋Δਓ?
10. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL 'JSFCBTFͱ͸ • mBaaSͱݺ͹ΕΔαʔϏε • ϞόΠϧ޲͚ͷόοΫΤϯυػೳΛఏڙͯ͘͠ΕΔ΋ͷɻ
 ( Mobile Backend as a Service ) • ϞόΠϧ޲͚ͱ͋Δ͕ɺJavaScriptͰར༻Ͱ͖Δػೳ΋͍͔ͭ͋͘Δɻ • ແྉར༻࿮΋ͦͦ͜͜࢖͑Δɻ
 (ࠓճઆ໌͢ΔϑϩϯτΤϯυ޲͚ͷػೳ͸ɺແྉར༻࿮͕͋Δɻ)
11. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL N#BB4
    ͷΧόʔൣғ Πϯϑϥ όοΫΤϯυ ϑϩϯτΤϯυ ϞόΠϧΞϓϦ
12. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL Πϯϑϥ όοΫΤϯυ N#BB4
    ͷΧόʔൣғ ϑϩϯτΤϯυ ϞόΠϧΞϓϦ ͜ͷ͘Β͍໘౗Λݟͯ͘ΕΔ (όοΫΤϯυͷҰ෦͸
 ࣗ෼Ͱ࣮૷Մೳ)
13. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL 'JSFCBTF
    ͰͰ͖Δ͜ͱ
    ओʹϑϩϯτΤϯυͰ
14. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ओͳ'JSFCBTFͷػೳ • Πϯϑϥ • Hosting / WebαʔόͱσΟεΫྖҬ • HTMLɺCSSɺJSͳͲͷ੩తϑΝΠϧΛ͙͢ʹσϓϩΠՄೳɻ • Functions / όοΫΤϯυػೳ • Node.jsͰόοΫΤϯυػೳΛ࣮૷Մೳɻ • ࣗ෼Ͱ࣮૷͢ΔͷͰΠϯϑϥଆͷػೳͱͳΔɻ
15. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ओͳ'JSFCBTFͷػೳ • όοΫΤϯυ • Authentication / ೝূ • EmailɺTwitterɺGoogle AccountɺͳͲ΋࢖͑Δೝূػೳɻ • Cloud Firestore / σʔλϕʔε • NoSQLܕͷσʔλϕʔεͱͯ͠ར༻Մೳɻ
16. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL Hosting Functions Firebase Local Hosting Functions Authentication Firestore
17. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL Hosting Functions Firebase Local Hosting Functions σϓϩΠ Authentication Firestore
18. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL Hosting Functions Firebase WebαΠτ API Authentication Firestore SDKͰར༻ σϓϩΠ׬ྃͨ͠Β ͙͢ʹར༻Մೳ
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
20. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL /ZBO
    /ZBO
    /ZBO
 ɹͷத਎
    
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ͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍ ͜ͷ͋ͨΓͷ࿩
22. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL )PTUJOH
    7VFKT • ίʔυΛͬ͘͟Γ
23. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL 'VODUJPOT
    /PEFKT • ίʔυΛͬ͘͟Γ
24. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ؀ڥ • ։ൃ൛
 →खݩͰಈ͔͠ͳ͕Βਵ࣌֬ೝ • εςʔδϯά൛
 →Firebase্Ͱ૝ఆ௨Γʹಈ͔͘ͷ֬ೝ • ϦϦʔε൛
 →ϦϦʔε!
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” ࣮ߦ
26. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL 'VODUJPOT
    /PEFKT • ؀ڥม਺Λ஍ຯʹ࢖͍෼͚
 …͔͕ͨͬͨɺएׯ໘౗ɻ • ։ൃ൛Λ࢖͏৔߹
 →ϩʔΧϧͰ “npm run serve” ࣮ߦ • εςʔδϯά൛Λ࢖͏৔߹
 →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn deploy” ࣮ߦ • ϦϦʔε൛Λ࢖͏৔߹
 →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn rel-deploy” ࣮ߦ
27. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ·ͱΊ
28. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ·ͱΊ • Vue.js + Firebase Ͱ
 ʮʹΌʔΜʯͱͳ͘WebΞϓϦΛ࡞ͬͨɻ • Firebase Λ࢖͏ͱɺ
 ؆୯ʹϑϩϯτΤϯυத৺ͷαʔϏεΛ࡞ΕΔɻ • ؀ڥͷ࢖͍෼͚΋ Vue.js + Firebase ͰͰ͖Δɻ
29. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ·ͱΊ • Vue.js ͷίϯϙʔωϯτͳͲͷߏ੒͸ɺ
 ϦϑΝΫλͷ༨஍͋Γɻ • ͦ΋ͦ΋ɺVue CLI 3 Ͱ࡞Γ௚͍ͨ͠ɻ • ؀ڥͷઃఆ΍࢖͍෼͚͸ɺ
 ͪΌΜͱ੔ཧɾखॱԽ͓͖͍ͯͨ͠ɻ
30. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL 13
31. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ΏΔ8FCษڧձ
    
    XJUI
    .POBDB
    6(
    JO
    4BQQPSP
32. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ΏΔ8FCษڧձ
    
    XJUI
    .POBDB
    6(
    JO
    4BQQPSP 2019೥5݄30೔ (໦) ։࠵ܾఆ!!!
33. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ΏΔ8FCษڧձ
    
    XJUI
    .POBDB
    6(
    JO
    4BQQPSP Monaca ͱ͸? → HTML/CSS/JavaScriptͰ
 ɹεϚϗΞϓϦΛ࡞ΕΔ
 ɹϓϥοτϑΥʔϜ
34. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ΏΔ8FCษڧձ
    
    XJUI
    .POBDB
    6(
    JO
    4BQQPSP ڵຯͷ͋Δํ͸
 ӈͷQRίʔυΛνΣοΫ!!
35. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL ΏΔ8FCษڧձ
    
    XJUI
    .POBDB
    6(
    JO
    4BQQPSP ٸื:
 ɹ͜ͷษڧձͰ
 ɹൃදͯ͘͠ΕΔਓ! 20෼࿮ 1໊ / LT(5෼)࿮ 1໊
36. ΏΔ8FCษڧձ!ࡳຈ
    ΏΔ8FCࡳຈ
    !UBDDL FOE