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

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

プッシュ通知を承認制にする【アプリケーションキーとクライアントキーを保存する】

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

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

今回は設定画面の処理について紹介します。

実際の処理について

前回書いた通り、このアプリケーションは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にアップロードされています。実装時の参考にしてください。

次回は設定画面のデータメンテナンスを行う機能を作っていきたいと思います。