Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
Chinen
January 21, 2020
Programming
1
150
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
Chinen
January 21, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
chinen
0
140
chinen
0
270
chinen
0
280
chinen
0
30
chinen
0
81
chinen
0
160
chinen
1
360
chinen
0
55
chinen
0
1.1k
Other Decks in Programming
See All in Programming
akkeylab
0
320
aratayokoyama
0
180
sullis
0
110
viteinfinite
0
140
yshrsmz
1
440
kubode
0
170
akatsukinewgrad
0
130
siketyan
1
110
daiki1020
0
1.1k
zsmb
1
120
yumcyawiz
4
590
kazaman97
0
160
Featured
See All Featured
tanoku
86
8.5k
jnunemaker
PRO
40
4.5k
keathley
17
630
sugarenia
233
830k
roundedbygravity
84
7.8k
jensimmons
207
10k
keithpitt
401
20k
gr2m
83
11k
erikaheidi
13
4.2k
jponch
103
4.9k
rmw
11
740
andyhume
62
3.3k
Transcript
FirebaseとVue.jsで Webアプリモック速攻開発 2020/01/21 知念 昌史
知念 昌史 / Masashi Chinen • フロントエンドエンジニア@株式会社TAM • 技術コミュニティ運営 沖縄:v-okinawa /
東京:PWA Night • 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 • 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年くらい • ポケモン剣盾が欲しすぎる生活
事例①
365日貯金って知ってますか?
365日貯金とは・・・ 1~365までの数字の書いた表を作って、一日一回、好きな数字を選んでその金額を貯 金するという方法。 例)5という数字を選んだ場合、5円を貯金箱に入れる 一日の負担は1円〜最大でも365円! クリアすると、なんと66,795円!!!
そもそも表を作るのめんどいw 表をチェックするだけの作業つまらん
Webアプリ作った!! 制作時間:3時間くらい • ブラウザで操作できる • タップするとその数字がアクティブになる • 数字のステータスはFirebaseに保存される
事例②
トイレIoT、流行りましたね(遠い目
会社のトイレ空き状況を席にいながら知りたい!! 光センサーの情報をFirebaseに保存、ブラウザで確認できるようにする! 光センサー MESH - Sony データベース Vue.jsを使ってブラウザに表示 リアルタイムで切り替わる
こんなやつ 制作時間:1日〜2日くらい 空いているとき・・・◎ 誰かが入っているとき・・・✕ ブラウザをリロードしなくても リアルタイムで切り替わる
事例③
コスパが良いのは(お得)どっち? 398円の マヨネーズ 内容量:450g 298円の マヨネーズ 内容量:340g A B
計算めんどくさいので Webアプリ作った
こんなやつ
一緒に計算してみよう 398円の マヨネーズ 内容量:450g 298円の マヨネーズ 内容量:340g A B
ちなみに・・・ このコスパ計算アプリはPWA対応!!(A2HS) 制作時間:3時間くらい PWA対応:プラス半日〜1日くらい、今後も追加改修予定 FirebaseのHostingを使うと、デフォルトでHTTPSのURLとなるため、証明書を用意する 手間がはぶける FirebaseはPWAのサンプル環境としてもオススメ!
iOSの人 Androidの人
まとめ ・Firebaseは無料枠でも機能が豊富、機能単体でも使用可能 ・DatabaseとHostingの機能だけでも、サーバー側の構築無しで データと連携したWebアプリを公開できる ・フロントエンドの知識(HTML・CSS・JavaScript)があれば十分 ・とにかく作ってみるのが一番!!作ったら僕にも教えて!
ご清聴ありがとうございました!!! Twitter @chocodogmagic まぁし 見本が見たい方は 声かけてください! 実践PWAもあります! 良かったらフォローしてね! 今日のサンプルたち 事例①
365日貯金アプリ 事例② トイレIoTアプリ 事例③ コスパ計算アプリ