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) }) }, }