このページは Cloud Translation API によって翻訳されました。

Firebase Android Codelab - フレンドリーなチャットの構築

1. 概要

スクリーンショット

画像: 使いやすい Chat アプリ。

フレンドリーチャットの Codelab へようこそ。この Codelab では、Firebase プラットフォームを使用して Android でチャットアプリを作成する方法を学びます。

学習内容

Firebase Authentication を使用してユーザーにログインを許可する方法。
Firebase Realtime Database を使用してデータを同期する方法。
Cloud Storage for Firebase にバイナリファイルを保存する方法。
Firebase Local Emulator Suite を使用して、Firebase で Android アプリを開発する方法。

必要なもの

Android Studio の最新バージョン。
Android 5.0 以降を搭載した Android Emulator。
Node.js バージョン 10 以降（Emulator Suite を使用する場合）。
Java 8 以降。Java をインストールするには、こちらの手順に沿って操作してください。バージョンを確認するには、java -version を実行します。
Kotlin プログラミング言語の基本知識。

2. サンプルコードを取得する

リポジトリのクローンを作成する

コマンドラインから GitHub リポジトリのクローンを作成します。

$ git clone https://github.com/firebase/codelab-friendlychat-android

Android Studio にインポートする

Android Studio で [File] > [Open] を選択し、サンプルコードをダウンロードしたディレクトリから build-android-start ディレクトリ（ Android Studio フォルダ）を選択します。

Android Studio で build-android-start プロジェクトが開いたはずです。google-services.json ファイルがないという警告が表示されても、心配はいりません。これは後のステップで追加します。

依存関係を確認する

この Codelab では、必要なすべての依存関係がすでに追加されていますが、アプリに Firebase SDK を追加する方法を理解しておくことが重要です。

build.gradle.kts

plugins {
    id("com.android.application") version "8.0.0" apply false
    id("com.android.library") version "8.0.0" apply false
    id("org.jetbrains.kotlin.android") version "1.8.20" apply false

    // The google-services plugin is required to parse the google-services.json file
    id("com.google.gms.google-services") version "4.3.15" apply false
}

app/build.gradle.kts

plugins {
    id("com.android.application")
    id("kotlin-android")
    id("com.google.gms.google-services")
}

android {
    // ...
}

dependencies {
    // ...

    // Google Sign In SDK
    implementation("com.google.android.gms:play-services-auth:20.5.0")

    // Firebase SDK
    implementation(platform("com.google.firebase:firebase-bom:32.0.0"))
    implementation("com.google.firebase:firebase-database-ktx")
    implementation("com.google.firebase:firebase-storage-ktx")
    implementation("com.google.firebase:firebase-auth-ktx")

    // Firebase UI Library
    implementation("com.firebaseui:firebase-ui-auth:8.0.2")
    implementation("com.firebaseui:firebase-ui-database:8.0.2")
}

3. Firebase CLI をインストールする

この Codelab では、Firebase Emulator Suite を使用して、Firebase Auth、Realtime Database、Cloud Storage をローカルでエミュレートします。これにより、アプリをビルドするための安全で高速かつ無料のローカル開発環境が提供されます。

Firebase CLI をインストールする

まず、Firebase CLI をインストールする必要があります。macOS または Linux を使用している場合は、次の cURL コマンドを実行できます。

curl -sL https://firebase.tools | bash

Windows をご利用の場合は、インストール手順を参照してスタンドアロンバイナリを取得するか、npm を使用してインストールしてください。

CLI をインストールしたら、firebase --version を実行すると 9.0.0 以降のバージョンが報告されます。

$ firebase --version
9.0.0

4. Firebase Emulator Suite に接続する

エミュレータを起動する

ターミナルで、ローカルの codelab-friendlychat-android ディレクトリのルートから次のコマンドを実行します。

firebase emulators:start --project=demo-friendlychat-android

次のようなログが表示されます。ポートの値は firebase.json ファイルで定義されています。このファイルは、クローンのサンプルコードに含まれています。

$ firebase emulators:start --project=demo-friendlychat-android
i  emulators: Starting emulators: auth, database, storage
i  emulators: Detected demo project ID "demo-friendlychat-android", emulated services will use a demo configuration and attempts to access non-emulated services for this project will fail.
i  database: Database Emulator logging to database-debug.log
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI            │
├────────────────┼────────────────┼────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth     │
├────────────────┼────────────────┼────────────────────────────────┤
│ Database       │ localhost:9000 │ http://localhost:4000/database │
├────────────────┼────────────────┼────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage  │
└────────────────┴────────────────┴────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

