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

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