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
PWA導入を楽にするFirebase
Search
Daiki Takaya
April 17, 2018
Programming
0
1.9k
PWA導入を楽にするFirebase
Daiki Takaya
April 17, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
570
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
470
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
190
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
610
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
700
XP, Testing and ninja testing
m_seki
3
220
エラーって何種類あるの?
kajitack
5
340
WindowInsetsだってテストしたい
ryunen344
1
230
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Raft: Consensus for Rubyists
vanstee
140
7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Navigating Team Friction
lara
187
15k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Transcript
PWA導入を楽にする Firebase 株式会社ソニックガーデン 高谷大樹
自己紹介 高谷大樹(たかやだいき) 埼玉在住 24歳 2018年新卒でソニックガーデンに入社 夢: 「 おじいさんになってもお酒とプログラミングは現役で いること」
普段の活動 まかない食堂
Firebaseって? 1. サーバーレス => googleさんのサーバーと fastlyのCDN 2. クライアントだけでデータの永続化 3. 超簡単なデプロイ作業
今までのweb
Firebase デプロイ! googleサーバ Fastly製
Firebaseはなにが 嬉しいのか?
全部セットアップされてるぜ WEBサーバー, APPサーバーを入れなくても大 丈夫! nginx, unicorn, MySQLなにそれ? うまいの?から始められる。
基本は無料 PWAを試すぐらいには十分! 外部APIを叩く, データのバックアップなどしな ければ、無料で利用できる。
セットアップ方法 1. まずは登録 2. CDNで読み込み 3. Firebase Toolsをnpmでインストール
None
None
None
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script> <script> const config = { apiKey: "<API_KEY>", authDomain:
"<PROJECT_ID>.firebaseapp.com", databaseURL: "https://<DATABASE_NAME>.firebaseio.com", storageBucket: "<BUCKET>.appspot.com", messagingSenderId: "<SENDER_ID>", }; firebase.initializeApp(config); </script>
辛いサーバーセットアップからの 解放
{ "hosting": { "public": "dist", "rewrites": [ { "source": "**",
"destination": "/index.html" } ] } } firebase.json
Vue CLIしてプロジェクトの雛形作成 https://qiita.com/567000/items/dde495d6a8ad1c2 5fa43 $ npm install -g vue-cli $
vue init webpack my-project
1. npm install -g firebase-tools 2. $ cd ~/my-project(作業dir) 3.
$ firebase init 4. $ firebase deploy
どうやってデータ保存? Cloud Fire Store Real Time Database
データの追加方法 var admin = require("firebase-admin"); var db = admin.database(); var
usersRef = db.ref.child("users"); usersRef.set({ { name: “高谷”, age: 24, email: “
[email protected]
” });
データのCRUD 1. set(データ作成, すでにデータがあると上 書き) 2. update(そのまま) 3. add(JSONツリーにデータを追加) 4.
transaction(そのまま)
どれもkey value形式
正規化は捨てよう!(1) データはフラットに! 深いネストは悪
正規化は捨てよう!(2) { "chats": { "room01": { "title": "チャットルーム01", "messages": {
"message01": { "sender": "Fumihiko Shiroyama", "message": "こんにちは。誰かいますか? " }, "message02": { ... }, "message03": { ... } } }, "room02": { ... } } }
正規化は捨てよう!(3) { "users": { "shiroyama": { "name": "Fumihiko Shiroyama" },
}, "rooms": { "room01": {} }, "room02": { ... } }, "messages": { "room01": { "message01": { "sender": "shiroyama", "message": "こんにちは。誰かいますか?" }, } }
まとめ 1. サーバー管理からの解放 2. CDNで簡単な導入 3. 無料
ご静聴ありがとうございました。