Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
「にゃーん」となくWebアプリを作った話 #ゆるWeb札幌
Kihara, Takuya
May 17, 2019
Technology
1
290
「にゃーん」となくWebアプリを作った話 #ゆるWeb札幌
Vue.js + Firebase で作った個人サービスの話。
https://nyan3.tacck.net/
Kihara, Takuya
May 17, 2019
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
AWS Lambda SnapStart で Java の起動高速化できるって本当ですか? #javado
tacck
0
44
ゆるWeb勉強会@札幌 OnLine #22 #ゆるWeb札幌
tacck
0
11
5分でまとめる AWS Amplify アップデート 2022年末版 #ゆるWeb札幌
tacck
0
85
「普通」のエンジニアとしての生存戦略 - または、いかにして技術を楽しむか。
tacck
0
3
AWS Step Functions を AWS Amplify から呼び出した #ゆるWeb札幌
tacck
0
61
ゆるWeb勉強会@札幌 OnLine #21 #ゆるWeb札幌
tacck
0
2
フロントエンド勢から見たAPAC Community Summit記 #jawsug #AWSCommunityAPAC
tacck
0
110
今から始める Amplify Studio - JAWS DAYS版 #jawsug #jawsdays #jawsdays2022
tacck
0
140
今から始める Amplify Studio #stapy
tacck
0
420
Other Decks in Technology
See All in Technology
ECテックカンファレンス2023 EC事業部のモバイル開発2023
tatsumi0000
0
340
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
3
770
230125 モニターマウントLT ITガジェット翁(Ryu.Cyber)さん
comucal
PRO
0
4.8k
Logbii(ログビー) 会社紹介
logbii
0
160
地方自治体業務あるある ーアナログ最適化編-
y150saya
1
270
Periodic Multi-Agent Path Planning
hziwara
0
120
KyvernoとRed Hat ACMを用いたマルチクラスターの一元的なポリシー制御
ry
0
230
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
2
1k
PCI DSS に準拠したシステム開発
yutadayo
0
310
ユーザーテストガイドライン VERSION 2.0
kouzoukaikaku
0
1.5k
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
0
150
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
170
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Facilitating Awesome Meetings
lara
33
4.6k
4 Signs Your Business is Dying
shpigford
171
20k
Automating Front-end Workflow
addyosmani
1351
200k
Visualization
eitanlees
128
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
How to name files
jennybc
47
73k
Designing for humans not robots
tammielis
245
24k
Gamification - CAS2011
davidbonilla
75
4.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
Transcript
ΏΔ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ܦ༝ͷײੳ) ※ແྉͷ߹FunctionsGoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍ • 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 ※ແྉͷ߹FunctionsGoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍ ͜ͷ͋ͨΓͷ
ΏΔ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 20195݄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