ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

mBaaSで作る業務システム「日報システム」(その5:プッシュ通知)

f:id:mbaasdevrel:20171221194736p:plain

mBaaSはスマートフォンアプリを作るのに最適です。そしてスマートフォンアプリは個人が楽しむゲームやチャットなどだけでなく、業務用途でも広がりを見せています。そこでmBaaSも業務システムを作るために使ってみましょう。

何回かに分けて、日報システムを作ってみます。他の業務システムへも応用はさほど難しくないでしょう。今回は前回のコメント機能に続いて、イベントがあった時にプッシュ通知を送る仕組みを作ります。

今回のゴール

今回は以下のイベント時にプッシュ通知が送られるようにします。

  • 新しい日報の投稿
    プッシュ通知が部署に所属している人全員に送られる
  • 新しいコメントの投稿
    日報を書いた人に送られる

プッシュ通知を送るためのデバイストークンを取得する

今回はMonacaを使っていますので、プラグインは簡単にインストールできます。Cordovaプラグインの管理にてニフクラ mobile backendを選ぶだけです。

f:id:mbaasdevrel:20171221194736p:plain

そしてデバイストークンは次のようなコードで取得できます。この時点でデバイストークンの取得とmBaaSへの保存が完了しています。

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
const senderId = '';
const ncmb = new NCMB(applicationKey, clientKey);

const event = window.cordova ? 'deviceready' : 'DOMContentLoaded';
document.addEventListener(event, () => {
  if (window.cordova) {
    NCMB.monaca.setDeviceToken(
      applicationKey,
      clientKey,
      senderId,
      () => {
      },
      (err) => {
        alert(JSON.stringify(err));
      }
    );
    NCMB.monaca.setReceiptStatus(true);
  }
  :
});

配信先を設定する

このままでは部署の設定がありませんので、登録されたデバイストークンのデータを取得します。方法はまず objectId を以下のコードで取得します。データ登録は非同期処理なので、取得できるまで繰り返し行う必要があります。

const id = setInterval(() => {
  NCMB.monaca.getInstallationId((objectId) => {
  });
}, 5000);

取得できたら、それを使って Installation クラスのインスタンスにobjectIdをセットします。そしてユーザの名前(userName)と部署名(app.roleName)を登録します。

const updateInstallation = () => {
  if (!window.cordova) {
    return true;
  }
  const id = setInterval(() => {
    const user = ncmb.User.getCurrentUser();
    if (!user) {
      return true;
    }
    if (user.updated) {
      clearInterval(id);
      return true;
    }
    NCMB.monaca.getInstallationId((objectId) => {
      clearInterval(id);
      const user = ncmb.User.getCurrentUser();
      const installation = new ncmb.Installation;
      installation.objectId = objectId;
      installation
        .set('userName', user.userName)
        .set('role', app.roleName)
        .update()
        .then(() => {
          return user
            .set('updated', true)
            .update();
        })
        .then(() => {
          alert('更新しました');
        })
        .catch((err) => {
          alert(JSON.stringify(err));
        })
    });
  }, 5000);
};
updateInstallation();

これで準備完了です。

イベントの追加(日報登録)

日報を登録した後の処理にプッシュ通知送信を追加します。これは先ほど登録した role フィールドに自分の所属する部署名 が入っている端末が対象になります。また、自分自身は除外します( $ne で指定します)。

const push = new ncmb.Push();
const user = ncmb.User.getCurrentUser();
return push
  .set('searchCondition', {
    role: app.roleName,
    userName: {
      "$ne": user.userName
    }
  })
  .set('target', ['ios', 'android'])
  .set('message', '日報が登録されました')
  .set('immediateDeliveryFlag', true)
  .send();

イベントの追加(コメント登録)

コメントを登録した後の処理にプッシュ通知送信を追加します。これは日報を書いたユーザの userName が入っている端末が対象になります。

// 日報を書いた人にプッシュ通知します
const push = new ncmb.Push();
return push
  .set('searchCondition', {
    userName: report.userName
  })
  .set('target', ['ios', 'android'])
  .set('message', '日報にコメントが付きました')
  .set('immediateDeliveryFlag', true)
  .send();

ここまでの内容で日報システムの完成です。権限管理などの要件がある業務システムであってもmBaaSを使うことで素早く開発できることが分かってもらえたでしょうか。データベースをいちいち用意することもなく、さらにプッシュ通知も簡単に実装できます。

ぜひ皆さんの業務で利用するシステムもmBaaSを使ってスマートフォンアプリ化してください。

中津川 篤司

中津川 篤司

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