![たかやん(エンジニア)](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2021%2F11%2FIS7eCuAw_400x400-150x150.jpg&w=64&q=75)
FirebaseでAndroidにプッシュ通知してみた!
![たかやん(エンジニア)](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2021%2F11%2FIS7eCuAw_400x400-150x150.jpg&w=64&q=75)
IT技術
![FirebaseでAndroidにプッシュ通知してみた!](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2020%2F12%2Ffirebase-android-push-notification.jpg&w=3840&q=75)
Firebaseでpush 通知を試します!
![](https://api.rightcode.co.jp/wp-content/uploads/2020/12/suzuki-icon.jpg)
(株)ライトコードの鈴木です!
「Firebase」とは、Google が提供している、モバイルアプリや Web アプリケーションの開発に利用できるプラットフォームです。
Firebase を利用することでサーバーの管理や保守が不要となり、開発に専念できるため負担が大きく軽減できます。
今回は、数あるサービスのうち「Cloud Messaging」を利用してpush 通知を試してみます!
Firebase のプロジェクトを作成する
Firebase のページから「プロジェクトを追加」をクリックし、プロジェクト名を入力してください。
プロジェクト名は、4文字以上であれば何でも問題ありません。
![プロジェクト名をつける](https://api.rightcode.co.jp/wp-content/uploads/2020/12/1-firebase-android-push-notification.jpg)
アプリを Firebase のプロジェクトに登録する
Firebase にプロジェクトを作成すると、プロジェクトに Android アプリを登録できるようになります。
Android のパッケージ名を入力
Firebase コンソールの Overview ページにある「Android」のアイコンをクリックし、「Android のパッケージ名」を入力します。
パッケージ名は、アプリレベルの Gradle ファイル(app/build.gradle)に記載されています。
手順にしたがって進めていき、ダウンロードした google-service.json を android/app に置いたら、「次へ」をクリックしましょう。
Firebase SDK の追加
次に行う Firebase SDK の追加作業では、2つのファイルを変更する必要があります。
プロジェクトレベルの build.gradle を変更
最初は、プロジェクトレベルの build.gradle(android/build.gradle) に下記コードを追加します。
1buildscript {
2 repositories {
3 google()
4 }
5 dependencies {
6 // このコードを追加
7 classpath 'com.google.gms:google-services:4.3.4'
8 }
9}
アプリレベルの build.gradle を変更
2つ目は、アプリレベルの build.gradle(android/app/build.gradle) に下記のコードを追加します。
1dependencies {
2 // 下記の2行を追加
3 implementation 'com.google.firebase:firebase-messaging:20.3.0'
4 implementation 'com.google.firebase:firebase-core:17.5.0'
5}
コードの追記が終わったら、Firebase のページに戻って「次へ」をクリックしましょう。
アプリを実行して、インストール
「アプリを実行してインストールを確認」と表示されますので、指示に従ってアプリをインストールしてください。
「Firebase がアプリに正常に追加されました。」と表示されたら OK です!
![アプリを実行して、インストール](https://api.rightcode.co.jp/wp-content/uploads/2020/12/3-firebase-android-push-notification.jpg)
通知を受け取れるように実装する
クラス名は何でも構いませんが、ここでは「MyFirebaseMessagingService」とします。
クラスを作成したら、「FirebaseMessagingService」クラスを継承してください。
1class MyFirebaseMessagingService : FirebaseMessagingService() {
2 override fun onMessageReceived(remoteMessage: RemoteMessage) {
3 super.onMessageReceived(remoteMessage)
4 showNotification(
5 remoteMessage.notification?.title,
6 remoteMessage.notification?.body
7 )
8 }
9
10 fun showNotification(title: String?, message: String?) {
11 val builder = NotificationCompat.Builder(this, "MyNotification").apply {
12 setContentTitle(title)
13 setAutoCancel(true)
14 setContentText(message)
15 }
16 NotificationManagerCompat.from(this).notify(999, builder.build())
17 }
18}
MyFirebaseMessagingService をサービス登録
そして、AndroidManifest.xml に、先ほど作成した「MyFirebaseMessagingService」をサービスとして登録します。
1 <service android:name=".MyFirebaseMessagingService">
2 <intent-filter>
3 <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />
4 </intent-filter>
5 </service>
これで準備完了です!
Push 通知をする
次は、Firebase コンソールで Push 通知のメッセージを作成しましょう。
「Cloud Messaging」→「Send your first message」を選択し、通知のタイトルと通知テキストを入力したら「次へ」をクリックします。
ターゲットとするユーザーで、自分の作成したアプリを選択し、時刻などの設定に進んでください。
![Push 通知をする](https://api.rightcode.co.jp/wp-content/uploads/2020/12/4-firebase-android-push-notification.png)
潜在的ユーザーが0%になっていると送信できないので、注意してください。
最後に「確認」を押し、設定した時刻になると、下記のようにアプリの方に通知が来るはずです。
![push通知画面](https://api.rightcode.co.jp/wp-content/uploads/2020/12/5-firebase-android-push-notification.png)
以上で、push 通知は完了です!
以上、「Firebase を使用した Android の Push 通知」について解説してみました。
今回は、アプリをインストールしているすべてのユーザーに Push 通知をしています。
全ユーザーではなく「個別のユーザーに Push 通知をする」なども簡単に設定できるので、ぜひ試してみてくださいね!
こちらの記事もオススメ!
2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
2020.08.04エンジニアの働き方 特集社員としての働き方社員としてのエンジニアの働き方とは?ライトコードのエンジニアはどんな働き方をしてるのか、まとめたいと...
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
![たかやん(エンジニア)](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2021%2F11%2FIS7eCuAw_400x400-150x150.jpg&w=3840&q=75)
グンマー帝国から密出国してきてるブタ。 東京人多い...