$30 off During Our Annual Pro Sale. View Details »

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

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

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

Kihara, Takuya

May 17, 2019
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

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