サーバーサイドなんもわからんアナタに向けたハンズオン　Unity × gRPC × Go × Firebase × Docker 〜第四章、Firebaseプロジェクトの作成とFirebaseSDK導入〜

# 最初に

本記事の内容は、サーバーサイドにほとんど触れてこなかったUnityエンジニアに向けて、最近の主流構成を学びながら少しずつサーバーの知識を身につけられるハンズオン形式で進めます。この記事が、サーバーサイドに対する理解を深める一助になれば幸いです。

本記事の対象者は以下の通りです。

- A Tour of Goを一通り終わらせたが次に何をするべきかわからない初心者サーバーエンジニア
- gRPCについて学びたいが、Unityとの関連性も知りたい初学者
- なんとなくGoやgRPCについては理解できるけど、具体的な仕組みについて知りたいUnityエンジニアの方


また、今回のハンズオン記事は全７章が存在します。

こちらから他の章も見ていただけると嬉しいです！
[「第一章、環境構築」](https://qiita.com/4_mio_11/items/08e972ae361c55b317f0)
[「第二章、Cloud Runへのデプロイ」](https://qiita.com/4_mio_11/items/2027978feb5f131fdd48)
[「第三章、CI/CDパイプライン構築」](https://qiita.com/4_mio_11/items/1148aa1603f4acb32088)
[「第四章、Firebaseプロジェクトの作成とFirebaseSDK導入」](https://qiita.com/4_mio_11/items/6a9b61fe2f1db2b5c38a)
[「第五章、FirebaseSDKを用いたアカウント作成とログイン実装」](https://qiita.com/4_mio_11/items/aabefeac56e700afc6e4)


### **今回の環境**

- OS : MacOS
- IDE : GoLand
- Gitクライアント : Fork

## 前提

以下の記事を終えているか、チャットアプリケーションを作るにあたって、必要な設定をGCP上で行う準備ができていることを前提としています。

[サーバーサイドなんもわからんアナタに向けたハンズオン　Unity × gRPC × Go × Firebase × Docker 〜第三章、CI/CDパイプライン構築〜 - Qiita](https://qiita.com/4_mio_11/private/1148aa1603f4acb32088)

また、記事の内容を自由に学習できるよう、GitHub上に公開リポジトリを作成しました。各ステップに対応したバージョンをReleasesとして登録しているので、興味のあるステップから学習を始められます。

https://github.com/rossam/grpc-chat-app-sample/releases

上記リポジトリ内容を使用して特定のステップから始める場合はリポジトリをForkするか、手元にDownloadなどをしてから進めるようお願いします。

<br>

# 1. Firebase プロジェクトの作成

Firebaseを使用してユーザーログイン機能を実装するためには、まずFirebase上でプロジェクトを作成をする必要があります。このプロジェクトは、バックエンドでの認証やデータ管理の基盤として用意します。

:::note
**Firebaseとは？**
Firebaseは、Googleが提供するモバイルアプリやウェブアプリの開発をサポートするためのクラウドベースのサービス群です。Firebaseを使うことにより、開発者はアプリのバックエンドの構築や運用を簡素化し、アプリの機能追加やスケーリングを容易に行うことができます。
プッシュ通知や、アナリティクス、クラッシュレポートの収集など、いろんなことができるので、Firebaseを採用しているゲームプロジェクトも多いと思います。
:::

それではプロジェクトをセットアップしていきましょう。

<br>

## Firebaseコンソールへアクセス

まずは、以下のFirebaseのサイトにアクセスして、「Firebaseプロジェクトを使ってみる」をクリックし、新しいプロジェクトを作成してください。

https://firebase.google.com/?hl=ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/ce5bd244-fda3-db41-547a-6c7e2f950b1c.png)

<br>

## プロジェクトを設定する

最初の画面では、プロジェクト名の入力を求められます。

しかし今回はすでにGoogle Cloudプロジェクトが存在しているので、左下に小さく書いてある「Google Cloud プロジェクトに Firebase を追加」をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/02cef61d-db7d-de3d-664d-093cee3da483.png)

以下の画面に移ったら、今回のハンズオンプロジェクトである「grpc-chat-app」を選択します。選択ができたらそのまま「続行」してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/e48d72ed-d7b7-b4ab-2a64-bb38055d4d36.png)


もし、この段階で料金プランの説明が入った場合は、Blazeプランを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/96327a09-f7f7-b7ba-35db-915391f8043e.png)


その際に、支払い情報などの紐付けが必要となりますが、今回のハンズオンでは無料枠内で進めていくため、実際には支払いは発生しない想定です。

:::note
料金プランの変更は、後からでも変更できます。
ハンズオンを一通り済ませた後はSparkプランに戻しておくと安心でしょう。

プラン変更はFirebaseコンソール画面の左下にある料金プラン表示からできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/c871b426-2e92-5f3d-a162-901adba5fa8c.png)
:::

<br>

## Googleアナリティクスの設定とプロジェクト作成

Googleアナリティクスを有効にするかどうか聞かれます。

**Googleアナリティクス**は、Firebaseプロジェクト全体のユーザー動向を可視化し、A/BテストやCrashlyticsなどの機能をサポートします。

今回のハンズオンでは使用しないので、オフにしておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/e12eaf90-8a3d-1b05-bd6f-84b064dcc2b4.png)



「Firebaseを追加」をクリックしてください。

数秒から数分ほど、プロジェクトの初期構築処理が終わるまで待ちましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/f91916d3-502e-e667-4bab-c6bb74737f27.png)

