ΏΔ8FCษڧձ!ࡳຈ @tacck ʮʹΌʔΜʯͱͳ͘
 8FCΞϓϦΛ࡞ͬͨ࿩ 2019/05/11 7VFKT'JSFCBTF

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ୭ • ໊લ tacck • ࢓ࣄ Vue.jsΛʮ΍ͬͯͶʯͱ
 ؙ౤͛͢Δਓ • ޷͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ

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

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

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

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

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

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

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

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'JSFCBTFͱ͸ • mBaaSͱݺ͹ΕΔαʔϏε • ϞόΠϧ޲͚ͷόοΫΤϯυػೳΛఏڙͯ͘͠ΕΔ΋ͷɻ
 ( Mobile Backend as a Service ) • ϞόΠϧ޲͚ͱ͋Δ͕ɺJavaScriptͰར༻Ͱ͖Δػೳ΋͍͔ͭ͋͘Δɻ • ແྉར༻࿮΋ͦͦ͜͜࢖͑Δɻ
 (ࠓճઆ໌͢ΔϑϩϯτΤϯυ޲͚ͷػೳ͸ɺແྉར༻࿮͕͋Δɻ)

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

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

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

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

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

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

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

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

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

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBO
 ɹͷத਎

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

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

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

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ؀ڥ • ։ൃ൛
 →खݩͰಈ͔͠ͳ͕Βਵ࣌֬ೝ • εςʔδϯά൛
 →Firebase্Ͱ૝ఆ௨Γʹಈ͔͘ͷ֬ೝ • ϦϦʔε൛
 →ϦϦʔε!

ΏΔ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” ࣮ߦ

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'VODUJPOT /PEFKT • ؀ڥม਺Λ஍ຯʹ࢖͍෼͚
 …͔͕ͨͬͨɺएׯ໘౗ɻ • ։ൃ൛Λ࢖͏৔߹
 →ϩʔΧϧͰ “npm run serve” ࣮ߦ • εςʔδϯά൛Λ࢖͏৔߹
 →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn deploy” ࣮ߦ • ϦϦʔε൛Λ࢖͏৔߹
 →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn rel-deploy” ࣮ߦ

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

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ·ͱΊ • Vue.js + Firebase Ͱ
 ʮʹΌʔΜʯͱͳ͘WebΞϓϦΛ࡞ͬͨɻ • Firebase Λ࢖͏ͱɺ
 ؆୯ʹϑϩϯτΤϯυத৺ͷαʔϏεΛ࡞ΕΔɻ • ؀ڥͷ࢖͍෼͚΋ Vue.js + Firebase ͰͰ͖Δɻ

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ·ͱΊ • Vue.js ͷίϯϙʔωϯτͳͲͷߏ੒͸ɺ
 ϦϑΝΫλͷ༨஍͋Γɻ • ͦ΋ͦ΋ɺVue CLI 3 Ͱ࡞Γ௚͍ͨ͠ɻ • ؀ڥͷઃఆ΍࢖͍෼͚͸ɺ
 ͪΌΜͱ੔ཧɾखॱԽ͓͖͍ͯͨ͠ɻ

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

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

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

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP Monaca ͱ͸? → HTML/CSS/JavaScriptͰ
 ɹεϚϗΞϓϦΛ࡞ΕΔ
 ɹϓϥοτϑΥʔϜ

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP ڵຯͷ͋Δํ͸
 ӈͷQRίʔυΛνΣοΫ!!

ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP ٸื:
 ɹ͜ͷษڧձͰ
 ɹൃදͯ͘͠ΕΔਓ! 20෼࿮ 1໊ / LT(5෼)࿮ 1໊

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