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
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
Search
Chinen
January 21, 2020
Programming
1
780
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
Chinen
January 21, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
71
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.2k
MTDDC Meetup TOKYO 2023
chinen
2
360
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.9k
WWDC2023-Recap-LT
chinen
1
140
Web Push対応状況2023
chinen
0
540
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
170
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
180
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.4k
Other Decks in Programming
See All in Programming
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
4.8k
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
220
Scaling your build logic
antalmonori
1
150
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
1
200
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1k
SpringBoot3.4の構造化ログ #kanjava
irof
2
770
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
250
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
990
Rubyでつくるパケットキャプチャツール
ydah
0
530
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
ErdMap: Thinking about a map for Rails applications
makicamel
1
1.1k
為你自己學 Python
eddie
0
540
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
270
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Building Applications with DynamoDB
mza
93
6.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
380
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Being A Developer After 40
akosma
89
590k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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アプリ 事例③ コスパ計算アプリ