🐡

ざっくりFirebase入門&チャットアプリを作る

2021/03/18に公開

そういやFirebaseって聞いたことあるけど知らないなー、どういうのができるのかなーと思ったので調べた。

Firebaseとは

2011年にFirebase社がサービスを開始し、2014年にGoogleが買収したモバイルのバックエンド向けのサービス（mBaaS（mobile Backend as a Service）。
特徴としては「サーバサイドの開発費を抑え、かつ工数もかからない。サービスの利用者が増えてもサーバの増築を意識しなくて良い。モバイル開発用のサーバ構築が簡単になる。」ということである。
ちなみにモバイル向けではあるがWebアプリケーションでも使える。

Firebaseのサービス

複数のサービスがある。

Hosting

ホスティング。いわいるサーバー。こちらにHTMLファイルをデプロイしてJavaScriptで動かすことでアプリケーションが作成できる。

Realtime Database

いわいるデータベース。NoSQL型。Jsonフォーマットで保存される。MongoDBみたいな感じ。

Cloud Firestore

こちらもデータベースだがRealtime Databaseよりも高性能らしい。
どちらが適切かは次のページで解説されている。

大規模で複雑な構成でなければ原則Realtime Databaseで良さそう。

Cloud Storage for Firebase

いわいるストレージ。

Firebase Authentication

いわいる認証周りのサービス。サードパーティ認証や電話番号にも対応。

Firebase Cloud Messaging（FCM)

プッシュ通知などのサービス。

Google Cloud Functions for Firebase

外部連携などの処理を書くときにいいらしい。

Firebaseでチャットアプリを作る

Firebase HostingにHTMLをデプロイする大まかな流れ

1.Firebase Hostingで新しいプロジェクトを作成（1サイトで１プロジェクト)
2.デプロイしたいファイルを作成。
3.Node.jsをインストールし、Firebase Cliをインストール。
4.Firebase Cliからログインして対象のファイルをアップロード。

チャットアプリを作る手順

こちらのサイトに従った。

なお、上のサイトにもある通りだが以下の二行を追加することを忘れずに。

貼り付けたscriptタグの
<script src="https://www.gstatic.com/firebasejs/7.9.3/firebase-app.js"></script>
の下に、
<script src="https://www.gstatic.com/firebasejs/7.9.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.3/firebase-database.js"></script>
の2つのscriptタグを追加してください。

また、そのままだとPermission deniedが出るのでRealtime databaseのルールの権限は適切に設定しておきましょう。（動作確認だけなら以下の通りに一時的に設定するのも良いでしょう。）

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

感想

デプロイまでが非常に楽ですね。googleアカウントさえあれば完結してしまいます。
昔ながらのレンタルサーバーもFFFTPも要らないですし、CLIでアップロードできるので簡単です。
次回はRealtime databaseとJavaScriiptでチャットアプリの作成にチャレンジしたいと思います。