Next.jsのアプリをFirebase Hostingでいい感じに連携する - Lento con forza
最近Next.jsとFirebaseばかりやっています。って書きましたが、本当はこの一ヶ月どうぶつの森しかやってませんでした。どうぶつの森のプレイ時間は200時間を超えました。 そろそろエンジニアとしても生活したくなってきたのでエンジニアっぽい話をします。Next.jsで作ったアプリをデプロイする先の選択肢として、Verselを使うと便利です。 SSRが必要なく、静的ファイルをデプロイすれば良い場合はFirebase Hostingなども選択肢に入ります。Firestoreなどと組み合わせて使っている時は、設定を工夫することで便利に使うことができます。今回の記事ではNext.jsで作ったアプリをFirebaseと組み合わせて使う方法を紹介します。 Firebase HostingにNext.jsの静的生成機能を使ってデプロイする まずは、npm initから始めます。 npm init n
[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け] - Qiita
[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け]TypeScriptFirebasecloudfunctionsFirestoreFirestore型付け係 8/18 更新 Custom Transformer を使用し、documentSchema<T>() の型引数 (T の部分) の AST 解析によって rules の文字列が自動生成できるようになったため、documentSchema() の引数が不要になりました スキーマレスな Firestore では、その気になれば一般ユーザーが予期しない構造のデータをセットできてしまうので、セキュリティルールで書き込み時のスキーマ検証を設定する必要があります。しかし、セキュリティルールはモデル定義に合わせて手動で書かなければならないのでミスが起きやすく、そのために
![[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/470856a8d7f01ac7fa91224f2b7499148075af95/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVFMlNUQlMjBGaXJlc3RvcmUlRTMlODIlOTIlRTUlOUUlOEIlRTUlQUUlODklRTUlODUlQTglRTMlODElQUIlRTMlODElOTklRTMlODIlOEIlRTMlODMlQTklRTMlODIlQTQlRTMlODMlOTYlRTMlODMlQTklRTMlODMlQUElMjBGaXJlc2NoZW1hJTIwJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJTlGJTIwJTVCcnVsZXMlRTglODclQUElRTUlOEIlOTUlRTclOTQlOUYlRTYlODglOTAlMkYlRTMlODMlODclRTMlODMlQkMlRTMlODIlQkYlRTglODclQUElRTUlOEIlOTUlRTUlOUUlOEIlRTQlQkIlOTglRTMlODElOTElNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTE2OWQxYjM5YTA1NDdlZDRmMDRlZjIwNjI5MDBhZDBl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YXJuYWltbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzhjNmUxNzhiZmViODQ2YTVlMzU0MzFhNTYzMTY0YjU%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g6YGL5Za26ICF44Ku44Or44OJ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3De1cd9f83ad2708613de33994c1d3bfc5)
Firebase をフロントエンドから適切に隠蔽するための「Hooks Injection パターン」 - JX通信社エンジニアブログ
取締役の小笠原(@yamitzky)です。 JX通信社では、React 製のフロントエンドでも Clean Architecture で設計するなど、なるべく特定のバックエンドに依存しない設計を心がけたりもするのですが、一方で Firebase をラップした react-firebase-hooks などの「便利な Hooks」を使って開発スピードを加速したい、という課題を持っていました。 そして先日、次の記事が話題になっていました。まさに「どう Firebase を隠蔽するか」と「どう Firebase を活用するか」を両立する悩みです。 blog.ojisan.io 結論を言うと「Hooks そのものを注入する」のが筋が良いのではないか と思っています。個人的に「Hooks Injection パターン」と名付けたこの方法をご紹介したいと思います。 今回の記事の完成形はソースコードを公
next.js + vercel + firebase authentication で JWT の検証を行う + Graphql
今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベースならこれ一択。 認証サーバーの実装は毎度疲れるし、Firebase Athunetication はこの点においては OAuth Secret を置くだけ + Custom Provider も作れるので、最高。 それと比べて firestore は、ちょっと前に firestore べったりでアプリを試作したことがあったのだが、型がないためにかなり扱いづらく、また読み書きの速度が遅くパフ
Firebaseの存在をフロントエンドから隠蔽するために
「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が適していたのに無理やり Firestore を採用したことによるデータ不整合。 その結果チーム内で Firebase を抜ける機運が高まるも、Firebase べっとりなアプリケーションすぎて移行しづらいといった問題に出会うかもしれません。 そのような場合に備え、Firebase の存在を隠蔽して開発することに挑戦してみましょう。 注意: Firebase を剥がしているときに「俺、次は絶対そうするわ」と感じたものを書いているだけであり、まだ実際にはこのパターンでプロダクション導入していません。 あくまで個人開発で試してみていけそうと思ったので、提案しますという体です。 また Firebase
Cloud Firestoreで「いいね」機能を実装するときの勘所
Cloud Firestoreで「いいね」機能を実装するときの勘所Tuesday, December 31, 2019 何かしらのサービスを作る際に、ユーザー同士のコミュニケーションを促進させる機能の一つに、 TwitterやInstagramなどのサービスでおなじみの「いいね」機能があります。 機能としては 投稿等に「いいね」をつけることができる（♡だったり☆だったりシンボルは様々) 「いいね」がどれだけついたか、その数がわかる (最近だとInstagramがいいねの数の表示をなくしましたね🤔) 投稿等に「いいね」をしたユーザーの一覧が見れる 自分が「いいね」をした投稿等の一覧が見れる といったものが挙げられます。 このような機能ををFirebase、Cloud Firestore(以下Firestore) を使って実装する場合、 どのように実装するのか、どのような設計が良いのか、 逆
Firebaseを活用したPUSH通知基盤構築
2018年7月2日、Firebase Japan User Groupが主催するイベント「Firebase Meetup #4」が開催されました。2011年に登場し、その後Googleが買収たことでクラウドプラットフォームの一員となったFirebase。その知見を共有するため、Firebaseをサービスに用いるエンジニアたちが一堂に会して、プレゼンテーションを行いました。「Firebaseを活用したPush通知基盤構築のよもやま話」では、danno氏が登壇この講演はcrash.academyでもご視聴いただけます。講演資料はこちら Firebaseを活用したPush通知基盤構築 danno氏（以下、danno）：こんにちは。テレビ東京コミュニケーションズのdannoと申します。 いつもFirebase User Groupには参加させていただいてて、フィードバックしないとなというところで、
Firestore で CQRS やってみた
Evolutionary Architecture - Discovering Boundaries @DevTalks 24
CloudFunctionとFirestoreで作るサーバーレスダッシュボード開発5つの勘所
はじめにこんにちは、Voicyデータストラテジストの小山内です。Voicyではプロダクトの大改修フェイズを迎えており、殆どのサービスを作り直す勢いで、開発チームが日夜開発に勤しんでいます！ ↓例えば、バックエンドは、ぱんでぃ(Yoshimasa Hamada)さんが担当しています。 大改修にも含まれる新機能の1つとして、”放送の聴取ログをパーソナリティさんに提供するダッシュボード”を開発する事となりました。 複数の実装方法を考えた中で、今回はGCPの各種プロダクトを活用した、サーバーレスなダッシュボードを作る方向性で検討を進めています。 本記事では、実際に技術検証を進めるに当たって、ポイントとなった点をサンプルコードと共に共有します。 同じ様なダッシュボード開発ではなくても、GCP製品をお使いの方で、参考になりそうな箇所があったら、嬉しい限りです！✏️ 対象読者と記事から得られるナレッジ対
ZOZO大忘年会でFirebaseを使った1,000人規模のリアルタイムアンケートを費用2円で制作した話 - Qiita
この記事はZOZOテクノロジーズ TECH BLOGにも同じ内容で投稿しています。よろしければ他の記事もご覧ください。 こんにちは！ ZOZOテクノロジーズ フロントエンドエンジニアの高橋（ニックネームはQ）です（@anaheim0894） 昨年12/26、毎年年末に行われる大忘年会（ZOZOCAMP2018）で、グループ会社も含めた1,000人規模でのリアルタイムアンケートを、FirebaseとVue.jsを使って制作しました。 当日会場にて弊社の昨年の事業紹介や、「楽しく働く」というコンセプトの動画を流し、動画の合間で質問をし動画と一体となるような演出を行いました。 その質問に対して全社員それぞれのスマートフォンで回答できるシステムを作ったので、その制作の裏側や、当日の様子などご紹介させていただきます。 まずは当日の様子の紹介 これを実現するまでの様子をご紹介いたします。 CAMP運営
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - grahamearley/FirestoreGoogleAppsScript: A Google Apps Script library for accessing Google Cloud Firestore.