masalibの日記

システム開発、運用と猫の写真ブログです

React Firebase入門 Realtime Databaseでchatアプリ(書き込み)

Firebase Realtime Databaseを使ってChatのアプリを作りたいと思います

この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-1-2・ 「react-hook-form」を入れてみた
1-1-3・ AuthのSignUpの通信エラー対応
1-2 ・ FirebaseAuthのログイン処理
1-3 ・ FirebaseAuthのログイン認証とログアウト処理
1-4 ・ FirebaseAuthのパスワード初期化処理
1-5 ・ FirebaseAuthのメールアドレスの有効化
1-6 ・ FirebaseAuthのメールアドレスとパスワード変更
1-7 ・ FirebaseAuthの表示名変更
1-8 ・ FirebaseAuthの拡張項目追加
1-9-1 ・ FirebaseAuthのTwitter認証
1-9-2 ・ FirebaseAuthのTwitter認証(既存ユーザー向け)と解除
1-10 ・ FirebaseAuthのGoogle認証(既存ユーザー含む)と解除 2-1・ FirebaseStorageのファイルアップ:基礎
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き
2-3・ FirebaseStorageのファイルアップの移動
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
4-1・Realtime Databaseでchatアプリ(書き込み) 今ここ
4-2・Realtime Databaseでchatアプリ(一覧取得)
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world
6-3・ ユーザーの作成時にCloud Functionsを実行
6-4・ Cloud Functionsでメール送信
6-5・ Cloud Functionsでslackに通知する

よかったら他の記事も見てください。

続きを読む

Firebase入門 Cloud Functionsでslackに通知する

Cloud Functionsでslackに通知したいと思います

この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-1-2・ 「react-hook-form」を入れてみた
1-1-3・ AuthのSignUpの通信エラー対応
1-2 ・ FirebaseAuthのログイン処理
1-3 ・ FirebaseAuthのログイン認証とログアウト処理
1-4 ・ FirebaseAuthのパスワード初期化処理
1-5 ・ FirebaseAuthのメールアドレスの有効化
1-6 ・ FirebaseAuthのメールアドレスとパスワード変更
1-7 ・ FirebaseAuthの表示名変更
1-8 ・ FirebaseAuthの拡張項目追加
1-9-1 ・ FirebaseAuthのTwitter認証
1-9-2 ・ FirebaseAuthのTwitter認証(既存ユーザー向け)と解除
1-10 ・ FirebaseAuthのGoogle認証(既存ユーザー含む)と解除 2-1・ FirebaseStorageのファイルアップ:基礎
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き
2-3・ FirebaseStorageのファイルアップの移動
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world
6-3・ ユーザーの作成時にCloud Functionsを実行
6-4・ Cloud Functionsでメール送信
6-5・ Cloud Functionsでslackに通知する 今ここ
よかったら他の記事も見てください。

続きを読む

Firebase入門 Cloud Functionsでメール送信(SendGrid)

エンジニア向けのサービスならSlackなどの通知で問題ないのですが、一般人向けだとやっぱりメールで通知する必要があります。(理想はLINE) サービスでは欠かせない問い合わせ機能を作るためにメール送信の機能を調べました。

最初はGoogleのメールで対応しようと思ったのですが、ローカルのエミュレータからのメール送信がGoogle認証(Oauth)の部分でうまくいかず諦めてしましました。

失敗したパターンは

  • NodeMailrでメール送信(from:gmail)
  • gmail-nodeでメール送信(from:gmail)

です。

問い合わせメールは月に1万も発生しないと思うので メール配信サービスの「SendGrid」を使う事にしました

この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-1-2・ 「react-hook-form」を入れてみた
1-1-3・ AuthのSignUpの通信エラー対応
1-2 ・ FirebaseAuthのログイン処理
1-3 ・ FirebaseAuthのログイン認証とログアウト処理
1-4 ・ FirebaseAuthのパスワード初期化処理
1-5 ・ FirebaseAuthのメールアドレスの有効化
1-6 ・ FirebaseAuthのメールアドレスとパスワード変更
1-7 ・ FirebaseAuthの表示名変更
1-8 ・ FirebaseAuthの拡張項目追加
1-9-1 ・ FirebaseAuthのTwitter認証
1-9-2 ・ FirebaseAuthのTwitter認証(既存ユーザー向け)と解除
1-10 ・ FirebaseAuthのGoogle認証(既存ユーザー含む)と解除 2-1・ FirebaseStorageのファイルアップ:基礎
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き
2-3・ FirebaseStorageのファイルアップの移動
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world
6-3・ ユーザーの作成時にCloud Functionsを実行
6-4・ Cloud Functionsでメール送信 今ここ
よかったら他の記事も見てください。

続きを読む

はてなブログのsitemap.xmlの仕様が変わっていたのね

