プッシュ通知は従来のマーケティング手法で言えばメールマーケティングに相当します。つまり一度配信してしまうと、後から取り消すのが難しい拡散方法ということです。そのため企業によっては一旦承認フローを経てからプッシュ通知を送りたいという要望も聞かれます。
そこで独自のプッシュ通知管理画面を作成して、承認フローを経るようにしてみたいと思います。作成していく過程をステップを踏んで説明していきますので、自社のフローに合わせてカスタマイズしてみてください。
今回は設定画面の処理について紹介します。
実際の処理について
前回書いた通り、このアプリケーションはUIが構造化されています。
NCMBのオブジェクトはプロジェクトで共通なので、Appオブジェクト(Webアプリケーションのルート)に紐付いています。つまり、次のような処理が必要になります。
- 設定画面で表示するためにNCMBオブジェクトを伝搬する
- 設定画面での変更をAppオブジェクトまで伝える
初期設定について
今回、アプリケーションキーとクライアントキーはHTML5のlocalStorageに保存します。こうすることで各担当者ごとに任意のキーを使えますし、HTML中にキーを記述することなく利用できます。
そして、初期表示においてアプリケーションキーとクライアントキーの有無を確認し、NCMBオブジェクトの初期化を処理分けします。
const NCMB = require('ncmb'); let ncmb = null; const application_key = localStorage.getItem('application_key'); const client_key = localStorage.getItem('client_key'); if (application_key && client_key) { ncmb = new NCMB(application_key, client_key) }
こうすることで ncmb が最初はnullの状態になります。
設定画面へ伝搬させる
まずAppで描画する際にncmbを子コンポーネント(mainContent)へ伝えます。router-viewというのはVueRouterを使った際、コンテンツを表示する先になります。 :ncmb
=ncmb
と指定することで子コンポーネントにはncmb(左側)という名前でncmb(右側)の内容が伝わるようになります。
<router-view :ncmb="ncmb"></router-view>
そして子コンポーネントではpropsを使って受け入れる変数を指定します。これでmainContentでもthis.ncmbで使えるようになります。
module.exports = { props: ['ncmb'], : }
ただし実際にncmbを設定するのはさらに子コンポーネント(content)になります。そこで先ほどと同じようにHTML側を記述します。
<router-view :ncmb="ncmb"></router-view>
これでさらに子コンポーネントまで伝わるようになったので、子コンポーネントでもpropsを使って受け入れます。
module.exports = { props: ['ncmb'], : }
設定画面での表示設定
次に設定画面でアプリケーションキーとクライアントキーを表示できるようにします。これにはまず、コンポーネントのdataを変更します。
module.exports = { data: function() { let data = {application_key: null, client_key: null}; if (this.ncmb) { data.application_key = this.ncmb.apikey; data.client_key = this.ncmb.clientkey; } return data; }, props: ['ncmb'], }
ここで行っているのはthis.ncmbが初期化されていればアプリケーションキーとクライアントキーを取得します。そうでない場合はどちらもnullを指定します。
後はHTML側で表示設定をします。
<input type="text" class="size-l" v-model="application_key"> : <input type="text" class="size-l" v-model="client_key">
このようにv-modelで指定することで、this.application_key / this.client_key でアクセスできるようになります。
データの保存
入力されたアプリケーションキーとクライアントキーは保存ボタンを押してlocalStorageに保存します。この際、まずコンポーネント内で次のように受け取ります。
module.exports = { : methods: { saveKeys: function(e) { if (this.application_key && this.client_key) { this.$emit('updateKeys', this.application_key, this.client_key); } } } }
注意点としては、ここではlocalStorageに保存するのではなく、親コンポーネントを呼び出すだけということです。
そしてそのイベントを受け取るために親コンポーネントでは次のようにイベントの購読を指定します。
<router-view :ncmb="ncmb" v-on:updateKeys="updateKeys"></router-view>
こうすることで updateKeys というイベントを受け取れるようになります。この親コンポーネントはただ素通りするだけです。
module.exports = { : methods: { updateKeys: function(application_key, client_key) { this.$emit('updateKeys', application_key, client_key); } }, }
最後にAppへ渡り、ここではじめてデータを保存します。
export default { : methods: { updateKeys: function(application_key, client_key) { this.ncmb = new NCMB(application_key, client_key); let me = this; let Test = this.ncmb.DataStore('test'); setTimeout(() => { me.error = null; }, 3000); Test.fetch() .then(data => { // 成功 localStorage.setItem('application_key', application_key); localStorage.setItem('client_key', client_key); }) .catch(err => { // エラー me.error = err; }) } } }
ここで行っているのはncmbへ実際アクセスしてみて、結果が取得できる(アプリケーションキーとクライアントキーが有効である)かどうか判定しています。問題なければlocalStorageへ保存しています。
このような手順を踏むことで各コンポーネントでのデータの伝達、イベントの通知ができるようになります。Vue2を使うことで分かりやすく、メンテナンスしやすいWebアプリケーションが作れるようになるでしょう。
ソースコードはNCMBMania/pushManagerにアップロードされています。実装時の参考にしてください。
次回は設定画面のデータメンテナンスを行う機能を作っていきたいと思います。