mBaaSのデータストアを使ってみる

MonacaでニフティmBaaSのデータストアを使ってみます。

プロジェクトの作成

Monacaにログインして、「新規プロジェクトの作成」を選択します。

今回はサンプルアプリを選択します。

一覧の中から「Nifty mBaaS Blank」を選択します。

プロジェクト名を入力して「プロジェクトを作成する」をクリックします。

プロジェクトの作成が完了しました。

データストアへの登録

index.htmlのbody内に入力エリアとボタンを追加します。

HTML

<input type="text" name="add" id="add">
<button onClick="addData();">追加</button>

head内に空のscriptタグがありますので、その中にデータストアへ登録するJavaScriptを記述します。

JavaScript

var APIKEY = 'アプリケーションキー';
var CLIENTKEY = 'クライアントキー';

// データストアを使う準備
var ncmb = new NCMB(APIKEY, CLIENTKEY);
var TestData = ncmb.DataStore('TestData');

function addData() {
	var addText = document.getElementById('add').value;
	if(addText != '') {
		var testData = new TestData();
		testData.set('dataName', addText)
		.save()
		.then(function(data) {
			// 保存後の処理
			alert('保存しました。');
		 })
		 .catch(function(err) {
			// エラー処理
			alert('保存に失敗しました。');
		 });
	}
}

管理画面上でデータが登録できていることが確認できました。

set(‘フィールド名’, ‘登録内容’)で登録したい内容をセットして、save()でデータストアへ登録します。
登録後に成功・失敗毎で何か処理を行いたい場合、then()とcatch()で行えます。
　

データストアからの取得

先ほどの登録するサンプルにコードを追加して、データストアから値を取得してみます。

HTML

取得ボタンをクリックしたときに、console.logで取得データを表示するようにしてみます。

<input type="text" name="add" id="add">
<button onClick="addData();">追加</button>
<button onClick="getData();">取得</button>

JavaScript

var APIKEY = 'アプリケーションキー';
var CLIENTKEY = 'クライアントキー';

// データストアを使う準備
var ncmb = new NCMB(APIKEY, CLIENTKEY);
var TestData = ncmb.DataStore('TestData');

function addData() {
	var addText = document.getElementById('add').value;
	if(addText != '') {
		var testData = new TestData();
		testData.set('dataName', addText)
		.save()
		.then(function(data) {
			// 保存後の処理
			alert('保存しました。');
		 })
		 .catch(function(err) {
			// エラー処理
			alert('保存に失敗しました。');
		 });
	}
}

function getData() {
	TestData.fetchAll()
	.then(function(results){
		console.log(results);
	})
	.catch(function(err){
		alert('取得に失敗しました');
	});
}

fetchAll()は指定したデータストアから全てのデータを取得するもので、今回の場合はTestDataのデータストアから全てのデータを取得してきます。
実際にMonacaデバッカーで試してみると、Monaca開発環境のconsoleに取得内容が表示されます。
　

データストアの上書き

先ほど登録したデータをアプリ上から上書きしてみます。

HTML

更新ボタンをクリックすると、入力内容でデータを上書きするようにしてみます。

<input type="text" name="add" id="add">
<button onClick="addData();">追加</button>
<button onClick="getData();">取得</button>
<button onClick="updateData();">更新</button>

JavaScript

var APIKEY = 'アプリケーションキー';
var CLIENTKEY = 'クライアントキー';

// データストアを使う準備
var ncmb = new NCMB(APIKEY, CLIENTKEY);
var TestData = ncmb.DataStore('TestData');

function addData() {
	var addText = document.getElementById('add').value;
	if(addText != '') {
		var testData = new TestData();
		testData.set('dataName', addText)
		.save()
		.then(function(data) {
			// 保存後の処理
			alert('保存しました。');
		 })
		 .catch(function(err) {
			// エラー処理
			alert('保存に失敗しました。');
		 });
	}
}

function getData() {
	TestData.fetchAll()
	.then(function(results){
		console.log(results);
	})
	.catch(function(err){
		alert('取得に失敗しました');
	});
}

function updateData() {
	var addText = document.getElementById('add').value;
	if(addText != '') {
		TestData.equalTo('objectId', 'B921Nyu7K29wwWA6').fetch().then(function(results) {
			results.set('dataName', addText).update();
		});
	}
}

先ほどのデータの取得はfetchAll()を使いましたが、今回はequalTo(‘フィールド名’, ‘内容’)で取得したいレコードを指定してからfetch()で取得しています。
取得した値に対してset(‘フィールド名’, ‘登録内容’)で上書きする内容をセットしてupdate()で上書きを行います。

equalTo()でobjectIdを指定していますが、これはレコード毎に自動で与えられるユニークなIDで、今回の場合は特定のレコードを上書きしたかったので’B921Nyu7K29wwWA6’と固定で指定しています。
　

【参考サイト】

• データストア (Monaca) : 基本的な使い方 | ニフティクラウド mobile backend