FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4

by Chinen

Slide 1

Slide 1 text

FirebaseとVue.jsで Webアプリモック速攻開発 2020/01/21　知念昌史

Slide 2

Slide 2 text

知念昌史 / Masashi Chinen ● フロントエンドエンジニア＠株式会社TAM ● 技術コミュニティ運営　沖縄：v-okinawa / 東京：PWA Night ● 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 ● 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験からスタートしてフロントエンド8年くらい ● ポケモン剣盾が欲しすぎる生活

Slide 3

Slide 3 text

事例①

Slide 4

Slide 4 text

365日貯金って知ってますか？

Slide 5

Slide 5 text

365日貯金とは・・・ 1～365までの数字の書いた表を作って、一日一回、好きな数字を選んでその金額を貯金するという方法。例）5という数字を選んだ場合、5円を貯金箱に入れる一日の負担は1円〜最大でも365円！クリアすると、なんと66,795円！！！

Slide 6

Slide 6 text

そもそも表を作るのめんどいw 表をチェックするだけの作業つまらん

Slide 7

Slide 7 text

Webアプリ作った！！制作時間：3時間くらい ● ブラウザで操作できる ● タップするとその数字がアクティブになる ● 数字のステータスはFirebaseに保存される

Slide 8

Slide 8 text

事例②

Slide 9

Slide 9 text

トイレIoT、流行りましたね（遠い目

Slide 10

Slide 10 text

会社のトイレ空き状況を席にいながら知りたい！！光センサーの情報をFirebaseに保存、ブラウザで確認できるようにする！光センサー MESH - Sony データベース Vue.jsを使ってブラウザに表示リアルタイムで切り替わる

Slide 11

Slide 11 text

こんなやつ制作時間：1日〜2日くらい空いているとき・・・◎ 誰かが入っているとき・・・✕ ブラウザをリロードしなくてもリアルタイムで切り替わる

Slide 12

Slide 12 text

事例③

Slide 13

Slide 13 text

コスパが良いのは（お得）どっち？ 398円のマヨネーズ内容量：450g 298円のマヨネーズ内容量：340g A　　　　　　　　　B

Slide 14

Slide 14 text

計算めんどくさいので Webアプリ作った

Slide 15

Slide 15 text

こんなやつ

Slide 16

Slide 16 text

一緒に計算してみよう 398円のマヨネーズ内容量：450g 298円のマヨネーズ内容量：340g A　　　　　　　　　B

Slide 17

Slide 17 text

ちなみに・・・このコスパ計算アプリはPWA対応！！（A2HS）制作時間：3時間くらい PWA対応：プラス半日〜1日くらい、今後も追加改修予定 FirebaseのHostingを使うと、デフォルトでHTTPSのURLとなるため、証明書を用意する手間がはぶける FirebaseはPWAのサンプル環境としてもオススメ！

Slide 18

Slide 18 text

iOSの人 Androidの人

Slide 19

Slide 19 text

まとめ・Firebaseは無料枠でも機能が豊富、機能単体でも使用可能・DatabaseとHostingの機能だけでも、サーバー側の構築無しでデータと連携したWebアプリを公開できる・フロントエンドの知識（HTML・CSS・JavaScript）があれば十分・とにかく作ってみるのが一番！！作ったら僕にも教えて！

Slide 20

Slide 20 text

ご清聴ありがとうございました！！！ Twitter @chocodogmagic まぁし見本が見たい方は声かけてください！実践PWAもあります！良かったらフォローしてね！今日のサンプルたち事例① 365日貯金アプリ事例② トイレIoTアプリ事例③ コスパ計算アプリ