Firebase

[Firebase] Cloud Functionsの実行結果をCDNにキャッシュする

Firebaseで動的に情報を出力する場合にCloudFunctionsを利用するわけですが、頻繁に情報が変化しない場合など実行結果を一定時間キャッシュしたくなりますよね。Firebaseでは非常に手軽に実装できます。 結論から言うと以下のようにCache-Controlヘッダを出…

[Firebase] Functionsで環境変数を参照/設定する

Firebaseでの「環境変数」は、OSなどから提供される情報が得られる物と、Firebaseが独自に提供する2種類の機能があります。前者が他の環境でも一般的に環境変数と呼ばれる物ですね。 ここではそれぞれの利用方法を見ていきます。

Firebaseからのメール「Firebase CLI lower than 7.7.0 will need to explicitly grant access through Cloud IAM」

珍しくFirebaseからメールが届いていましたが、開いてみればIt' a 英文。がんばって読み解いてみます(;´∀`) 結論 結論としては以下です。 FirebaseのCLIのバージョンを今すぐ確認 v7.7.0に満たない場合は今すぐアップデートする 古いままのCLIを使ってると…

[Firebase] デプロイ対象を一部のサービスに限定する

小ネタです。 Firebaseでは特に何も考えずCLIでfirebase deployコマンドを実行するとプロジェクト内のすべてのファイルをデプロイしてくれちゃいます。意図した物であればもちろん良いのですが、例えばHostingだけ、もしくはCloudFunctionsだけといった場合…

[Firebase] CloudFunctionsのRESTful APIを独自ドメインで利用する

小ネタです。 FirebaseでCloudFunctionsを利用してRESTful APIを作成していると、通常はhttps://[Region]-[ProjectID].cloudfunctions.net/[関数名]といったURLになるわけですが、これを独自ドメインで運用したい、またはパスを変更したい場合の設定方法です…

Web版「Sign In with Apple」を実装する

