Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「にゃーん」となくWebアプリを作った話 #ゆるWeb札幌
Search
Kihara, Takuya
PRO
May 17, 2019
Technology
1
420
「にゃーん」となくWebアプリを作った話 #ゆるWeb札幌
Vue.js + Firebase で作った個人サービスの話。
https://nyan3.tacck.net/
Kihara, Takuya
PRO
May 17, 2019
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
Flutter を始めよう! - Flutter の開発現場から
tacck
PRO
0
60
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
95
ゆるWeb勉強会@札幌 #29 #ゆるWeb札幌
tacck
PRO
0
110
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
420
はじめまして GoLang #cm_sapporo_study
tacck
PRO
0
120
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
75
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
110
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
1
850
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
64
Other Decks in Technology
See All in Technology
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
140
LLM時代の検索
shibuiwilliam
2
640
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
2
690
ロールが細分化された組織でSREは何をするか?
tgidgd
1
200
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
230
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
120
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
830
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
160
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Why Our Code Smells
bkeepers
PRO
336
57k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
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