ウェブブラウザで http://localhost:4000 に移動して、Firebase Emulator Suite UI を表示します。

Emulator Suite UI ホーム

この Codelab の残りの部分では、emulators:start コマンドを実行したままにします。

アプリを接続する

Android Studio で MainActivity.kt を開き、onCreate メソッド内に次のコードを追加します。

// When running in debug mode, connect to the Firebase Emulator Suite.
// "10.0.2.2" is a special IP address which allows the Android Emulator
// to connect to "localhost" on the host computer. The port values (9xxx)
// must match the values defined in the firebase.json file.
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

5. スターターアプリを実行する

google-services.json を追加する

Android アプリを Firebase に接続するには、Android プロジェクトの app フォルダ内に google-services.json ファイルを追加する必要があります。この Codelab では、Firebase Emulator Suite に接続できる疑似 JSON ファイルが用意されています。

mock-google-services.json ファイルを google-services.json として build-android-start/app フォルダにコピーします。

cp mock-google-services.json build-android-start/app/google-services.json

この Codelab の最後のステップでは、実際の Firebase プロジェクトと Firebase Android アプリを作成し、この疑似 JSON ファイルを独自の構成に置き換える方法について学習します。

アプリを実行する

これで、プロジェクトを Android Studio にインポートし、Firebase 構成の JSON ファイルを追加できました。これで、アプリを初めて実行する準備ができました。

Android Emulator を起動します。
Android Studio で、ツールバーの実行アイコン（）をクリックします。

Android Emulator 上でアプリが起動するはずです。この時点では、空のメッセージリストが表示され、メッセージの送受信は機能しません。この Codelab の次のステップでは、ユーザーを認証して、フレンドリーチャットを使用できるようにします。

6. 認証を有効にする

このアプリでは、Firebase Realtime Database を使用してすべてのチャットメッセージを保存します。ただし、データを追加する前に、アプリが安全であること、認証されたユーザーのみがメッセージを投稿できることを確認する必要があります。このステップでは、Firebase Authentication を有効にして、Realtime Database セキュリティルールを構成します。

次に、基本的な Firebase Authentication コードをアプリに追加して、ユーザーを検出してログイン画面を実装します。

現在のユーザーを確認する

まず、次のインスタンス変数を MainActivity.kt クラスに追加します。

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

次に、MainActivity を変更して、ユーザーがアプリを開いて未認証のときは常にユーザーをログイン画面に誘導するようにしましょう。binding をビューにアタッチした後、以下を onCreate() メソッドに追加します。

MainActivity.kt

// Initialize Firebase Auth and check if the user is signed in
auth = Firebase.auth
if (auth.currentUser == null) {
    // Not signed in, launch the Sign In activity
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
    return
}

また、onStart() の間にユーザーがログインしているかどうかも確認します。

MainActivity.kt

public override fun onStart() {
    super.onStart()
    // Check if user is signed in.
    if (auth.currentUser == null) {
        // Not signed in, launch the Sign In activity
        startActivity(Intent(this, SignInActivity::class.java))
        finish()
        return
    }
}

次に、getUserPhotoUrl() メソッドと getUserName() メソッドを実装して、現在認証されている Firebase ユーザーに関する適切な情報を返します。

MainActivity.kt

private fun getPhotoUrl(): String? {
    val user = auth.currentUser
    return user?.photoUrl?.toString()
}

private fun getUserName(): String? {
    val user = auth.currentUser
    return if (user != null) {
        user.displayName
    } else ANONYMOUS
}

次に、ログアウトボタンを処理する signOut() メソッドを実装します。

MainActivity.kt

private fun signOut() {
    AuthUI.getInstance().signOut()
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
}

これで、必要に応じてユーザーをログイン画面に誘導するロジックがすべて揃いました。次に、ユーザーを適切に認証するためにログイン画面を実装する必要があります。

SignInActivity.kt ファイルを開きます。ここでは、シンプルなログインボタンを使用して認証を開始します。このセクションでは、FirebaseUI を使用してログインのロジックを実装します。

// Firebase instance variables コメントの下の SignInActivity クラスの Auth インスタンス変数を追加します。

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

次に、onCreate() メソッドを編集して、MainActivity と同じ方法で Firebase を初期化します。

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

ActivityResultLauncher フィールドを SignInActivity に追加します。

SignInActivity.kt