処理が完了すると、以下の画面が表示されます。

「続行」をクリックしてプロジェクトの管理画面へ進みましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/51d028ee-d741-5e55-d785-2e5f3c04e516.png)

<br>

# 2. Firebase Authenticationの設定

Firebaseプロジェクトが作成できたら、次にユーザーのログイン機能を実装するために、Firebase Authenticationの設定を行います。

**Firebase Authentication**は、Firebaseが提供する**認証管理サービス**で、メール・パスワード認証やGoogle、Twitter、Facebookなどのサードパーティプロバイダー認証を簡単に実装できます。Firebaseがバックエンドで認証処理を管理してくれるため、独自のサーバー開発が不要となります。

まずは、プロジェクトのコンソール画面からFirebase Authenticationを見つけてクリックしてください。または左側メニューから「Build」セクションの「Authentication」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/ff334f7f-4b16-6f3c-1092-e309efbfbef7.png)

Firebase Authentication画面へ遷移したら、「始める」をクリックして設定を開始します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/c0cc5ab2-9552-10d6-2d6b-1dbae3bc3fd5.png)

<br>

## ログインプロバイダの選択

ユーザーの認証方法として、複数のプロバイダを選択することができます。

今回は「メール/パスワード」を利用して認証を設定します。

スマートフォン向けのプロジェクトであれば「Google」や「Apple」を使うことが多くなると思います。これらはOAuth 2.0を活用した仕組みのため、高いセキュリティを確保しつつ利便性を提供できます。ただ、Unityのエディタ上からはこの２つでのアカウント作成とログインができないため、今回は使用しません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/c9472427-a7a9-d98d-7270-d8eb816dc702.png)


「有効にする」をオンにして、「保存」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/b19292a1-0004-4ca9-5648-86e0791f207c.png)

設定した「メール/パスワード」が「ログインプロバイダ」リストに表示されていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/4e7b6d65-b6d8-93e7-e8c2-9d60b6c4cade.png)

これでAuthenticationの基本設定は完了です。

<br>

# 3. Firestoreのデータベースを作成

続いて、アプリ内でのユーザー設定を保存するために、「Users」というデータベースを用意していきます。

このデータベースはFirestoreを使用して作成を行います。**Firestore**は、Firebaseが提供するNoSQL型のデータベースです。リアルタイムのデータ同期や、複雑なクエリ、オフライン対応など、モダンなアプリケーション開発に必要な機能を備えています。

それでは、プロジェクトのコンソール画面からCloud Firestoreを見つけてクリックしてください。

TOPに移動したら「データベースを作成」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/26b048cd-c50f-2f40-40af-6d680af8fbd7.png)

<br>

## データベースIDとロケーションの設定

Firestoreでデータベースを作成する際には、まずデータの保存先である「ロケーション」を設定します。

