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を使って簡単にサイト作成!半年でそれっぽい クイズアプリを作成する!
Search
YukiWatanabe
February 02, 2023
Programming
0
63
firebaseを使って簡単にサイト作成!半年でそれっぽい クイズアプリを作成する!
https://pwanight.connpass.com/event/194223/
で発表した資料です。
YukiWatanabe
February 02, 2023
Tweet
Share
More Decks by YukiWatanabe
See All by YukiWatanabe
Chrome拡張機能の新機能 Side Panel APIについて
yutaroud
0
580
Other Decks in Programming
See All in Programming
受託開発でGitLab CI を活用していく
xiombatsg
1
100
マイ隙間家具OSSたちのご紹介
karupanerura
2
150
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
24
7.3k
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
160
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.8k
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
390
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
2.2k
Dockerで始めるAWS Lambda開発
stutkhd0709
13
2.5k
Honoとhtmx
yusukebe
6
1.2k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
How GitHub (no longer) Works
holman
301
140k
Into the Great Unknown - MozCon
thekraken
10
830
Adopting Sorbet at Scale
ufuk
66
8.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Code Review Best Practice
trishagee
54
15k
Product Roadmaps are Hard
iamctodd
43
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
What's in a price? How to price your products and services
michaelherold
236
11k
We Have a Design System, Now What?
morganepeng
42
6.7k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Transcript
2020/11/18 PWA Night vol.22 firebaseで簡単にサイトを作りましょう! 半年でそれっぽい クイズアプリを作成する
サービスの紹介 ◦クイズを作ったり、解いたりできる ◦何かを「学びたい」時に使ってもらう ▪繰り返し解いて学べる ▪問題を作ることで学びになる ここからアクセスできます 🙂
今日話すこと 機能紹介 • クイズ解答機能 • クイズ作成機能 • マイページ • メディア
システムの裏側 • こんな技術を使いました • 工夫した箇所 \こんなことを話します!/
MDNでは 安全なコンテキスト (HTTPS)、1つ以上のサービスワー カー、マニフェストファイルを持つ※1 みんなのスタディはサービスワーカーは使ってません。 (オフライン利用等できないのでご認識お願いします) ※1 https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps 前置き PWAの定義(諸説あります)
01 機能紹介
機能紹介① クイズを解く
機能紹介② クイズを作る マイページ
機能紹介③ メディア
02 システムの裏側 Behind the system
サイト構成 route53 firestore firebase Auth firebase hosting cloud function react
サイト構成 route53 firestore firebase Auth firebase hosting cloud function react
OGP対応 OGPの例 Botによっては、jsを正しく解釈できない可能性があるので、 予めビルドしたものを解釈させる必要がある。
OGP対応 "hosting": { "public": "build", "rewrites": [ { "source": "/answer/**",
"function": "returnHtmlWithOGP" }, ~~~~~~ ], ~~~~~~~ } firebase.jsonに特定のリクエストのときだけ、 別途定義したfunctionを使うように指定するだけ!
サイト構成 route53 firestore firebase Auth firebase hosting cloud function react
持っているデータ クイズデータ ユーザデータ
クイズデータについて クイズデータ quiz: { categories: { label: “ビジネス” value: “business”
} userId: 1 creater: “なべ” title: “マーケ用語検定” description: “〜〜〜” content: { 0: { question: “CTAはなんの略” explanation: “マーケ用語で~~” answer: “Call to Action” false1: “~~~” false2: “~~~” } 1: {~~} } limited: false createdAt: xxxx/xx/xx updatedAt: xxxx/xx/xx }
なぜこんなデータ構成? 1書き込み、読み込みあたりに料金がかかるため
キャッシュもできます cloud function firebase hosting 予めfirestoreから データ取得 キャッシュした データから読み込み
使ってみてよかったこと • 環境構築がかなり楽、スピードは早い。 • 関連機能がかなりあるので、簡単なアプリ作成はかなり 楽
使ってみてつらかったこと • 従量課金のため、いつ課金されるかが怖い ◦ Alertの設定はマスト 無料プランもあるが、cloud functionsが使えない。 • インフラ側の細かいチューニングがやりづらい
Thanks ありがとうございました!