Onsen UI × Vue × mBaaSでカンファレンスアプリを作る（その4）

前回に続いてカンファレンスアプリを作っていくチュートリアルです。アプリができあがった暁には実際にリリースしますのでお楽しみに！

今回はアプリと言えばプッシュ通知、ということでプッシュ通知を組み込んでみます。

Monaca × NCMBのプッシュ通知はとても簡単

MonacaアプリにNCMBのプッシュ通知を組み込むのはとても簡単です。管理画面でCordovaプラグインとして組み込みます。これは無料ユーザでも利用できます。

実装について

アプリを起動した時にいきなりプッシュ通知を許可して欲しいというダイアログが出ても、誰も許可してくれないでしょう。カンファレンスアプリとして参考にしたApple製のWWDCアプリでは、アプリの説明画面にボタンが配置されていました。

このボタンを押すとはじめてプッシュ通知の確認が出るという仕組みです。ユーザにとって納得感のあるUXとなっています。

今回はこの実装を真似しています。

ボタンを押してプッシュ通知のダイアログを出すのはとても簡単です。アプリからはなるべくNCMBを直接触らず、ラッピングしたクラスを介して操作するようになっています。こうすることでデータ操作部分をまとめて管理できるようになります。

getToken() {
  this.ncmb
    .getToken()
    .then(() => {
      // Change status
    }, err => {
      alert(err);
    })
}

getTokenは以下のように window.NCMB.monaca.setDeviceToken を実行しています。これだけでデバイストークンをNCMBに登録してくれます。

getToken() {
  return new Promise((res, rej) => {
    window.NCMB.monaca.setDeviceToken(
      config.applicationKey,
      config.clientKey,
      config.senderId,
      success => res(),
      err => rej(err)
    )
  });
}

ステータスを確認する

次に問題なのは通知の状態を確認する方法です。多くのアプリでは通知をオフにする方法が明確になっていません。その結果、通知が多いとアプリを削除されてしまいます。WWDCアプリでは通知を受け取る設定になっていると、設定画面の通知設定に飛べるようになります。

このためには cordova-plugin-push-notifications-status というプラグインを使います。このプラグインを使うとプッシュ通知設定のステータスが取れます。

PushNotificationsStatus.getStatus(status => {
  // status が authorizedであれば許可済み
  // status が denied であれば拒否
})

このようにすることでプッシュ通知が許可されているかどうか分かるようになります。以下は試しにステータスをアラートしたところです。

まとめ

プッシュ通知はユーザのアクティビティを上げる大事な施策ですが、あまり連発したりするとアプリの削除につながってしまう可能性があります。ユーザ自身、多数の通知を受け取っており、ムダに受信したいとは思わなくなっています。そのため、あまり押しつけるようなことはせず、ユーザが登録したくなるような利便性とさりげなさが大事ではないでしょうか。

このアプリのコードはgoofmint/DevRelConAppにアップロードしてあります。実装時の参考にしてください。

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。