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

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

プッシュ通知を承認制にする【デバイストークン設定画面を作る】

プッシュ通知は従来のマーケティング手法で言えばメールマーケティングに相当します。つまり一度配信してしまうと、後から取り消すのが難しい拡散方法ということです。そのため企業によっては一旦承認フローを経てからプッシュ通知を送りたいという要望も聞かれます。

そこで独自のプッシュ通知管理画面を作成して、承認フローを経るようにしてみたいと思います。作成していく過程をステップを踏んで説明していきますので、自社のフローに合わせてカスタマイズしてみてください。

今回はテスト配信用のデバイストークンメンテナンス機能の処理について紹介します。

実際の処理について

このWebアプリケーションはVue.jsで構築されています。機能はコンポーネント化されています。今回はテスト配信用のデバイストークンメンテナンス機能を作りますので、モーダル表示を行います。

モーダル表示について

モーダル表示を行う際には、Contents Management System - ニフティクラウドmobile backendのモーダル表示をベースにします。このHTMLをベースにして、config_installation.vueというファイルのtemplateタグを作成します。

このHTMLはbodyタグの直下に生成されるのを前提としています。そこで、config_form.vueの承認者の管理ボタンを押した時に、Appの処理を呼び出すようにします。

module.exports = {
    :
  methods: {
    :
    showManagerModal: function(e) {
      this.$emit('showModal', 'configManager');
    }
  }
}

もちろんAppやmain_content.vueではイベントを購読しておきます。

<router-view :ncmb="ncmb" v-on:updateKeys="updateKeys" v-on:showModal="showModal"></router-view>

モーダル表示は複数パターンが考えられますので、前回の承認者設定用モーダルの方法を踏襲してモーダルの種類(今回はinstallationManager)を指定できるようにしておきます。

export default {
  name: 'app',
  data: function() {
    return {
      ncmb: ncmb,
      error: null,
      success: null,
      modal: null // 追加
    };
  },
    :
  methods: {
      :
    showModal: function(modal) {
      this.modal = modal;
    },
    closeModal: function() {
      this.modal = null;
    },
  },
  :
}

このように this.modal に文字列を入れるようにします。閉じる場合は this.modal = null にするだけです。

Appのテンプレート側では次のように記述します。modalがinstallationManagerの時だけ表示します。

<template>
  <div>
    <installation-installation
      id="installation-installation"
      :ncmb="ncmb"
      v-on:errorMessage="errorMessage"
      v-on:successMessage="successMessage"
      v-on:closeModal="closeModal"
      v-if="modal == 'installationManager'" 
    />
      :
  </div>
</template>

これでボタンを押した際にモーダルが表示されます。

モーダルを閉じる

次にモーダルを閉じる機能を実装します。これはAppにあるcloseModalを this.$emit で呼び出すだけです。なお、クリックだけでなくESCキーでも閉じられるようにしています。

module.exports = {
    :
  methods: {
    cancel: function(e) {
      if (typeof e == 'undefined' || e.type == 'click' || (e.type == 'keyup' && e.keyCode == 27)) {
        
      }else{
        return true;
      }
      this.$emit('closeModal');
    }
  }
}

データを読み出す

まず最初にデータストアからInstallationを読み込む部分を作ります。最初はデータはありませんが、その方がデータ登録後の処理が分かりやすくなります。これはDOMを生成した後の created イベントに対して作成します。

検索条件として、 testerカラムがtrueであるものだけを対象としています。また、一覧の更新は他のメソッドからも使いますので、別メソッド化しておきます。order(並び順)カラムを使って並び順を指定します。データはそのまま this.installations の中に保存します。

updateList: function() {
  let me = this;
  let Installation = this.ncmb.Installation;
  Installation
    .where({'tester': true})
    .fetchAll()
    .then(results => {
      me.installations = results;
    })
    .catch(err => {
      me.$emit('errorMessage', "データの取得に失敗しました")
    })
},

テスト用デバイストークンを追加する

JavaScript SDKにはInstallationを追加する機能はありません。また、適当なデバイストークンを入力したとしても届く訳ではありません。そこで、アプリを使ってあらかじめ登録されているInstallationクラスのデータを使います。

まずボタンを押した時には単に this.installations にInstallationのインスタンスを追加するだけです。

addInstallation: function() {
  let Installation = this.ncmb.Installation;
  let installation = new Installation;
  this.installations.push(installation);
},

そして入力画面ではInstallationクラスのobjectIdを入力します。これは管理画面から選びます。

デバイストークンを更新する

すでに存在するデバイストークンを対象としていますので、データはすべて更新処理になります。常にtesterカラムはtrueになります。複数のデータを一度に保存するので、Promise.allを使って並行処理で実行します。

save: function(e) {
  let me = this;
  let promises = [];
  console.log(this.installations);
  for (let i = 0; i < this.installations.length; i++) {
    let installation = this.installations[i];
    promises.push(installation.set('tester', true).update());
  }
  
  Promise.all(promises)
    .then(results => {
      me.$emit('successMessage', "テスト端末を登録しました");
      me.cancel()
    }, err => {
      me.$emit('errorMessage', "データの保存に失敗しました");
    })
},

チェックボックスをすべて付ける

モーダル上部にあるチェックボックスを有効にすると一覧のデータすべてのチェックボックスが有効になります。これは this.installations にある各データの checked を trueにすればOKです。

checkAll: function(e) {
  let installations = [];
  for (let i = 0; i < this.installations.length; i++) {
    let installation = this.installations[i];
    installation.checked = e.target.checked;
    installations.push(installation);
  }
  this.installations = installations;
},

HTML側は次のようになります。

<input type="checkbox" v-model="installation.checked">

データを削除する

データを削除する場合、物理削除してしまうとプッシュ通知が受け取れなくなります。そこで、testerカラムや説明を空文字にしてテスト配信対象外とします。なお、objectIdを入力していない場合も考えられますので、その場合は単に this.installations から排除するだけとしています。

deleteInstallation: function() {
  let promises = [];
  let me = this;
  for (let i = 0; i < this.installations.length; i++) {
    let installation = this.installations[i];
    if (installation.checked) {
      if (!installation.objectId) {
        delete this.installations[i];
      }else{
        promises.push(
          installation
            .set('tester', null)
            .set('description', null)
            .update()
        );
      }
    }
  }
  Promise.all(promises)
    .then(results => {
      me.updateList();
    }, err => {
      me.$emit('errorMessage', "データの削除に失敗しました");
    })
},

ここまでの処理でデバイストークンをテスト配信の対象にしたり、解除できるようになります。InstallationクラスはJavaScript SDKから作成ができなかったり、物理削除してはいけないといった制約があります。ご注意ください。

プッシュ管理のコードはNCMBMania/pushManager at v0.3にアップロードされています。実装時の参考にしてください。