Javaエンジニア、React+Firebaseでアプリを作る

趣味で作ったものいろいろ

Firebase

Firestoreのtransaction中にドキュメントをaddする

Firestoreではtransaction機能が使え、複数の書き込みをまとめることができます。 transactionを使用するときには、以下のコードのようにrunTransactionを利用します。2つ目の引数にトランザクションの内容を書いた関数を渡します。 await runTransaction(db…

Firestoreで文字列を正規表現で制限するセキュリティルール

Firestoreのセキュリティルールでは、文字列を正規表現で制限することができます。悪意のあるユーザにおかしな値を登録されないようアプリと同じ制限をかけておきましょう。 String.matches(regex) String.matchesを使うと、フィールドに登録される値が 指定…

Firestoreで数値の範囲を制限するセキュリティルール

Firestoreのセキュリティルールで数値の範囲を制限することができます。悪意のあるユーザにより思わぬ値を登録されてしまい、誤動作を起こすことを防げます。 フィールドの大小比較を使う 数値の範囲を指定するには、フィールドの値を大小比較します。 例え…

Firestoreで文字列の長さを制限するセキュリティルール

Firestoreのセキュリティルールで文字列の長さを制限することができます。悪意のあるユーザによりとても長い文字列が登録されてしまい、結果過大な請求が発生するのを防ぐためにも、文字列の長さを制限しておくのはおすすめです。 string.size() 文字列のstr…

FirestoreでEnum型風ルールを作成する

Firestoreではセキュリティルールでフィールドの型を指定できます。 フィールドの型にはboolやint、stringなどがあります。 しかしenum型は存在しません。 Firebaseのセキュリティルールでは、string型のフィールドに対して登録できる文字列を制限することが…

react-redux-firebaseで、pushの自動生成key(ID)を事前に取得

firebaseでpushのkeyを事前取得 firebaseの公式サイトには、key(ID)の取得は以下のように書いてあります。 // Get a key for a new Post. var newPostKey = firebase.database().ref().child('posts').push().key; react-redux-firebaseでも同様に、 const f…

Firebaseアプリの公開 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。--only hostingオプションで、hostingのみ動作するようにします。(functionはserve…

Cloud Functions for Firebaseを使用して、"最近の更新"の件数を制限する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 前回までで、/recentUpdatedTodosへのデータの追加を行うことはできましたが、これではどんどんデータが溜まって行ってしまうので、個数を制限します。制限を超えたら古いデータを削除します。 firebaseのサンプル(limit…

Cloud Functions for Firebaseを使用して、タスク更新時に"最近の更新"へデータを追加する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 引き続き、addRecentUpdateOnUpdateCompletedを実装します。タスクが更新された時に、/recentUpdatedTodosにデータを追加します。 タスク更新時に"最近の更新"へデータを追加する addRecentUpdateOnUpdateCompletedの処…

Cloud Functions for Firebaseを使用して、タスク作成時に"最近の更新"へデータを追加する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com addRecentUpdateOnCreateを実装します。タスクが作成された時に、/recentUpdatedTodosにデータを追加します。 表示したいデータ “最近の更新”は、以下のようになります。ユーザ名をクリックすると、ユーザのタスク一覧へ…

Cloud Functions for Firebase用の最初のコードの記述とデプロイ (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Cloud Functions for Firebaseで最初に小さいコードを書いて動作確認をします。 手始めに、DBの/todos/{uid}の下にタスクが追加された時と、タスクが更新された時にコンソールへメッセージを表示します。 トリガの動作確…

Cloud Functions for Firebaseの導入とfirebase init functionsの実行 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリにCloud Functions for Firebaseを導入します。 Cloud Functions for Firebaseでできること Cloud Functions for Firebaseでは、ユーザがログインしたり、データベースに書き込まれた際に関数を実行できます。関数…

データベースルールファイル(database.rules.json)の変更と反映 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com データベースルールファイルを変更します。 todosのルール STEP 3では他のユーザのタスクは見れるので、そのように変更します。 database.rules.json { "rules": { "todos" : { "$uid": { ".read": true, // 変更 // 後…

Firebaseアプリの公開 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。 $ firebase serve http://localhost:5000にアクセスして、動作確認しましょう。 …

データベースルールファイル(database.rules.json)の変更と反映 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com データベースルールファイル(database.rules.json)を変更します。 todosのルール STEP 2で作成したアプリでは、ユーザは自分のタスクのみ見れて、自分のタスクにのみ書き込めるので、ルールをそのように変更します。 dat…

Firebaseのログイン機能の有効化 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Firebaseを使用したログイン機能 FirebaseではGoogle、Facebook、twitterなどと連携したログイン機能を提供しています。各機能を有効化するために、コンソールで操作します。 ログイン機能の有効化 1. Firebase Console…

Firebaseアプリの公開 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。 $ firebase serve http://localhost:5000にアクセスして、動作確認しましょう。 …

Firebaseを使ったwebアプリで、apiKeyなどの接続に必要な設定をWeb Consoleで確認する手順

FirebaseをReactと共に使う時に、firebaseの設定をファイルに書く必要があるのですが、どこに書かれているかすぐにわからなくなるので、スクリーンショット付きで手順を示します。 1. Firebase console (https://console.firebase.google.com/)のProject Ov…

Realtime Databaseへのデータの事前登録 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 今回のチュートリアルでは読み込み部分を先に作るため、先にデータベースにデータを登録します。 データファイルの準備 テキストエディタを開いて、以下の内容を記載します。ファイル名は、initial_todo.jsonにします。 …

Firebaseプロジェクトの作成 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Firebaseでアプリを開発するのには、まずプロジェクトをFirebase consoleで作成する必要があります。プロジェクトの作成の手順を示します。 1. Firebase Console (https://console.firebase.google.com/)を開きます。 …