概要

プッシュ通知の実装って結構難しいと思っていたんですが、ニフクラ mobile backendをプッシュ通知 ASP サービスに利用するとすぐに実装できますので今回はこちらを使っていきます！
ニフクラ mobile backendはBasicプランなら無料で使えますので、気軽に使ってみてください

公式ドキュメントはこちら
https://mbaas.nifcloud.com/doc/current/push/basic_usage_javascript.html

事前準備

PC(最新版のGoogle Chrome)
動作確認用Android端末（OS4以降）
Googleアカウントの取得（無料）
ニフクラ mobile backend（無料）
Monaca

プッシュ通知受信に必要な準備

Firebase Consoleにアクセスします
https://console.firebase.google.com/
プロジェクトを新規作成します
プロジェクトの追加をクリックします

* プロジェクトの追加画面が開くので、プロジェクト名を入力し`続行`をクリックします * Googlアナリティクスを無効にしてください * しばらく待つと「プロジェクトの準備ができました」と表示されるので`次へ`をクリックします

* 作成したプロジェクトが開かれます

google-services.json ファイルの作成

画面をスクロールして「 Cloud Messaging 」をクリックします
「Cloud Messaging」画面が表示されたら「Androidのマーク」をクリックします

* パッケージ名を登録します * 例「 ncmb.Push.Demo 」

「省略可」と記載しているところは入力しなくても大丈夫です。

google-services.json をダウンロードをクリックします(任意フォルダに保管しておきましょう）
この画面では「google-services.json」ファイルのダウンロード以外の作業は不要ですので、ダウンロードが終わったら次へをクリックします
次へをクリックすると↓のような画面が出ます。

今回はmobile backendのSDKを使用するので、このステップはスキップして問題ありません。
この画面内の対応が完了したら次へをクリックします。
次へをクリックすると↓のような画面が出ます。

コンソールに進むをクリックしてください。

秘密鍵（jsonファイル）の作成

コンソール画面が表示されるので、歯車マークをクリックし「 プロジェクトの設定 」をクリックします

* 上部タブの`サービスアカウント`をクリックします * 下の方にある`新しい秘密鍵の生成`をクリックします * アラートが表示されるので、確認後`キーを生成`をクリックします * 秘密鍵（jsonファイル）がダウンロードされます

ニフクラ mobile backend の準備

ニフクラ mobile backendにログインします
https://mbaas.nifcloud.com/
新しいアプリを作成してアプリ名を入力し新規作成をクリックします
- 例）PushDemo

プッシュ通知の設定

右上の「アプリ設定」＞「プッシュ通知」をクリックします
「プッシュ通知の許可」＞「許可する」を選択して保存してください

* Androidプッシュ通知の設定項目の`プッシュ通知設定ファイルの選択`というボタンをクリックして、先程ダウンロードしたFirebaseの`秘密鍵jsonファイル`をアップロードします

Monacaの準備

Monacaにログインします
- https://ja.monaca.io/
「新しいプロジェクトを作る」をクリックします
テンプレート選択画面で最小限のテンプレートをクリックし、プロジェクト名を決めて作成をクリックします

プッシュ通知プラグインの有効化

ニフクラ mobile backend のプッシュ通知を利用するためのプラグインをMonacaに導入します

Monacaの「設定」タブをクリックして、「Cordovaプラグインの管理...」をクリックします
検索窓に ncmb と入力すると NIFCloudMB というプラグインが表示されるので「有効」にする

注意
入力すると自動的に結果が「利用可能なプラグイン」に出てくるので、右の「インポート」ボタンを押さないよう注意

AndroidXの有効化

Monacaの設定＞「Androidアプリの設定...」を開いてください
1番下のAndroidXを有効にするにチェックを入れて保存します

実装と mobile backend APIキーの設定

既に開いている index.html タブをクリックして表示します
scriptタグ内にコードを書いていきます

document.addEventListener("deviceready", function(){
var successCallback = function () {
   //端末登録後の処理
   alert("登録成功");
};
var errorCallback = function (err) {
   //端末登録でエラーが発生した場合の処理
  alert("登録失敗"+JSON.stringify(error));
};
// デバイストークンを取得してinstallation登録を行う
window.NCMB.monaca.setDeviceToken(
   "YOUR_APPLICATION_KEY", //ニフクラ mobile backendのApplicationキーを入れる
   "YOUR_CLIENT_KEY",      //ニフクラ mobile backendのclientキーを入れる
   successCallback,
   errorCallback:
);
},false);

Applicationキーclientキーの確認方法
ニフクラ mobile backend管理画面の右上「アプリ設定」から確認できます

ビルド

先ほどダウンロードしたgoogle-services.jsonファイルをMonacaにアップロード（親フォルダ内に配置）してください

* google-services.jsonはルートディレクトリ(config.xmlなどがある場所)に配置してください。 * ファイル＞保存で保存を行う * 「ビルド」＞「`Androidアプリのビルド`」を開きます * `デバッグビルド`が選択されていることを確認して`ビルドを開始する`をクリックします * 少し待つとビルドが完了するので`QRコード`でインストールします