Monacaのサンプルアプリである「フォトシェアアプリデザインテンプレート」にバックエンド機能をニフクラ mobile backendで実装する連載も、今回でついに最終回です。ラストとなる今回は、プッシュ通知の仕組みを作ります。

その1：認証編
その2：プロフィール編集
その3：写真アップロード
その4：写真検索
その5：いいね/コメント
その6：フォロー/フォロワー

プッシュ通知について

アプリのアクティブ率を高めたり、ユーザコミュニケーションを促進する上でプッシュ通知は欠かせません。Monacaアプリにプッシュ通知を実装する際にはニフクラ mobile backendを使うと簡単に実装できます。

Monacaでプッシュ通知を利用するには、ニフクラ mobile backendのプラグイン（執筆時点の最新バージョンは3.0.1）をインストールします。
今回はMonacaにおけるコードの実装方法のみを紹介しますが、iOS/Androidともに、証明書の設定などの作業が必要です。以下のドキュメントを参考に設定を行ってください。

プッシュ通知（Monaca）－ 基本的な使い方

デバイストークンの取得

まずはデバイストークン（端末を一意に識別するためのID文字列）の登録を行います。
ユーザがログインしていることが確認できたら、window.NCMB.monaca.setDeviceToken() を実行します。
すると、mBaaSのInstallationクラス（端末情報が保管されるクラス）にデバイストークンが登録されます。

document.addEventListener('init', function(event) {
  var page = event.target;
  if (page.id === 'main') {
    loginCheck();
    if (!current_user) {
      // ログインページを表示
      $('#nav')[0].pushPage('register.html', {animation: 'fade'});
    } else {
      // デバイストークンの取得処理
      if (NCMB.monaca) {
        NCMB.monaca.setDeviceToken(
          applicationKey,
          clientKey,
          (result) => {
            console.log(result);
          },
          (err) => alert(JSON.stringify(err))
        );
      }
    }
  }
  // 省略
});

また、ログイン後には NCMB.monaca.getInstallationId() で登録済みの端末情報を取得し、ログインユーザのobjectIdをInstallationクラスのuserObjectIdフィールドに設定して、更新処理を行います。
これでログインユーザとその端末情報とが結びついた状態になります。

let timerId = setInterval(() => {
  NCMB.monaca.getInstallationId(id => {
    if (!id) {
      return;
    }
    ncmb.Installation
      .equalTo('objectId', id)
      .fetch()
      .then((installation) => {
        return installation
          .set('userObjectId', current_user.objectId)
          .update();
      })
      .then(() => {
        timerId = null;
      })
      .catch(err => alert(JSON.stringify(err)))
  });
}, 10000);

コメント追加

コメントがあった時には写真の所有者に対してプッシュ通知を送ります。写真所有者のobjectIdが、InstallationクラスのuserObjectIdフィールドに設定されているという条件で配信先を絞り込みます。
プッシュを送信する際、userSettingValue（ユーザー設定値）にコメントされた写真のobjectIdを指定しておきます。

const push = new ncmb.Push();
return push
  .set("immediateDeliveryFlag", true)
  .set("searchCondition", {"userObjectId": photo.userObjectId})
  .set("message", `You got a new comment from ${current_user.userName} !`)
  .set("userSettingValue", {
    photoObjectId: photo.objectId
  })
  .set("target", ["ios", "android"])
  .send();

受け取った通知に合わせて画面遷移

受信したプッシュ通知からアプリを開いた際に、その写真のページに遷移するようにします。 NCMB.monaca.setHandler()にuserSettingValueで指定した写真のobjectIdが渡されますので、それを使ってPhotoクラスを検索し、表示を行います。

document.addEventListener("deviceready", (event) => {
  NCMB.monaca.setHandler((jsonData) => {
    const Photo = ncmb.DataStore('Photo');
    Photo
      .equalTo('objectId', jsonData.photoObjectId)
      .fetch()
      .then((photo) => {
        $('#nav')[0].pushPage('single.html', {animation: 'slide', data: {photo: photo}});
      });
  });
});

今回の実装で写真共有アプリのバックエンドを一通りニフクラ mobile backendに置き換えました。アプリとしてはまだブラッシュアップすべき部分が残っていますが、これをベースにすることで多機能で優れたUIのSNSが実装できるはずです。ぜひニフクラ mobile backendの使い方のサンプルとしても参考にしてください。

ここまでのソースコードはNCMBMania/photoshareにアップロードしてあります。実装時の参考にしてください。

Monacaデバッガー（カスタムビルドデバッガーを含む）では、プッシュ通知を受信することができません。
プッシュ通知の動作検証をする際は、デバッグビルドを行ってください。