Firebase

2019.02.25

[Firebase] はじめてのCloud Functions

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

functionsはNode.js上で動作するプログラムを記述することになりますので、すでにJavaScriptやTypeScriptの経験がある方なら特別な言語仕様を覚える必要が無いのも魅力でしょう。

CloudFunctionsでHelloWorld

準備

Firebaseのコンソールからプロジェクトを作成します。すでに利用しているプロジェクトがある場合はそちらを使用しても大丈夫です。

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

https://blog.katsubemakito.net/firebase/firebase-make-newproject

しばらく見ないうちにFirebaseでできることが驚くほど増えていたので、今回からしばらくFirebaseを触ってみたいと思います。Firebaseが何たるかは公式サイトをご覧ください。プロジェクトを作成するFirebaseのコンソールへログインします。Googleアカウントが必要になりますので、Firebaseで利用したいアカウントでログインを行ってください。「プロジェクトを追加」ボタンをクリックプロジェクトの情報を入力する画面になります。プロジェクト名半角英数字と、スペース、一部の記号で適当な名前を入力します。プロジェクト ID自動採番...

ねこの足跡R

その後CLIツールのインストールを行います。詳しくは以下のページの「1 環境の準備」の項、Googleアカウントでログインするまでの部分を参照ください。

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

https://blog.katsubemakito.net/firebase/firebase-hosting

FirebaseのHostingを利用すれば基本無料で静的なサイトを運用できます。独自ドメインも追加でき、何らならSSL証明書も無料でついてくるという太っ腹。もしサイトが成長し膨大なアクセスが発生した場合は課金する必要がありますが、こちらがプラン変更しない限り料金は一切発生しません。ドメインやDNSの準備や設定、本番へデプロイ(反映)するにはコマンドを叩く必要がありますが、それさえ乗り越えてしまえばさほど難しくはありません。環境の準備プロジェクトの作成サイトを設置するためのプロジェクトが必要になります。プロジェクト...

ねこの足跡R

ディレクトリの初期化

すでにFirebaseで利用しているディレクトリがあればそちらに、無ければ新規にディレクトリを作成しカレントディレクトリを移ります。今回はすでに使ってるプロジェクトがあったのでそちらに移動しました。

$ cd miku3net

ではおもむろに初期化コマンドを叩きます。

$ firebase init functions

2019.02.25

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

前々回でFirestoreを利用してリアルタイムな通信が行えるチャットを、前回はユーザー認証を導入しました。

今回は自分が書き込んだログを削除する機能を追加してみます。

サンプル

実行結果

Firestore Chat3

https://miku3.net/db/firestore4/

miku3.net

書き込むためにはログインが必要です。閲覧は未ログイン状態でも行えます。
自分が書き込んだログは背景がピンク色になり、クリックすると削除できます。
自由に投稿していただいて問題ありませんが、公序良俗に反する書き込みはご遠慮ください。
適当なタイミングでお掃除します。

2019.02.24

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

以前Authenticationによるログインを取り上げましたが、その際にログアウト(サインアウト)処理をすっぱり忘れていましたｗ

結論

結論から言うと以下の通りsignOut()メソッドを実行するだけです。成功したらthen()の箇所に好きな処理を書いてあげます。

firebase.auth().onAuthStateChanged( (user) => {
  firebase.auth().signOut().then(()=>{
    console.log("ログアウトしました");
  })
  .catch( (error)=>{
    console.log(`ログアウト時にエラーが発生しました (${error})`);
  });
});

2019.02.24

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

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

サンプル

実行結果

Firestore Chat2

https://miku3.net/db/firestore3/

miku3.net

書き込むためにはログインが必要です。閲覧は未ログイン状態でも行えます。
自由に投稿していただいて問題ありませんが、公序良俗に反する書き込みはご遠慮ください。
適当なタイミングでお掃除します。

2019.02.22

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

今回はFirestoreでリアルタイムに情報のやりとりをしてみます。こういったときのサンプルは概ねチャットと相場が決まっていますので、ひとまずデータの授受ができる最低限のコードを書いてみます。

Firestoreの準備と基本的な使い方

詳しくは以下のページをご覧くださいませ。

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

https://blog.katsubemakito.net/firebase/firestore_readwrite_1

今回は最近ベータが取れて正式なサービスに昇格したFirestoreを使ってみたいと思います。まずは基本的なCRUDからやってみます。Firestoreの準備プロジェクトの作成詳しくは過去記事を参照してください。Databaseの作成Firebaseのコンソールにログインしプロジェクトのトップページに移動します。左メニューのDatabaseをクリックすると、右ペインでFirestoreにするか、以前の技術であるRealtime Databaseにするか選択を迫られますが、ここではFirestoreを選択します。今回は学習が目的だったので一旦「テストモード」を選択しました。誰...

ねこの足跡R

今回はひとまず動くものを作るのを目標としますので、ユーザー管理は行わず一つの部屋にひたすらメッセージがたまっていく作りにします。

また「ルール」は今回も全開放しています。

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

2019.02.21

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

今回は最近ベータが取れて正式なサービスに昇格したFirestoreを使ってみたいと思います。まずは基本的なCRUDからやってみます。

Firestoreの準備

プロジェクトの作成

詳しくは過去記事を参照してください。

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

https://blog.katsubemakito.net/firebase/firebase-make-newproject

ねこの足跡R

Databaseの作成

Firebaseのコンソールにログインしプロジェクトのトップページに移動します。
左メニューのDatabaseをクリックすると、右ペインでFirestoreにするか、以前の技術であるRealtime Databaseにするか選択を迫られますが、ここではFirestoreを選択します。