この設定は、データの読み書き速度に直接影響を与える重要な項目です。特に日本国内向けアプリを開発する場合は、`asia-northeast1 (Tokyo)` を選ぶことで、低レイテンシでのデータアクセスを実現できるでしょう。

ロケーションは一度設定すると変更できないため、事前にプロジェクトの利用地域を考慮して設定してください。より詳しくリージョン周りについて知りたい場合は以下の記事が参考になります。

[**Firebaseのプロジェクトを作り直すことになったたった一つの設定項目**](https://qiita.com/qrusadorz/items/99432fac6cbc93ebaff2)

今回はCloud Run上での設定に合わせたいため、`us-central (lowa)` を選びます。
データベースIDは`(default)`のままにしておいてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/90ce44a6-d893-d706-1e4a-22245ae7c3c8.png)

<br>

## セキュリティルールの設定

Firestoreのデータはセキュリティルールによって保護されます。

このルールを適切に設定することで、データへのアクセスを必要最小限に制限し、安全性を高めることができます。開発の初期段階では「テストモード」で自由に操作を行い、プロジェクトが完成した時には、「本番環境モード」に切り替えてアクセス権を厳密に管理することが推奨されています。

「テストモードで開始する」を選択して、「作成」をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/b10beb80-320a-ba67-5561-005cdf487c2e.png)

<br>

## コレクションとドキュメントの作成

Firestoreではデータを「コレクション」という単位で管理します。

**コレクション**は、**複数の関連するデータ（ドキュメント）をまとめるためのコンテナのような役割**を果たします。

今回は、ユーザー情報を管理するための、`users`というコレクションを作成します。

Firestoreは「コレクション→ドキュメント→フィールド」という階層構造を持つため、データ管理が視覚的にわかりやすいのも特徴です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/9be87d44-1864-0a6a-d214-705137a799b8.png)

ドキュメントはFirestoreでデータを保存する基本単位です。

各ドキュメントは一意の「ドキュメントID」を持ちます。**ドキュメントID**は、そのデータを参照するための「**キー**」です。Firestoreでデータを管理するときに、**特定のドキュメント（データ）にアクセスしたり更新したりするための識別子**となります。

ドキュメント内には、フィールドとして様々なデータを保存できます。Firestoreではデータのスキーマを事前に定義する必要がないため、プロジェクトの成長に合わせて柔軟にデータ構造を変更できます。

今回は、`users`コレクション内に `user123` というドキュメントを作成してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/92afa710-de1c-9c0e-75c1-9a08ba675a18.png)


「保存」をクリックするとデータベースが作成されて、以下のように確認ができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/19c48803-b04d-5543-e828-63d67f3fad35.png)

<br>

# 4. UnityプロジェクトへのFirebase SDK追加

それではUnityプロジェクトで実際にFirebaseの機能を使うために、SDKを導入していきます。
<br>

[公式ドキュメント](https://www.notion.so/1413daa2358c80b8add7d1bd329d2b5a?pvs=21)に記載されている前提条件には軽く目を通しておいてください。

- Unity 2019.1 以降且つ、次の要件を満たしていること
    - **iOS の場合**：ターゲットが iOS 11 以降であること
    - **tvOS の場合**：ターゲットが tvOS 12 以降であること
    - **Android の場合**：ターゲットが API レベル 19（KitKat）以降であること
- （Apple プラットフォームのみ）以下のインストールが必要
    - Xcode 13.3.1 以降
    - CocoaPods 1.12.0 以降

<br>
それでは進めていきましょう。

まずはプロジェクトのコンソール画面にアクセスし、以下の画像のようなアイコンが並んでいる画面からUnityロゴのアイコンをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/b3fff5b2-7087-5daa-67e4-57b554e1af53.png)

<br>

## アプリの登録

Firebaseの各機能を利用するために、Firebaseプロジェクトにアプリを登録します。

これは、Firebaseが「どのアプリのためにサービスを提供するか」を認識するための作業です。「アプリ名」や「バンドルID」は、Firebaseが提供する設定ファイルに書き込まれ、Unityプロジェクト側で利用されます。

