Firebase をフロントエンドから適切に隠蔽するための「Hooks Injection パターン」 - JX通信社エンジニアブログ
取締役の小笠原(@yamitzky)です。 JX通信社では、React 製のフロントエンドでも Clean Architecture で設計するなど、なるべく特定のバックエンドに依存しない設計を心がけたりもするのですが、一方で Firebase をラップした react-firebase-hooks などの「便利な Hooks」を使って開発スピードを加速したい、という課題を持っていました。 そして先日、次の記事が話題になっていました。まさに「どう Firebase を隠蔽するか」と「どう Firebase を活用するか」を両立する悩みです。 blog.ojisan.io 結論を言うと「Hooks そのものを注入する」のが筋が良いのではないか と思っています。個人的に「Hooks Injection パターン」と名付けたこの方法をご紹介したいと思います。 今回の記事の完成形はソースコードを公
VueでFirestoreのSubscribe機能を使いたい時のアプローチ
はじめに VueでFirestoreのSubscribe機能を使ってリアルタイム処理を行いたい時に、いくつかアプローチがあるのですが、それをそれぞれ検証してどうだったかを記録として残しています。 同じように、Vue・FirestoreでSubscribe機能を使いたい人の参考になれば嬉しいです。 今回、検証に使用した環境は以下です。 Nuxt.js v2.4.0 TypeScriptは未使用 FirestoreのSubscribe機能について Firestoreで、データの変更があった時に変更差分をクライアント側に通知させる際に、onSnapshotメソッドを使用します。 https://firebase.google.com/docs/firestore/query-data/listen 大まかな手順として、 リアルタイム検知したいFirestoreのドキュメントを指定して、監視対象と
Nuxt.js + Vuex + Firebase(Authentication, Cloud Firestore)でTwitterユーザー向けの伝言板を作る - Qiita
Nuxt.js + Vuex + Firebase(Authentication, Cloud Firestore)でTwitterユーザー向けの伝言板を作るFirebaseVuexFirebaseAuthCloudFirestoreNuxt この記事は「株式会社オープンストリーム Advent Calendar 2019」の19日目の記事です。 どうも、最近はFirebaseに触れていない @ysd_marrrr です。 今回はFirebaseのAuthenticationとFirestoreでユーザーを認証して、そのユーザーでやり取りするサンプルを作りました。 フロントエンドはNuxtを使っているのですが、Firebaseとどう連携させるか悩みながら決めたので共有します。 作るサンプルについて 「Twitterのタイムラインでは遥か彼方に流れてしまう、だけども自分のプロフィールにピン留
オフラインでデータにアクセスする | Firestore | Firebase
フィードバックを送信 オフラインでデータにアクセスする コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Cloud Firestore は、オフライン データの永続性をサポートします。この機能により、アプリが使用している Cloud Firestore データのコピーがキャッシュに保存されるため、デバイスがオフラインの場合でも、アプリはデータにアクセスできます。キャッシュされたデータに対しては書き込み、読み取り、リッスン、クエリを行うことができます。デバイスがオンラインに戻ると、アプリがローカルで行った変更と Cloud Firestore バックエンドが同期されます。 オフラインの永続性を利用する場合、Cloud Firestore データへのアクセスに使用するコードに変更を行う必要はありません。オフラインの永続性を有効にすると、Cloud Firest
firebaseでのパスワードログイン機能の実装をやりきるためのTips
Firebase Authentification は OAuth 2.0 フローにのっとったログイン方法以外にも Email/Password を使ったログイン方法も提供しています。 このログイン形式をちゃんと使おうとすると、これまでは Provider が担ってくれていたパスワードの編集、パスワードの再発行、メールリンクでのログイン、アドレスの本人確認など様々なことを考慮しなければいけません。 この記事ではそういった考慮をした Email / Password ログインに挑戦します。 基本的にはmanage-users, password-auth, email-link-authといった公式ドキュメントを読むと IPASS ログインに必要なことは書いてあるのですが、action URL を自前で用意するフローを採用するとそれらのドキュメントで賄えなくなり試行錯誤をたくさんしなければい
Cloud Firestoreの勘所 パート3 — セキュリティルール
Firestoreへの接続情報はクライアントや通信内容などから容易に取得可能なため、このままでは全データがだだ漏れですし簡単に破壊されてしまいます。 よくあるWeb APIサーバー + データベースサーバー構成ではデータベースサーバーへの接続許可をWeb APIサーバーなど一部に制限することでセキュリティを担保しますが、Firestoreはクライアントから直接接続する方式なのでそういうわけにはいきません。 Firestoreではセキュリティルールにより読み取り・書き込み権限を過不足なく設定することでデータを守ります🔐言い換えると、セキュリティルールをしっかり設定すれば「クライアント直接接続型のデータベースだからセキュリティが心配」なんてことも決してありません🙆♀️
Firebase における IP アドレス制限・カスタム認証について - オールアバウトTech Blog
先週に続き、オールアバウトの新卒1年目エンジニアが投稿する企画「テックブログ新卒週間2020」を開催します。本記事の執筆者 okutan です。よろしくお願いします。 目次 目次 はじめに 開発した リアルタイム掲示板のシステム構成図 1. Firebase Hosting における IP アドレス制限 Hosting へのリクエストを Functions に送る Functions におけるクライアント IP アドレス取得 Functions からクライアントに静的ファイルを配信する 2. Firebase Authentication と独自認証基盤の連携 なぜ Authentication に独自の認証基盤を連携したか？ 連携方法 おわりに はじめに 業務でリアルタイム掲示板を Firebase で開発することになりました。 そのシステムの技術選定や試作品開発にあたり、Firebas
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Cloud Firestoreを実践投入するにあたって考えたこと - Qiita
はじめに Firebase Realtime DBを実践投入するにあたって考えたことを読んで頂いてありがとうございます。 多くの方から「いいね」を頂いて、今回のこの記事を書くモチベーションになりました 本当にありがとうございました！ さて、CloudFirestoreは、Firebase Realtime Databaseとは全く違うデータベースです。特にSubCollectionやQueryが導入されたことにより、リレーションシップの設計に関して大きく異なります。 この記事では、主にCloudFirestoreにおけるリレーションシップの設計方法から、アプリ・CloudFunctionsに至るまでを幅広く解説して行こうと思います。 次の記事ではデータベースの歴史を解説しています。 RDBの限界とNoSQLの登場 Cloud Firestoreでの開発について 私の経験上確実に断言できるこ
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン - Qiita
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオンハンズオンFirebaseAuthFirestoreNuxt 本記事は以下に引っ越しました。 今後Qiita上での更新はありません。 この記事のターゲット Nuxt.js + Firebaseで何か作りたい Firebase AuthenticationとCloud FireStore使いたい Chapter1 firebaseの準備 まずはfirebase側を準備します。 今回用意するのは - プロジェクト - Authentication - FireStore の三つ。 firebase consoleにログイン 1.https://firebase.google.com/?hl=ja へアクセス 2.右上の「ログイン」ボタンからログイン。 3.ログインできたら
ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう
note のやらかしのあのへんについて。 認証自作、 Rails 、 Devise - Diary パーフェクト Rails 著者が解説する devise の現代的なユーザー認証のモデル構成について - joker1007’s diary 認証サーバーの実装は本質的に難しいです。セキュリティが絡むものは「簡単な実装」などなく、プロアマ個人法人問わず、個人情報を守るという点で、同じ水準を要求されます。悪意あるハッカーは常にカモを探していて、もし認証が破られた場合、自分だけではなく大多数に迷惑が掛かります。初心者だから免責されるといったこともありません。全員が同じ土俵に立たされています。 とはいえ、認証基盤を作らないといろんなサービスが成立しません。そういうときにどうするか。 Firebase Authentication で、タイトルの件なんですが、 Firebase Authenticat
Cloud Firestoreの勘所 パート1 — 概要
Google製、モバイル・ウェブ・サーバー開発に対応したCloud Firestoreを使いこなすための勘所をつらつらと書いていきます。パート1の本記事ではFirestoreの全体観を掴んでいただけたらと思います。 Cloud Firestoreは、Firebaseのサービス群の1つという捉え方と、GCP(Google Cloud Platform)のサービス群の1つという捉え方がありますが、本記事ではFirebase経由で使うことを前提に書いていきます。Cloud Functionsなど関連サービスとして言及するものも同様です。Firebaseはざっくり言うとGCPのクライアントアプリ向けサービスを使いやすく提供しているラッパーサービスなので、それで足りるものはFirebase経由での利用をお勧めします。 ドキュメントも次のように2箇所にあるのですが、Firebase経由で使う場合は基本
Nuxt/VuexでFirebase Authenticationを使ってユーザー認証機能を作る - フリーランチ食べたい
Nuxt/VuexでFirebase Authenticationを使ったユーザー認証機能を作るにあたって、基本的なやり方はFirebaseドキュメントに書いてあるのですが、「どこに何を書けばいいのか」がよくわからなかったので調べながらまとめてみました。 完成形 こんな感じで用意されたUIを使ってログイン機能が実装できます。 前提条件 Firebase Projectの作成/Firebase SDKの作成はNuxt/Vuexには関係しない部分なので次の記事を参考に行ってください。この記事はFirebase SDKをNuxt/Vuexにどう組み込むか、を中心に書きたいと思います。 firebase.google.com 環境 nuxt@2.5.1 vue@2.6.10 vuex@3.1.0 firebase@5.9.2 firebaseui@3.5.2 FirebaseUIインストール＆CS
Firebaseの存在をフロントエンドから隠蔽するために
「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が適していたのに無理やり Firestore を採用したことによるデータ不整合。 その結果チーム内で Firebase を抜ける機運が高まるも、Firebase べっとりなアプリケーションすぎて移行しづらいといった問題に出会うかもしれません。 そのような場合に備え、Firebase の存在を隠蔽して開発することに挑戦してみましょう。 注意: Firebase を剥がしているときに「俺、次は絶対そうするわ」と感じたものを書いているだけであり、まだ実際にはこのパターンでプロダクション導入していません。 あくまで個人開発で試してみていけそうと思ったので、提案しますという体です。 また Firebase
Nuxt + firebaseでサーバレスな図書管理デモアプリを3日で作成・デプロイした - Qiita
時間でいうと25hで設計・実装・デプロイまでできたのでメモとして残します 完成gif こんな感じで図書を管理する上で必要となるであろう各機能を実装しました。 URL載せていたのですがアクセス増えて怖くなったのでURLは消しました。。 執筆する中でバグをチラホラ見つけてしまいましたが、一旦書き切ります・・・ モバイルもホラ（レイアウトは考慮が必要） 経緯（動機） 弊社では業務で使用する図書を経費購入できる制度があることもあり、社内図書がかなり溜まってきていました。 図書の管理は、現状スプレッドシートで管理しており、これが特に破綻していると言うことはなかったのですが、モバイルから触りたいなぁという個人的な都合がありました。 そこで簡単な図書管理アプリケーションのデモを作ってみようと思い立ちました。 で、自分的に手応えがあったらこれでいきませんかと提案してみよう・・・ 技術選定 モバイルから触り
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FirebaseのStorageを使ってみる｜sumi｜note
Nuxt.js+VuexFire+Firebaseを使って掲示板を作ってみました｜高橋悠太 / Yuta Takahashi｜note
『Nuxt + Firebase Hosting』で超速deploy - Qiita
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
SSR モードの Nuxt.js を Firebase に Deploy する Tutorial - Qiita