いくら記事を更新してもなぜかgoogle先生から検索してもらえませんでした。 放置していたからかな~・・・全然わからないまま1ヶ月ぐらい立ちました。

今日、久しぶりにGAの値をみてあいも変わらずヒットしていませんでした。 不思議だったのが検索する人間がすくない「bing」では検索してくれる人がいるのにGoogle先生yahooからはアクセスがない状況でした

この差がまったくわからず色々と見ていたら・・・
Sitemapの更新日時が古い状況に気が付きました。

あれ・・・もしかして読み込んでいない?とかエラーになっているかなと思って sitemapのURLを叩いてみたら想定とは違う結果がでました

sitemapなので記事一覧がでる想定でした・・・ あれ・・・・😅

調べてみると

kanaxx.hatenablog.jp

仕様がかわった事に今更気が付きました。 この記事だと自動で叩く事もできるようなのですが、そこまでやる必要はないので、循環する時にseach consoleから叩くようにします。他の数値も見る癖をつけたいので、手間がかかってもいいかなと思います。

この仕様変更はもう少し告知してほしかった。

Firebase入門 ユーザーの作成時にCloud Functionsを実行

FirebaseのユーザーはAuthenticationとい項目にはいります。このデータは他のユーザーからは参照できないです。FireStoreにも同じデータを入れて参照できるようにしたいと思います。 SingUPの処理にFireStoreにいれる処理を入ればいいのですが、他のプロバイダーの処理にも入れなくてはいけないのでそこは諦めてユーザーが作成された時に動かすFunctionを作って対応しました。

悲しい事にTwitter認証やGoogle認証はエミュレータでは動きません😢

この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-1-2・ 「react-hook-form」を入れてみた
1-1-3・ AuthのSignUpの通信エラー対応
1-2 ・ FirebaseAuthのログイン処理
1-3 ・ FirebaseAuthのログイン認証とログアウト処理
1-4 ・ FirebaseAuthのパスワード初期化処理
1-5 ・ FirebaseAuthのメールアドレスの有効化
1-6 ・ FirebaseAuthのメールアドレスとパスワード変更
1-7 ・ FirebaseAuthの表示名変更
1-8 ・ FirebaseAuthの拡張項目追加
1-9-1 ・ FirebaseAuthのTwitter認証
1-9-2 ・ FirebaseAuthのTwitter認証(既存ユーザー向け)と解除
1-10 ・ FirebaseAuthのGoogle認証(既存ユーザー含む)と解除 2-1・ FirebaseStorageのファイルアップ:基礎
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き
2-3・ FirebaseStorageのファイルアップの移動
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world
6-3・ ユーザーの作成時にCloud Functionsを実行 今ここ
よかったら他の記事も見てください。

続きを読む

Firebase入門 Cloud Functionsをエミュレータで実行

テストしていないコードをアップしてサービスを落とした人がいます。

そう、です

笑えないですが、事実です。 一昔前、Cloud Functionsは本番しか環境がなかったのですが エミュレータがリリースされました。 ローカル環境でじっくりテストした内容を本番にアップする事ができるようになりました。 Google先生のマニュアルにも記載されています

Firebase Local Emulator Suite を使用すると、Firebase プロジェクトにデプロイする代わりにローカルマシンでアプリをビルドしてテストできます。開発中にローカルテストを行うことを強くおすすめします。その理由の 1 つとしては、本番環境でコストを発生させる可能性があるコーディング エラーのリスク(無限ループなど)が低下するためです。
https://firebase.google.com/docs/functions/get-started?authuser=0#emulate-execution-of-your-functions
より引用

無限ループとか普通にやっていれば気がつくかも知れないのですが、関数を大量に発行させて ありえない金額を請求された人もいます。

gigazine.net

できる限りはローカルでテストして本番UPしたいです。

この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-1-2・ 「react-hook-form」を入れてみた
1-1-3・ AuthのSignUpの通信エラー対応
1-2 ・ FirebaseAuthのログイン処理
1-3 ・ FirebaseAuthのログイン認証とログアウト処理
1-4 ・ FirebaseAuthのパスワード初期化処理
1-5 ・ FirebaseAuthのメールアドレスの有効化
1-6 ・ FirebaseAuthのメールアドレスとパスワード変更
1-7 ・ FirebaseAuthの表示名変更
1-8 ・ FirebaseAuthの拡張項目追加
1-9-1 ・ FirebaseAuthのTwitter認証
1-9-2 ・ FirebaseAuthのTwitter認証(既存ユーザー向け)と解除
1-10 ・ FirebaseAuthのGoogle認証(既存ユーザー含む)と解除 2-1・ FirebaseStorageのファイルアップ:基礎
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き
2-3・ FirebaseStorageのファイルアップの移動
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world 今ここ
よかったら他の記事も見てください。

続きを読む