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.8k
PWA導入を楽にするFirebase
Daiki Takaya
April 17, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
Milestoner
bkuhlmann
1
410
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
Domain-Driven Transformation
hschwentner
2
1.5k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
Next.js App Router
quramy
12
1.8k
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
110
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
雑に思考を整理する技術と効能
konifar
63
30k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
760
Ruby Pattern Matching
bkuhlmann
0
930
Polars入門
daikikatsuragawa
1
170
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
540
Featured
See All Featured
Embracing the Ebb and Flow
colly
80
4.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Scaling GitHub
holman
457
140k
4 Signs Your Business is Dying
shpigford
176
21k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Product Roadmaps are Hard
iamctodd
45
9.7k
What the flash - Photography Introduction
edds
64
11k
Writing Fast Ruby
sferik
622
60k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
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. 無料
ご静聴ありがとうございました。