今回の記事ではiOS、Android向けにリリースするところまでは行わないので、お好きな方にチェックマークを入れて、バンドルIDを設定してください。

今回はAppleアプリとして`com.grpc-chat-app`を登録しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/2b9457b3-9fb9-b071-07e8-50792e32bda2.png)

<br>

## Firebase設定ファイルをダウンロード

アプリの登録が完了すると、設定ファイルがダウンロードできルようになります。この設定ファイルをUnityプロジェクトに追加することで、Firebaseとの連携が可能になります。

- **iOSの場合**：`GoogleService-Info.plist`
- **Androidの場合**：`google-services.json`

この画面の時点でファイルをダウンロードしておいてください（説明ではXcodeプロジェクトへ追加、と書いていますが、UnityのAssetsフォルダ以下に配置しても動作します）。

ダウンロードが完了したら「次へ」をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/6fb7bd95-25ef-ae96-a9eb-9ef3f8ebb669.png)

<br>

## Firebase Unity SDKをインポート

これでFirebase Unity SDKをダウンロードできるようになりました。

ダウンロードしたら解凍しておいてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/83e99f65-e41b-435c-ded5-4196f222b5d8.png)

これでSDK用の事前ステップは完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/60171f12-99ac-ad0d-5ab5-cdaccc21ee54.png)

<br>

# 5. FirebaseSDKの導入

先ほどDLしたSDKをUnityプロジェクトに導入し、実際に新規アカウントを作成するところまで作っていきましょう。

今回は以下のリポジトリにて、学習用に使えるUnityプロジェクトを用意してみました。

https://github.com/rossam/grpc-chat-app-sample-Unity

バージョンは`6000.0.27f1`で、最低限の2D向けパッケージが含まれており、ユーザーアカウントの作成・ログイン、今後のチャット機能開発向け用のシーンとPrefabが含まれています。

メインシーンは`Assets > grpc-chat-app > Scenes > MainScene.unity`となります。

開くと以下の画像のようなシーンが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/5ec05f97-b63c-ed0a-fce2-d3f3e9c97115.png)

もしよければ使ってみてください。もちろんご自身で用意して頂いても構いません。

Unityプロジェクトを立ち上げた後は、BuildターゲットがiOS又はAndroidへ変更された状態にしておいてください。

また、立ち上げた後は、先ほどDLした `GoogleService-Info.plist`か `google-services.json`を`Assets`下の任意の場所に配置しておいてください。

<br>

## Firebase SDKの確認

それでは、まずはDLしたSDKを解凍して確認してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/c6362437-91d0-f3d3-d343-4678047ee6c8.png)

Firebase AuthenticationやFirestoreを正しく動作させるためには、以下のunitypackageをUnityにインポートをする必要があります。

- **FirebaseAuth.unitypackage**：
    - **Firebase Authentication**を使用してユーザーの認証を行うためのパッケージです。
    - ユーザーのサインイン、ログイン、ログアウトなどの操作を行います。
- **FirebaseFirestore.unitypackage**：
    - ユーザー情報（例えば、語尾設定）を保存するために**Firestore**を使うので、このパッケージも必要です。

:::note
それ以外のパッケージについても、ざっくり解説しておきます。

- **FirebaseStorage.unitypackage**
    ユーザーのファイル（画像、動画、ドキュメントなど）をGoogle Cloud Storageにアップロード・ダウンロードするためのパッケージです。チャットアプリやメディア共有アプリで使用されます。
    
- **FirebaseAnalytics.unitypackage**
    アプリ内のユーザー行動をトラッキングしてレポートを生成するためのパッケージです。アプリの使用状況を把握し、データに基づいた改善を行うために使用します。
    
- **FirebaseInstallations.unitypackage**
    各デバイスやインストールごとに一意のFirebaseインスタンスIDを生成・管理します。このIDはクラウドメッセージングやAnalyticsなどのサービスとの連携に使用されます。
    
- **FirebaseDynamicLinks.unitypackage**
    ユーザーを特定のアプリ内コンテンツや状態に誘導するための動的リンクを生成・管理するパッケージです。マーケティングやシェアリング機能で活用されます。
    