// ADD THIS
private val signIn: ActivityResultLauncher<Intent> =
        registerForActivityResult(FirebaseAuthUIActivityResultContract(), this::onSignInResult)

override fun onCreate(savedInstanceState: Bundle?) {
    // ...
}

次に、onStart() メソッドを編集して FirebaseUI ログインフローを開始します。

SignInActivity.kt

public override fun onStart() {
    super.onStart()

    // If there is no signed in user, launch FirebaseUI
    // Otherwise head to MainActivity
    if (Firebase.auth.currentUser == null) {
        // Sign in with FirebaseUI, see docs for more details:
        // https://firebase.google.com/docs/auth/android/firebaseui
        val signInIntent = AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setLogo(R.mipmap.ic_launcher)
                .setAvailableProviders(listOf(
                        AuthUI.IdpConfig.EmailBuilder().build(),
                        AuthUI.IdpConfig.GoogleBuilder().build(),
                ))
                .build()

        signIn.launch(signInIntent)
    } else {
        goToMainActivity()
    }
}

次に、ログイン結果を処理する onSignInResult メソッドを実装します。ログインの結果が成功したら、MainActivity に進みます。

SignInActivity.kt

private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) {
    if (result.resultCode == RESULT_OK) {
        Log.d(TAG, "Sign in successful!")
        goToMainActivity()
    } else {
        Toast.makeText(
                this,
                "There was an error signing in",
                Toast.LENGTH_LONG).show()

        val response = result.idpResponse
        if (response == null) {
            Log.w(TAG, "Sign in canceled")
        } else {
            Log.w(TAG, "Sign in error", response.error)
        }
    }
}

これで、サーバーサイドの構成を管理する必要なく、FirebaseUI による認証をわずか数回のメソッド呼び出しで実装できました。

作業内容をテストする

Android Emulator でアプリを実行します。すぐにログイン画面が表示されます。[Sign in with email] ボタンをタップして、アカウントを作成します。すべてが正しく実装されていれば、メッセージ画面に移動します。

ログイン後、ブラウザで Firebase Emulator Suite UI を開き、[Authentication] タブをクリックして、この最初のログインユーザーアカウントを確認します。

7. メッセージを読む

このステップでは、Realtime Database に保存されているメッセージの読み取りと表示を行う機能を追加します。

サンプルメッセージをインポートする

Firebase Emulator Suite UI で、[Realtime Database] タブを選択します。
Codelab リポジトリのローカルコピーからデータビューアに initial_messages.json ファイルをドラッグ&ドロップします。

データベースの messages ノードの下にいくつかのメッセージが作成されているはずです。

データを読み取る

メッセージを同期する

このセクションでは、新しく追加されたメッセージをアプリの UI に同期させるコードを次の方法で追加します。

Firebase Realtime Database を初期化し、データの変更を処理するリスナーを追加します。
新しいメッセージが表示されるように RecyclerView アダプターを更新します。
MainActivity クラスで、Database インスタンス変数を他の Firebase インスタンス変数とともに追加します。

MainActivity.kt

// Firebase instance variables
// ...
private lateinit var db: FirebaseDatabase
private lateinit var adapter: FriendlyMessageAdapter

以下の定義のコードを使用して、コメント // Initialize Realtime Database and FirebaseRecyclerAdapter の下で MainActivity の onCreate() メソッドを変更します。このコードは、Realtime Database から既存のメッセージをすべて追加し、Firebase Realtime Database の messages パスの下にある新しい子エントリをリッスンします。各メッセージの UI に新しい要素を追加します。

MainActivity.kt

// Initialize Realtime Database
db = Firebase.database
val messagesRef = db.reference.child(MESSAGES_CHILD)

// The FirebaseRecyclerAdapter class and options come from the FirebaseUI library
// See: https://github.com/firebase/FirebaseUI-Android
val options = FirebaseRecyclerOptions.Builder<FriendlyMessage>()
    .setQuery(messagesRef, FriendlyMessage::class.java)
    .build()
adapter = FriendlyMessageAdapter(options, getUserName())
binding.progressBar.visibility = ProgressBar.INVISIBLE
manager = LinearLayoutManager(this)
manager.stackFromEnd = true
binding.messageRecyclerView.layoutManager = manager
binding.messageRecyclerView.adapter = adapter

// Scroll down when a new message arrives
// See MyScrollToBottomObserver for details
adapter.registerAdapterDataObserver(
    MyScrollToBottomObserver(binding.messageRecyclerView, adapter, manager)
)

次に、FriendlyMessageAdapter.kt クラスの内部クラス MessageViewHolder() 内に bind() メソッドを実装します。

