Firebaseとは何か?【実サービスを使って解説】

Firebase プログラミング

悩み顔

プログラマー 「firebaseって何?最近使う人が増えてるみたいだけど、何ができるか知りたい。言葉だけだとイメージしにくいから、実例を使って説明してほしいな。」

このような疑問に答えます。

記事の内容

  • firebaseとは何か
  • 何ができるのか

私は3か月ぐらいfirebaseを使ってきました。
そして、firebaseを使った「URLねんが」というサービスを作りました。(※デザインはまだ制作中です)
URLねんが

「URLねんが」を例にして、今回firebaseとは何かについて解説していこうと思います。

実サービスを例にしているので、firebaseのできることや、各機能のイメージが分かりやすくなるはずです。
firebaseのざっくりとしたイメージをつかみたい人はぜひ本記事をご覧ください。

記事の内容

firebaseとは何か

Firebase
一言で言うと、Googleが提供しているバックエンドを楽にするサービスです。

主にJavascriptを使ってfirebaseを動かしていきます。
細かい説明は置いといて、何ができるのかを見ていきましょう。

何ができるのか

Question
私が使った機能は以下の3つです。

  • ログイン認証
  • 画像ファイルの処理
  • データベース

そのほかにもたくさんの機能がありますが、「URLねんが」で使った機能を中心に解説します。

「URLねんが」の簡単な説明

一言で言うと、画像を共有するサービスです。
「URLねんが」には以下の機能があります。

  1. ユーザー登録する
  2. 画像のアップロード
  3. 共有画面で保存した画像を表示

ログイン認証

アカウント登録をしたり、ログイン機能を付けたいときはAuthenticationを使うと便利です。
GoogleアカウントやTwitterアカウントなど、外部のアカウントを使ってログインすることができます。

AuthenticationFirebaseUI Authを使ってGoogleアカウントでログインする機能を作りました。
完成例は以下のようになります。
FirebaseUI Auth

Google以外にも、Twitterやメールアドレスなどを使ったログインする機能を、簡単に作ることができます。

  • 電話番号
  • Play ゲーム
  • Game Center
  • Facebook
  • Twitter
  • GitHub
  • Yahoo!
  • Microsoft
  • Apple
  • 匿名

Authentication の公式ページ
Firebase Authenticationの使い方を解説【FirebaseUI Auth】

画像ファイルの処理

画像をアップロードしたり、ダウンロードしたりするときは、Cloud Storageという機能を使うことで実現できます。
私はボタンを押すと画像をアップロードする処理を作りました。

画像ファイルは以下のように保存されます。
Cloud Storage
セキュリティルールを設定することで、画像のアップロードをできる人や、画像を見れる人を制限することも可能です。

Cloud Storage の公式ページ
【コピペOK】Firebase Storageで画像表示する方法を解説

データベース

firebaseのデータベースは2種類あります。

  • Realtime Database
  • Cloud Firestore

私が使ったRealtime Databaseはシンプルなデータを保存できます。
もう片方のCloud Firestoreはまだ使ったことがないので、今後紹介しようと思います。

Realtime Databaseはjsonのツリー構造でデータを保存されています。
Realtime Database
私は一意なURLをキーにして、画像ファイル名をデータベースに登録するために使いました。

Cloud Storageと同じようにセキュリティルールを設定することでデータにアクセスする人を制限できます。

Firebase Realtime Database の公式ページ

Firebaseを使ってみよう

run
以上となります。

まだまだ使ってない機能があるので、今後使っていったら追記で紹介しようと思います。

ご覧いただきありがとうございました。

関連

Firebase公式ページ
Firebase Authenticationの使い方を解説【FirebaseUI Auth】
Firebase Hostingでデプロイ(deploy)する方法を解説【4ステップ】
【コピペOK】Firebase Storageで画像表示する方法を解説