FirebaseとVue.jsでWebアプリモック速攻開発2020/01/21 知念 昌史
View Slide
知念 昌史 / 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円のマヨネーズ内容量：450g298円のマヨネーズ内容量：340gA B
計算めんどくさいのでWebアプリ作った
こんなやつ
一緒に計算してみよう398円のマヨネーズ内容量：450g298円のマヨネーズ内容量：340gA 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アプリ事例③コスパ計算アプリ
chinen
nacatl
vrallev
jmatsu
suzukihoge
teamlab
jrf
wadayusuke
daipresents
quramy
shimabox
joker1007
ogiwarat
morganepeng
colly
scottboms
3n
aki_iinuma
smashingmag
soudai
destraynor
paulrobertlloyd
marcelosomers
hursman
thoeni