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
830
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
110
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.2k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
850
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.8k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Porting a visionOS App to Android XR
akkeylab
0
460
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
効率的な開発手段として VRTを活用する
ishkawa
0
140
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Invisible Side of Design
smashingmag
301
51k
Facilitating Awesome Meetings
lara
54
6.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Cult of Friendly URLs
andyhume
79
6.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
A Tale of Four Properties
chriscoyier
160
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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アプリ 事例③ コスパ計算アプリ