手順

ニフティクラウド mobile backend への登録
SDKのダウンロード
コード作成
mobile backendとの連携
動作確認

1. ニフティクラウド mobile backend への登録

下記サイト右上の「無料登録」から登録します。
http://mb.cloud.nifty.com/

2. SDKのダウンロード

フロントエンド用のjsファイル生成に npm コマンドが必須になるので、nodeが入っていない場合は事前にインストールしておいてください。→ https://nodejs.org/

方法１. npmからインストール

下記のコマンドを実行すると、モジュールのインストール及びフロント用のjsファイル(ncmb.min.js)の自動生成が完了します。

$npm install ncmb -S

方法２. GitHubからCloneする

GitHubのリポジトリからCloneしてきます。
https://github.com/NIFTYCloud-mbaas/ncmb_js

こちらの方法の場合、フロント用のファイルは自動生成されないので、以下のコマンドを実行する必要があります。

$npm install

方法１はコマンド一つで実行できる反面、バージョン単位での更新になるので最新のバグフィックスなどが反映されていない場合があります。
方法２は一手間増えますが、常に最新のmergeが適用された状態で使えます。

3. コード作成

htmlファイルを作成し、以下のコードを貼り付けます。
また、htmlファイルと同じディレクトリにjsフォルダを作成し、その中にncmb.min.jsを入れます。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JavaScript SDK クイックスタート（ブラウザ版）</title>
</head>
<!-- 1.SDKの読み込み -->
<script type="text/javascript" src="js/ncmb.min.js" charset="utf-8"></script>
<body>
<script>
  // 2. mobile backendアプリとの連携
  var ncmb = new NCMB("YOUR_APPLICATIONKEY","YOUR_CLIENTKEY");

  // TestClassの作成
  var TestClass = ncmb.DataStore("TestClass");
  // 3.TestClassへの入出力
  TestClass.equalTo("message", "Hello, NCMB!")
           .fetchAll()
           .then(function(results){
             if(results[0] != null){
               alert(results[0].get("message"));
             }else{
               var testClass = new TestClass();
               testClass.set("message", "Hello, NCMB!");
               testClass.save()
                        .then(function(){
                          alert("message is saved.");
                        })
                        .catch(function(err){
                          alert(err.text);
                        });
             }
           })
           .catch(function(err){
            alert(err.text);
           });
</script>
</body>
</html>

4. mobile backendとの連携

mobile backendにログインし、アプリの新規作成を行います。
アプリ名はなんでも構いません。
アプリの作成が完了するとアプリケーションキーとクライアントキーが表示されるので、それぞれをコピーして、先ほどのコードのYOUR_APPLICATIONKEYとYOUR_CLIENTKEYに貼り付けます。

5. 動作確認

htmlファイルを実行します。
データが何も保存されていなければ"message is saved."のアラートが表示されます。そしてmobile backendのダッシュボードを開くと、データストアにTestClassが生成され、messageに"Hello, NCMB!"が入ったレコードが保存されていることが確認できます。
その状態で再度HTMLファイルを実行すると、今度は"Hello, NCMB!"のアラートが表示されます。

今回は以上です。

mobile backend JSSDK 2.0-pre でクイックスタート（ブラウザ編）

手順