- **FirebaseCrashlytics.unitypackage**
    アプリ内のクラッシュやエラーを記録し、問題を特定・修正するための詳細なレポートを提供するパッケージです。アプリの安定性向上に役立ちます。
    
- **FirebaseRemoteConfig.unitypackage**
    アプリの設定や動作をリモートでリアルタイムに変更するためのパッケージです。プロモーションの切り替えやテスト設定の切り替えに便利です。
    
- **FirebaseAppCheck.unitypackage**
    アプリが正規のものであることを確認し、不正アクセスや悪意のある利用を防ぐためのセキュリティ強化パッケージです。
    
- **FirebaseMessaging.unitypackage**
    プッシュ通知を送信するためのパッケージです。ユーザーにリアルタイムで重要な情報を提供する場合に使用されます。
    
- **FirebaseFunctions.unitypackage**
    Firebase Cloud Functionsを利用するためのパッケージです。バックエンドロジックをサーバーレスで実行し、アプリのビジネスロジックを管理します。
    
- **FirebaseDatabase.unitypackage**
    リアルタイムデータベースを使用するためのパッケージです。データのリアルタイム同期や簡易なデータ管理が必要な場合に使用されます。

:::


ところでFirebaseFirestoreとFirebaseDatabaseの違いはなんでしょう？

### **FirebaseFirestore**

Firestoreは最新のNoSQL型データベースで、柔軟性が高く、構造化されたデータを扱うのに適しています。

**特徴**

- データは「コレクション」と「ドキュメント」という形で保存します。
    - 例: 「users」というコレクションの中に、「user123」というユーザー情報のドキュメントがある。
- 高速な検索やフィルタリングが可能です。
- **複数デバイス間でリアルタイム同期**ができます。
- スケーラビリティに優れ、大規模なアプリケーションにも適しています。

**適した用途**

- SNSやチャットアプリなど、階層化されたデータを扱う場合。
- データを柔軟に検索・操作したい場合。
- 大規模なアプリや、今後規模が拡大する予定のプロジェクト。

### **FirebaseDatabase**

FirebaseDatabaseは、Firebaseが最初に提供したリアルタイムデータベースで、シンプルなJSON形式でデータを管理します。

**特徴**

- データは1つの大きなJSONツリーとして保存されます。
    - 例: ルートノードからデータがすべてぶら下がるような構造。
- **リアルタイム同期**に特化しています。
- クエリ（検索）はFirestoreに比べると簡易的。
- スモールプロジェクト向けの設計。

**適した用途**

- シンプルな構造のアプリケーション（例: Todoリストや軽量なリアルタイムチャット）。
- 小規模なプロジェクトやプロトタイプ開発。

上記の特徴を踏まえた上で、今回は**FirebaseFirestore**を使用していきましょう。

<br>

## UnityへのSDK導入

Firebaseの**FirebaseAuth.unitypackage**と、**FirebaseFirestore.unitypackage**を、UnityEditorにD&Dするなどして、importを進めてください。

import後に以下のダイアログが表示することがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/05b527df-95b0-a6ec-d390-10b9d22dbf43.png)

FirebaseプロジェクトとUnityプロジェクトを正しく連携させるためには、FirebaseプロジェクトのバンドルIDと一致するバンドルIDをUnity側でも設定する必要があります。

「Apply」をクリックしてBundle IDを合わせましょう。

これでFirebaseの機能を扱うための下準備が終わりました。

# まとめ
今回の第四章では、Firebaseを用いたユーザーログイン機能の実装に焦点を当て、Firebase AuthenticationやFirestoreの設定からUnityへのSDK導入までを行いました。これにより、認証機能とユーザーデータ管理の基礎が整い、チャット機能開発のための環境を構築できました。

今回のハンズオンでは以下のことを学びました。

- Firebaseの基本概念と用途
- Firebaseプロジェクトの作成手順
- Firebase Authenticationの設定
- Firestoreのデータベース設定
- UnityプロジェクトへのFirebase SDKの導入方法
- FirestoreとRealtime Databaseの違い

次回の第五章では、いよいよUnityとFirebaseを用いてのアカウント新規作成・ログイン実装を行なっていきます。

もしも記事の中で進められない箇所があったら、Xなどでご連絡ください。