friendMessageAdapter.kt

inner class MessageViewHolder(private val binding: MessageBinding) : ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        binding.messageTextView.text = item.text
        setTextColor(item.name, binding.messageTextView)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
    ...
}

また、画像のメッセージを表示する必要があるため、内部クラス ImageMessageViewHolder() 内に bind() メソッドも実装します。

friendMessageAdapter.kt

inner class ImageMessageViewHolder(private val binding: ImageMessageBinding) :
    ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        loadImageIntoView(binding.messageImageView, item.imageUrl!!)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
}

最後に、MainActivity に戻り、Firebase Realtime Database からの更新のリッスンを開始および停止します。MainActivity の onPause() メソッドと onResume() メソッドを次のように更新します。

MainActivity.kt

public override fun onPause() {
    adapter.stopListening()
    super.onPause()
}

public override fun onResume() {
    super.onResume()
    adapter.startListening()
}

メッセージの同期をテストする

実行アイコン（）をクリックします。
Emulator Suite UI で [Realtime Database] タブに戻り、新しいメッセージを手動で追加します。Android アプリにメッセージが表示されることを確認します。

これで、リアルタイムデータベースがアプリに追加されました。

8. メッセージを送信する

テキストメッセージの送信を実装する

このセクションでは、アプリユーザーがテキストメッセージを送信する機能を追加します。以下のコードスニペットは、送信ボタンのクリックイベントをリッスンし、メッセージフィールドの内容を含む新しい FriendlyMessage オブジェクトを作成して、メッセージをデータベースに push します。push() メソッドは、プッシュされたオブジェクトのパスに自動生成された ID を追加します。これらの ID は連続しており、新しいメッセージがリストの最後に追加されます。

MainActivity クラスの onCreate() メソッドにある送信ボタンのクリックリスナーを更新します。このコードは、すでに onCreate() メソッドの一番下にあります。以下のコードと一致するように onClick() 本文を更新します。

MainActivity.kt

// Disable the send button when there's no text in the input field
// See MyButtonObserver for details
binding.messageEditText.addTextChangedListener(MyButtonObserver(binding.sendButton))

// When the send button is clicked, send a text message
binding.sendButton.setOnClickListener {
    val friendlyMessage = FriendlyMessage(
        binding.messageEditText.text.toString(),
        getUserName(),
        getPhotoUrl(),
        null /* no image */
    )
    db.reference.child(MESSAGES_CHILD).push().setValue(friendlyMessage)
    binding.messageEditText.setText("")
}

画像メッセージ送信を実装する

このセクションでは、アプリユーザーが画像メッセージを送信する機能を追加します。画像メッセージの作成手順は次のとおりです。

画像を選択
画像の選択を処理する
一時的な画像メッセージを Realtime Database に書き込む
選択した画像のアップロードを開始
アップロードが完了したら、画像メッセージの URL をアップロードした画像の URL に更新する

画像を選択

この Codelab では、画像を追加するために Cloud Storage for Firebase を使用します。Cloud Storage はアプリのバイナリデータを保存するのに適した場所です。

画像選択を処理し、一時メッセージを書き込む

ユーザーが画像を選択すると、画像選択 Intent が起動します。これは、onCreate() メソッドの最後にあるコードですでに実装されています。完了すると、MainActivity の onImageSelected() メソッドを呼び出します。以下のコードスニペットを使用して、データベースに一時的な画像 URL を記述し、画像がアップロードされることを示すメッセージを書き込みます。

MainActivity.kt

private fun onImageSelected(uri: Uri) {
    Log.d(TAG, "Uri: $uri")
    val user = auth.currentUser
    val tempMessage = FriendlyMessage(null, getUserName(), getPhotoUrl(), LOADING_IMAGE_URL)
    db.reference
            .child(MESSAGES_CHILD)
            .push()
            .setValue(
                    tempMessage,
                    DatabaseReference.CompletionListener { databaseError, databaseReference ->
                        if (databaseError != null) {
                            Log.w(
                                    TAG, "Unable to write message to database.",
                                    databaseError.toException()
                            )
                            return@CompletionListener
                        }

                        // Build a StorageReference and then upload the file
                        val key = databaseReference.key
                        val storageReference = Firebase.storage
                                .getReference(user!!.uid)
                                .child(key!!)
                                .child(uri.lastPathSegment!!)
                        putImageInStorage(storageReference, uri, key)
                    })
}

画像のアップロードとメッセージの更新

