ニフクラ mobile backendを使ってAndroidへプッシュ通知を送る手順を一から紹介

スマートフォンアプリにプッシュ通知を実装したいと考える方は多いでしょう。しかし、はじめて実装しようと思うと、ステップが多くて悩んでしまうかも知れません。

そこで、今回はニフクラ mobile backendを使ってプッシュ通知を受信するまでの流れを紹介します。

全体の手順

Android向けにプッシュ通知を設定するため、次のサービスでの設定を行います。

下記の手順では、各サービスのアカウントは持っていることとして進めます。あらかじめアカウントを取得をお願いします。

Firebaseの設定
ニフクラ mobile backendの設定
Monaca上の設定

必要な情報

まず第1にAndroidアプリのパッケージ名を決めておきます。例えば以下のような形です。

mobi.monaca.app.android

Firebaseでの設定

Firebaseでは、プロジェクトを新規に作成して、次の２つのファイルを取得します。

構成ファイル: google-services.json
秘密鍵ファイル: xxxx-firebase-adminsdk-xxxx-xxxxxx.json

2つのファイルを取得したあと、構成ファイルはMonacaのプロジェクトに設定。

秘密鍵ファイルは、ニフクラ mobile backendへ設定という流れになります。

プロジェクトの新規作成

Firebaseへ行き、プロジェクトを作成します。

作成完了すると、以下のような画面が表示されます。

Cloud Messagingの設定(構成ファイルの作成)

プロジェクトを作成したら、下の方にある Cloud Messaging をクリックします。

Cloud Messagingが表示されたら、上の方にあるAndroidアイコンをクリックします。

Androidパッケージ名に、先ほど決めたパッケージ名を入力します。アプリのニックネームや署名証明書は省略可能です。

アプリを登録するとgoogle-services.jsonというファイルがダウンロードできます。このファイルは後で利用します。

終わったらコンソールに進むをクリックします。

Firebaseの秘密鍵を取得

Firebaseのプロジェクトトップページに戻り、右上にあるギアアイコンをクリックして プロジェクトの設定 をクリックします。

プロジェクトの設定が表示されるので、サービスアカウントタブをクリックします。そして、下の方に 新しい秘密鍵の生成 ボタンをクリックします。

確認ダイアログが出て、秘密鍵ファイルがダウンロードできます。

ここまでの手順でFirebaseから以下のファイルが取得できているはずです。秘密鍵はファイル名がプロジェクトによって異なるので注意してください。

google-services.json
xxxx-firebase-adminsdk-xxxx-xxxxxx.json

ニフクラ mobile backendの設定

ニフクラ mobile backendにアクセスします。新しいアプリを作成します。

右上にあるアプリ設定をクリックして、プッシュ通知メニューある プッシュ通知の許可 を 許可する にします。

さらにその下にある Androidプッシュ通知 にある プッシュ通知設定ファイル(json) として、先ほどFirebaseでダウンロードした秘密鍵ファイル（xxxx-firebase-adminsdk-xxxx-xxxxxx.jsonのようなファイル名）をアップロードします。

また、ニフクラ mobile backendではアプリケーションキー、クライアントキーが取得できます。これは後で使うのでメモしておきます。

アプリケーションキー
クライアントキー

Monacaの設定

プラグインの追加

プッシュ通知を実装したいアプリを開きます。または新規作成してください。

Web IDEを開いたら、設定メニューにある Cordovaプラグインの管理 を選択します。

プラグイン一覧にある NIFCloudMB を選択し、有効ボタンを押します。

Androidアプリの設定

続いて設定メニューにある Androidアプリ設定 を選択します。そして、パッケージ名として一番最初に決めたAndroidパッケージ名を入力します。

google-services.jsonのアップロード

Monacaプロジェクトのルート（/）に google-services.json をアップロードします。ルートにあるファイル（package.jsonなど）を選択した状態で、ファイルメニューのアップロードを選択します。そして出てきたダイアログに、 google-services.json をドロップしてアップロードします。

実装

任意のJavaScriptファイルを作成し、それを www/index.html にて読み込みます。今回は www/app.js を作成し、それを読み込んでいます。

<script src="app.js"></script>

app.jsの内容

app.jsの内容です。 window.NCMB.monaca.setDeviceToken にてデバイストークンを取得し、ニフクラ mobile backendに保存しています。逆にプッシュ通知を受け取った場合には window.NCMB.monaca.setHandler が呼ばれます。

YOUR_APPLICATION_KEY と YOUR_CLIENT_KEY は、それぞれニフクラ mobile backendにて取得したキーに書き換えてください。

// プレビューとアプリとで初期化完了時のイベントを分けます
const e = window.cordova ? 'deviceready' : 'DOMContentLoaded';

// 初期化完了時のイベント
document.addEventListener(e, async () => {
    try {
        // デバイストークンを取得します
        const res = await new Promise((res, rej) => {
            window.NCMB.monaca.setDeviceToken(
                "YOUR_APPLICATION_KEY",
                "YOUR_CLIENT_KEY",
                res,
                rej
            );
        });
        // 成功時のログ
        console.log(res);
    } catch (e) {
        // 失敗時のログ
        console.log(e);
    }
    // 開封通知用
    window.NCMB.monaca.setReceiptStatus(true);

    // 開封時のイベント
    window.NCMB.monaca.setHandler(jsonData => {
        // 今回はアラートを出すだけ
        alert(JSON.stringify(jsonData));
    });
});