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