Androidのプッシュ通知実装マニュアル

# 概要

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

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

# 事前準備

* PC(最新版のGoogle Chrome)
* 動作確認用Android端末（OS4以降）
* <a href="https://accounts.google.com/signup/v2/webcreateaccount?flowName=GlifWebSignIn&flowEntry=SignUp">Googleアカウントの取得（無料）</a>
* <a href-"https://mbaas.nifcloud.com/">ニフクラ mobile backend（無料）</a>
* <a href-"https://ja.monaca.io/">Monaca</a>

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

* Firebase Consoleにアクセスします
 * https://console.firebase.google.com/
* プロジェクトを新規作成します
* `プロジェクトの追加`をクリックします
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/9fff8d38-fc89-974e-6422-725efbed032a.png" width="500px">
* プロジェクトの追加画面が開くので、プロジェクト名を入力し`続行`をクリックします
* Googlアナリティクスを<b>無効</b>にしてください
* しばらく待つと「プロジェクトの準備ができました」と表示されるので`次へ`をクリックします:arrow_forward:
* 作成したプロジェクトが開かれます:relaxed:

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

* 画面をスクロールして「<b> `Cloud Messaging` </b>」をクリックします
* 「Cloud Messaging」画面が表示されたら「<b>Androidのマーク</b>:robot:」をクリックします
<center><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/c9935f2a-1c00-057d-d3bb-8123e2a98059.png" width="400px"></center>
* パッケージ名を登録します
 * 例「 ncmb.Push.Demo 」

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

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

<center><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/e5bc04b9-b89f-cb21-2295-89f17e5254d8.png" width="400px"></center>

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

<center><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/601709a6-2f6d-6d20-4327-10975bb0905c.png" width="400px"></center>

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

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

* コンソール画面が表示されるので、歯車マークをクリックし「 `プロジェクトの設定` 」をクリックします
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/ccbc1d5e-7c19-afbc-ab6a-9f9068ee6a6a.png" width="400px">
* 上部タブの`サービスアカウント`をクリックします
* 下の方にある`新しい秘密鍵の生成`をクリックします
* アラートが表示されるので、確認後`キーを生成`をクリックします
* 秘密鍵（jsonファイル）がダウンロードされます:key2::inbox_tray:

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

####  プッシュ通知の設定
* 右上の「アプリ設定」＞「プッシュ通知」をクリックします
* 「プッシュ通知の許可」＞「<b>`許可する`</b>」を選択して保存してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/9107519c-b9a2-2afa-1511-1fe0a88e64dd.png" width="600px">
* Androidプッシュ通知の設定項目の`プッシュ通知設定ファイルの選択`というボタンをクリックして、先程ダウンロードしたFirebaseの`秘密鍵jsonファイル`をアップロードします:outbox_tray:

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

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

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

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

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

### AndroidXの有効化

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

##  実装と mobile backend APIキーの設定

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

```js
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);
```
:::note info
Applicationキーclientキーの確認方法
ニフクラ mobile backend管理画面の右上「アプリ設定」から確認できます
:::

# ビルド

* 先ほどダウンロードしたgoogle-services.jsonファイルをMonacaにアップロード:outbox_tray:（親フォルダ内に配置）してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/5a566f05-7830-4433-3ba9-276fd63cf2ca.png" width="200px">
 * google-services.jsonはルートディレクトリ(config.xmlなどがある場所)に配置してください。
* ファイル＞保存で保存を行う
* 「ビルド」＞「`Androidアプリのビルド`」を開きます
* `デバッグビルド`が選択されていることを確認して`ビルドを開始する`をクリックします
* 少し待つとビルドが完了するので`QRコード`でインストールします:100:

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/df7754bc-96bb-0cf7-d872-873176068157.png" width="500px">

:::note warn
QRコードでインストールできない場合
左右に表示されているローカルにDLもしくはメールアドレス通知でトライ！
:::

# 動作確認とプッシュ通知配信！

* アプリを起動させます
* 起動すると「レジスタレーションID」が取得され、端末情報が mobile backend に保存されます
* ニフクラ mobile backend の管理画面から「データストア」＞「installation」クラスを開いて確認します
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/4364f559-999d-b251-5018-eb20b774e4f0.png" width="600px">

### プッシュ通知配信

* ニフクラ mobile backendの管理画面よりプッシュ通知＞`+新しいプッシュ通知`をクリック
* 「メッセージ」の入力、「Android端末に配信する」へのチェックを入れます
* 「1端末に向けて送信されます」と表記されれば準備OKです
* 「プッシュ通知を作成する」をクリックしてプッシュ通知を配信します

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/dcb83cbf-7633-169d-dc1c-57c222f66459.png" width="600px">

* 少し待つと端末側にプッシュ通知が届きます:tada::confetti_ball::calling:

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/b253c76b-4a98-94f5-2441-ab5a7c1a55c3.png" width="600px">

# 終わりに

ブログの通りに実装するとプッシュ通知が実装され、端末に配信されると思います:hugging:
ニフクラ mobile backendの管理画面でエラーを確認できますので、エラーが発生した際は<a href="https://mbaas.nifcloud.com/doc/current/rest/common/error.html">エラーコード一覧</a>をご参照ください:warning:

###### 参考eBook
* プッシュ通知ビギナーズガイド
 * https://inquiry.nifcloud.com/webeq/pub/mbaas/push-beginners-guide