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
640
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
Chinen
January 21, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.2k
WWDC2023-Recap-LT
chinen
1
86
Web Push対応状況2023
chinen
0
430
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
120
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
350
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
310
Other Decks in Programming
See All in Programming
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
540
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.7k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
850
Snowflakeで眠ったデータを起こそう!
estie
0
160
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
700
slow types ってなんだろう?
karad
0
170
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
350
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
470
Elm 0.19.0 Changes
bkuhlmann
0
510
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
930
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
How to train your dragon (web standard)
notwaldorf
75
5.2k
GraphQLとの向き合い方2022年版
quramy
33
12k
Facilitating Awesome Meetings
lara
43
5.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Code Review Best Practice
trishagee
56
15k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
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アプリ 事例③ コスパ計算アプリ