Monacaで作成したOnsen UI + Vueプロジェクトからニフクラmobile backendのデータストア機能を使ってみました。
NCMBライブラリのインストールのしかたや注意点については、以下の記事で解説されています。
MonacaのVueプロジェクトでNCMBを利用する際の注意点
この記事に従い以下の2点を実施します。
- webpack.config.js のJSON設定を削除
- Vue向けのNCMB インストール
ちなみに、Vue向けのNCMBは v2.2.1 をベースにしているようですが、本家のNCMBは現時点で v3.0.2 になっています。Vue向けのNCMBの利用時は変更履歴を一読しておくといいと思います。
次に、ニフクラのドメイン変更に対応する必要があります。lib/ncmb.jsの2か所を書き換えます。
変更前
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)
})
},
}