putImageInStorage() メソッドを MainActivity に追加します。選択した画像のアップロードを開始するために、onImageSelected() で呼び出されます。アップロードが完了したら、適切な画像を使用するようにメッセージを更新します。

MainActivity.kt

private fun putImageInStorage(storageReference: StorageReference, uri: Uri, key: String?) {
    // First upload the image to Cloud Storage
    storageReference.putFile(uri)
        .addOnSuccessListener(
            this
        ) { taskSnapshot -> // After the image loads, get a public downloadUrl for the image
            // and add it to the message.
            taskSnapshot.metadata!!.reference!!.downloadUrl
                .addOnSuccessListener { uri ->
                    val friendlyMessage =
                        FriendlyMessage(null, getUserName(), getPhotoUrl(), uri.toString())
                    db.reference
                        .child(MESSAGES_CHILD)
                        .child(key!!)
                        .setValue(friendlyMessage)
                }
        }
        .addOnFailureListener(this) { e ->
            Log.w(
                TAG,
                "Image upload task was unsuccessful.",
                e
            )
        }
}

メッセージの送信をテストする

Android Studio で [Run] ボタンをクリックします。
Android Emulator でメッセージを入力し、送信ボタンをタップします。新しいメッセージは、アプリの UI と Firebase Emulator Suite UI に表示されます。
Android Emulator で [+] の画像をタップして、デバイスから画像を選択します。新しいメッセージはまずプレースホルダ画像とともに表示され、画像のアップロードが完了すると選択した画像とともに表示されます。新しいメッセージは、Emulator Suite UI にも表示されます。具体的には、[Realtime Database] タブにオブジェクトとして、また [Storage] タブに blob として表示されます。

9. お疲れさまでした

Firebase を使用してリアルタイムチャットアプリケーションを構築できました。

学習した内容

Firebase Authentication
Firebase Realtime Database
Cloud Storage for Firebase

次は、この Codelab で学んだことを活かして、自分の Android アプリに Firebase を追加してみましょう。Firebase について詳しくは、firebase.google.com をご覧ください。

実際の Firebase プロジェクトを設定し、（デモプロジェクトとエミュレートされたリソースのみではなく）実際の Firebase リソースを使用する方法を確認する場合は、次のステップに進みます。

注: 実際の Firebase プロジェクトを設定した後、特に実際のアプリの構築を開始する場合でも、開発とテストには Firebase Local Emulator Suite を使用することをおすすめします。

10. 省略可: Firebase プロジェクトを作成して設定する

このステップでは、実際の Firebase プロジェクトと、この Codelab で使用する Firebase Android アプリを作成します。また、アプリ固有の Firebase 構成をアプリに追加します。最後に、アプリで使用する実際の Firebase リソースを設定します。

Firebase プロジェクトを作成する

ブラウザで Firebase コンソールに移動します。
[プロジェクトを追加] を選択します。
プロジェクト名を選択または入力します。任意の名前を使用できます。
この Codelab には Google アナリティクスは必要ないので、プロジェクトで Google アナリティクスを有効にすることはスキップできます。
[プロジェクトを作成] をクリックします。プロジェクトの準備ができたら、[続行] をクリックします。

Android プロジェクトに Firebase を追加する

この手順を始める前に、アプリの SHA1 ハッシュを取得します。ローカルの build-android-start ディレクトリで次のコマンドを実行して、デバッグキーの SHA1 を確認します。

./gradlew signingReport

Store: /Users/<username>/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8F:06:59:6A:AE:33:76:87:AA:AD:19:23
SHA1: A7:89:F5:06:A8:07:A1:22:EC:90:6A:A6:EA:C3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2A:35:EE:F2:51:23:72:4D:72:67:A5:6A:8A:58:22:2C:00:A6:AB:F6:45:D5:A1:82:D8:90:A4:69:C8:FE
Valid until: Wednesday, August 10, 2044

上記のような出力が表示されます。重要な行は SHA1 ハッシュです。SHA1 ハッシュが見つからない場合は、こちらのページで詳細をご確認ください。

Firebase コンソールに戻り、次の手順に沿って Android プロジェクトを Firebase プロジェクトに登録します。

