Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
FirebaseとVue.jsでWebアプリモック速攻開発 / Firebase + Vue.js Meetup
Chinen
May 21, 2019
Technology
0
88
FirebaseとVue.jsでWebアプリモック速攻開発 / Firebase + Vue.js Meetup
Chinen
May 21, 2019
Tweet
Share
More Decks by Chinen
See All by Chinen
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
chinen
0
36
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
chinen
1
180
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
chinen
0
800
Shifter staticでREST APIしたい / Shifter Meetup 2020-12-02
chinen
0
460
実践PWA 2020 / charitycon_oki2020
chinen
0
380
Shifterを選定するまでに検討したこと / shifter-meetup0603
chinen
0
520
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
chinen
1
350
ポートフォリオ作る話 / PWA Night vol.12
chinen
0
53
Vue.jsの基礎 / v-okinawa meetup #2
chinen
0
110
Other Decks in Technology
See All in Technology
Modern Android dependency injection
hugovisser
1
130
SlackBotで あらゆる業務を自動化。問い合わせ〜DevOpsまで #CODT2022
kogatakanori
0
850
DeepL の用語集が(いつのまにか)日本語に対応してたので試してみた
irokawah0
0
150
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
18k
約6年間運用したシステムをKubernetesに完全移行するまで/Kubernetes Novice Tokyo
isaoshimizu
5
850
#JP_Stripes Sapporo Stripeの活用例を色々ご紹介します!
miu_crescent
0
110
Retca Cloud
bau
0
510
OpsJAWS Meetup21 システム運用アンチパターンのすすめ
yoshiiryo1
0
1.4k
RDRA + JavaによるレジャーSaaSプロダクトの要件定義と実装のシームレスな接続
jjebejj
PRO
3
620
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
freee
0
240
データをモデリングしていたら、組織をモデリングし始めた話 / engineers-in-carta-vol3-data-engineer
pei0804
4
3.3k
セキュリティ 開運研修2022 / security 2022
cybozuinsideout
PRO
3
3.8k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
157
12k
We Have a Design System, Now What?
morganepeng
35
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
105
16k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
What's in a price? How to price your products and services
michaelherold
229
9.4k
Building Your Own Lightsaber
phodgson
94
4.6k
Designing the Hi-DPI Web
ddemaree
272
32k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Ruby is Unlike a Banana
tanoku
91
9.2k
Clear Off the Table
cherdarchuk
79
280k
Transcript
FirebaseとVue.jsで Webアプリモック速攻開発 2019/5/21 知念 昌史
知念 昌史 / Masashi Chinen • フロントエンドエンジニア@株式会社TAM • 技術コミュニティPWA Night
アンバサダー(自称→公式?) • 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 • 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年目 • 来週末に沖縄移住(フルリモートワークになるぞ)
まとめ ・Firebaseは無料枠でも機能が豊富、機能単体でも使用可能 ・DatabaseとHostingの機能だけでも、サーバー側の構築無しで データと連携したWebアプリを公開できる ・フロントエンドの知識(HTML・CSS・JavaScript)があれば十分 ・とにかく作ってみるのが一番!!
事例①
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アプリ 事例③ コスパ計算アプリ