Onsen UI + Vueでニフクラmobile backendを使ってみました

Monacaで作成したOnsen UI + Vueプロジェクトからニフクラmobile backendのデータストア機能を使ってみました。

NCMBライブラリのインストールのしかたや注意点については、以下の記事で解説されています。

MonacaのVueプロジェクトでNCMBを利用する際の注意点

この記事に従い以下の２点を実施します。

• webpack.config.js のJSON設定を削除
• Vue向けのNCMB インストール

ちなみに、Vue向けのNCMBは v2.2.1 をベースにしているようですが、本家のNCMBは現時点で v3.0.2 になっています。Vue向けのNCMBの利用時は変更履歴を一読しておくといいと思います。

次に、ニフクラのドメイン変更に対応する必要があります。lib/ncmb.jsの２か所を書き換えます。

変更前

this.fqdn             = config.fqdn || "mb.api.cloud.nifty.com";
this.scriptFqdn       = config.scriptFqdn || "script.mb.api.cloud.nifty.com";

変更後

this.fqdn             = config.fqdn || "mbaas.api.nifcloud.com";
this.scriptFqdn       = config.scriptFqdn || "script.mbaas.api.nifcloud.com";

以上で、ニフクラmobile backendが利用可能になります。最後にデータストア機能を利用する場合の一例を示します。

const NCMB = require('ncmb')
const store = {
  param: {
    ncmb: null,
  },
  initBackend () {
    const applicationKey = "0123456789 ..."
    const clientKey = "0123456789 ..."
    this.param.ncmb = new NCMB(applicationKey, clientKey)
  },
  saveBackend () {
    if (!this.param.ncmb) {
      console.log("ニフクラ初期化エラー")
      return
    }
    var MdtRecords = this.param.ncmb.DataStore("MdtRecords")
    var mdtrecords = new MdtRecords()
    var dateObj = {
      y: this.param.recordData.date.y,
      m: this.param.recordData.date.m,
      d: this.param.recordData.date.d,
      w: this.param.recordData.date.w,
      t: this.param.recordData.total
    }
    mdtrecords.set("dateObj", dateObj)
      .save()
      .then(mdtrecords => {
        this.param.backendLoad = true
      })
      .catch(function(err) {
        console.log("保存に失敗しました。エラー: " + err)
      })
  },
  loadBackend (callback) {
    if (!this.param.ncmb) {
      console.log("ニフクラ初期化エラー")
      callback(null)
      return
    }
    var MdtRecords = this.param.ncmb.DataStore("MdtRecords")
    MdtRecords.order("createDate", true)
      .limit(10)
      .fetchAll()
      .then(results => {
        this.param.backendLoad = false
        this.param.backendData = results
        callback(results)
      })
      .catch(function(error) {
        callback(null)
      })
  },
}