今年のWWDCで発表された「Sign In with Apple」のWeb版(JavaScript版)を実装してみたいと思います。 今回、裏側はFirebaseを利用していますが、Authenticationは使っていませんので、一般的な環境でも参考になると思います。(執筆時点でまだFirebaseが未対…

[Firebase] Authenticationで複数の認証プロバイダへ同時対応する (Web編)

今まではFirebaseの個別の認証プロバイダでログインしていましたが、今回はここまで対応した全プロバイダのいずれかでログインできる仕組みを作ってみます。 以下の画面のように複数の認証方法から自由に選択することができます。

[Firebase] AuthenticationでSMS認証 (Web編)

これまでFirebaseへ様々な認証をお試してしてきました。 メールアドレス認証 Twitter認証 Facebook認証 Google認証 匿名認証 今回は電話番号を使ったSMS認証です。 AuthenticationでSMSログイン メールアドレスやSMSは匿名性の高い物が一人で量産できてしま…

[Firebase] AuthenticationでGitHub認証 (Web編)

Firebaseへメールアドレス認証、Twitter認証、Facebook認証、Google認証、匿名認証、お次はGitHubです。 AuthenticationでGitHubログイン エンジニア向けのサイトだとGitHubでログインさせたくなりますよね。 Firebase Webコンソールの設定 FirebaseのWebコ…

[Firebase] AuthenticationでGoogle認証 (Web編)

Firebaseへメールアドレス認証、Twitter認証、Facebook認証、匿名認証まで終わったので、今回はGoogle認証です。 AuthenticationでGoogleログイン TwitterやFacebookはプラットフォーム側のサイトで色々作業が必要でしたが、Google認証ではその必要が一切あ…

[Firebase] AuthenticationでFacebook認証 (Web編)

Firebaseへメールアドレス認証、Twitter認証、匿名認証と続き、今回はfacebookでの認証に挑戦します。 Authenticationでfacebookログイン Facebookアプリを作成する際に、実際に本番で利用するためには「プライバシーポリシー」が掲載されたURLが必要になり…

[Firebase] AuthenticationでTwitter認証 (Web編)

以前はFirebaseへメールアドレスでのログインを行いましたが、今回はTwitterでの認証に挑戦したいと思います。 AuthenticationでTwitterログイン Twitterでアプリを作成 まず最初にTwitterでデベロッパー登録を行う必要があります。承認されるまでに数時間〜…

[Firebase] Authenticationで匿名認証 (Web編) その1

Firebaseの匿名認証はイメージとしてはセッションIDのような物で、ユーザーにログインなど特別な操作をせずともブラウザ(クライアント)を識別する一意のIDを付与してくれます。もちろんメールやSNSなど何らかのログインを行った場合は移行することも可能です…

[Firebase] RealtimeDatabaseでオンライン状態を判定する

今回はFirebaseのRealtimeDatabaseで、ログイン済みのユーザーがオンラインかオフライン化を表示するツールを作成します。以下のようにオンラインなら緑色、オフラインならグレーのアイコンが名前の横に表示されます。

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その4

今回はチャットで発言する内容にNGワードのチェックを入れたいと思います。 特定のキーワードが含まれている場合、「?」など伏せ字に置換する機能です。 実装方法を考える 方針 この実装方法は2つのパターンが考えられます。 クライアントでチェック 中身を…

[Firebase] はじめてのCloud Functions

FirebaseのCloud Functionsを利用すると巷で話題のサーバレスなシステムを構築することができます。外部にURLを公開してRESTful APIなども作成できますし、Firebase内のイベントに合わせて特定の処理を実行することが可能です。もちろんFirestoreやRealtimeD…

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その3

前々回でFirestoreを利用してリアルタイムな通信が行えるチャットを、前回はユーザー認証を導入しました。 今回は自分が書き込んだログを削除する機能を追加してみます。 サンプル 実行結果 miku3.net 書き込むためにはログインが必要です。閲覧は未ログイン…

[Firebase] Authenticationでログアウトを実装

以前Authenticationによるログインを取り上げましたが、その際にログアウト(サインアウト)処理をすっぱり忘れていましたw 結論 結論から言うと以下の通りsignOut()メソッドを実行するだけです。成功したらthen()の箇所に好きな処理を書いてあげます。 fireb…

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その2

前回、Firestoreを利用してリアルタイムな通信が行えるチャットを作成しましたが、今回はこのチャットに書き込みためにはログインが必要な状態に仕様変更したいと思います。 サンプル 実行結果 miku3.net 書き込むためにはログインが必要です。閲覧は未ログ…

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その1

今回はFirestoreでリアルタイムに情報のやりとりをしてみます。こういったときのサンプルは概ねチャットと相場が決まっていますので、ひとまずデータの授受ができる最低限のコードを書いてみます。 Firestoreの準備と基本的な使い方 詳しくは以下のページを…

[Firebase] Firestoreで読み書きする (Web編)

今回は最近ベータが取れて正式なサービスに昇格したFirestoreを使ってみたいと思います。まずは基本的なCRUDからやってみます。 Firestoreの準備 プロジェクトの作成 詳しくは過去記事を参照してください。 blog.katsubemakito.net Databaseの作成 Firebase…

[Firebase] Authenticationでメール認証 (Web編) その3

第1回はメールアドレスとパスワードによる認証、第2回はメールアドレス宛にメールを送信し文中のURLをクリックするとログイン状態になる機能の実装に挑戦しました。 今回は次のような仕組みに挑戦してみます。 メールアドレスとパスワードを入力しログイン …

[Firebase] Authenticationでメール認証 (Web編) その2

前回はメールアドレスとパスワードによる認証でしたが、今回は入力されたメールアドレスにメールを送信し届いたURLをクリックしたらログイン状態になる「メールリンク認証」の実装をします。

[Firebase] Authenticationでメール認証 (Web編) その1

Firebaseの機能を順次試していきたいと思います。 FirebaseではAuthenticationを利用することで様々な認証を用いることができます。今回実装するメールアドレスの他に各種SNSやSMSなどにも対応可能です。Webの他にiOSやAndroidなどにも導入可能。 今回は単純…

[Firebase] 静的なWebサイトをホスティングする

FirebaseのHostingを利用すれば基本無料で静的なサイトを運用できます。 独自ドメインも追加でき、何らならSSL証明書も無料でついてくるという太っ腹。もしサイトが成長し膨大なアクセスが発生した場合は課金する必要がありますが、こちらがプラン変更しない…

[Firebase] プロジェクトを新規に作成する

しばらく見ないうちにFirebaseでできることが驚くほど増えていたので、今回からしばらくFirebaseを触ってみたいと思います。 Firebaseが何たるかは公式サイトをご覧ください。 firebase.google.com プロジェクトを作成する Firebaseのコンソールへログインし…