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

06753262e041911692e9a771b1877036?s=47 Chinen
January 21, 2020

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

06753262e041911692e9a771b1877036?s=128

Chinen

January 21, 2020
Tweet

Transcript

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

  2. 知念 昌史 / Masashi Chinen • フロントエンドエンジニア@株式会社TAM • 技術コミュニティ運営 沖縄:v-okinawa /

    東京:PWA Night • 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 • 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年くらい • ポケモン剣盾が欲しすぎる生活
  3. 事例①

  4. 365日貯金って知ってますか?

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

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

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

  8. 事例②

  9. トイレIoT、流行りましたね(遠い目

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

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

  12. 事例③

  13. コスパが良いのは(お得)どっち? 398円の マヨネーズ 内容量:450g 298円の マヨネーズ 内容量:340g A         B

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

  15. こんなやつ

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

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

  18. iOSの人 Androidの人

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

  20. ご清聴ありがとうございました!!! Twitter @chocodogmagic まぁし 見本が見たい方は 声かけてください! 実践PWAもあります! 良かったらフォローしてね! 今日のサンプルたち 事例①

    365日貯金アプリ 事例② トイレIoTアプリ 事例③ コスパ計算アプリ