プッシュ通知は従来のマーケティング手法で言えばメールマーケティングに相当します。つまり一度配信してしまうと、後から取り消すのが難しい拡散方法ということです。そのため企業によっては一旦承認フローを経てからプッシュ通知を送りたいという要望も聞かれます。
そこで独自のプッシュ通知管理画面を作成して、承認フローを経るようにしてみたいと思います。作成していく過程をステップを踏んで説明していきますので、自社のフローに合わせてカスタマイズしてみてください。
今回はテスト配信用のデバイストークンメンテナンス機能の処理について紹介します。
実際の処理について
この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にアップロードされています。実装時の参考にしてください。