新しいプロジェクトの概要画面で、Android アイコンをクリックして設定ワークフロー（）を起動します。
次の画面で、アプリのパッケージ名として「com.google.firebase.codelab.friendlychat」と入力します。
[アプリを登録] をクリックし、[google-services.json をダウンロード] をクリックして Firebase 構成ファイルをダウンロードします。
google-services.json ファイルを Android プロジェクトの app ディレクトリにコピーします。
コンソールの設定ワークフローに表示される次のステップはスキップします（build-android-start プロジェクトですでに完了しています）。
プロジェクトを Gradle ファイルと同期して、すべての依存関係をアプリで利用できるようにします。Android Studio のツールバーで、[File] > [Sync Project with Gradle Files] を選択します。構成の変更を行うために、Build/Clean Project と Build/Rebuild Project を実行しなければならない場合もあります。

Firebase Authentication を構成する

ユーザーの代わりにアプリが Firebase Authentication API にアクセスできるようにするには、Firebase Authentication と、アプリで使用するログインプロバイダを有効にする必要があります。

Firebase コンソールで、左側のナビゲーションパネルから [Authentication] を選択します。
[Sign-in method] タブを選択します。
[メール/パスワード] をクリックし、スイッチを有効（青色）に切り替えます。
[Google] をクリックし、スイッチを有効（青色）に切り替えて、プロジェクトのサポートメールを設定します。

この Codelab の後半で「CONFIGURATION_NOT_FOUND」というメッセージでエラーが発生した場合は、このステップに戻って作業を再確認してください。

Realtime Database を構成する

この Codelab のアプリは、チャットメッセージを Firebase Realtime Database に保存します。このセクションでは、Firebase セキュリティルールという JSON 構成言語を使用してデータベースを作成し、そのセキュリティを構成します。

Firebase コンソールで、左側のナビゲーションパネルから [Realtime Database] を選択します。
[データベースを作成] をクリックして、新しい Realtime Database インスタンスを作成します。プロンプトが表示されたら、us-central1 リージョンを選択し、[次へ] をクリックします。
セキュリティルールに関するプロンプトが表示されたら、[ロックモード] を選択して [有効にする] をクリックします。
データベースインスタンスが作成されたら、[Rules] タブを選択し、ルールの構成を次のように更新します。
```
 {
   "rules": {
     "messages": {
       ".read": "auth.uid != null",
       ".write": "auth.uid != null"
     }
   }
 }
```

セキュリティルールの仕組み（「auth」変数に関するドキュメントなど）の詳細については、Realtime Database のセキュリティに関するドキュメントをご覧ください。

Cloud Storage for Firebase を構成する

Firebase コンソールで、左側のナビゲーションパネルから [Storage] を選択します。
[使ってみる] をクリックして、プロジェクトで Cloud Storage を有効にします。
ダイアログの手順に沿って、推奨されるデフォルトを使用してバケットを設定します。

Firebase リソースに接続する

この Codelab の前のステップで、以下を MainActivity.kt に追加しました。この条件付きブロックにより、Android プロジェクトを Firebase Emulator Suite に接続しました。

// REMOVE OR DISABLE THIS
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

アプリを新しい実際の Firebase プロジェクトとその実際の Firebase リソースに接続する場合は、このブロックを削除するか、BuildConfig.DEBUG が false になるようにリリースモードでアプリを実行します。

Firebase Android Codelab - フレンドリーなチャットの構築

1. 概要

学習内容

必要なもの

2. サンプルコードを取得する

リポジトリのクローンを作成する

Android Studio にインポートする

依存関係を確認する

3. Firebase CLI をインストールする

Firebase CLI をインストールする

ログイン

4. Firebase Emulator Suite に接続する

エミュレータを起動する

アプリを接続する

5. スターター アプリを実行する

google-services.json を追加する

アプリを実行する

6. 認証を有効にする

基本的なログイン機能を追加する

現在のユーザーを確認する

ログイン画面を実装する

作業内容をテストする

7. メッセージを読む

サンプル メッセージをインポートする

データを読み取る

メッセージを同期する

MainActivity.kt

メッセージの同期をテストする

8. メッセージを送信する

テキスト メッセージの送信を実装する

画像メッセージ送信を実装する

画像を選択

画像選択を処理し、一時メッセージを書き込む

画像のアップロードとメッセージの更新

MainActivity.kt

メッセージの送信をテストする

9. お疲れさまでした

学習した内容

10. 省略可: Firebase プロジェクトを作成して設定する

Firebase プロジェクトを作成する

Android プロジェクトに Firebase を追加する

Firebase Authentication を構成する

Realtime Database を構成する

Cloud Storage for Firebase を構成する

Firebase リソースに接続する

5. スターターアプリを実行する

サンプルメッセージをインポートする

テキストメッセージの送信を実装する