サーバー構築不要!スマートフォンアプリ向けの新クラウド

トップ >ドキュメント >イントロダクション(JavaScript):クイックスタート

イントロダクション(JavaScript)

クイックスタート

クイックスタートについて

このページでは、mobile backendをJavaScriptアプリと連携させる手順を紹介します

アプリの新規作成

ダッシュボード

  • ニフクラ mobile backendにログインします
  • 管理画面が表示されたら、「アプリの新規作成」を行います
    • すでに別のアプリを作成済みの場合は、ヘッダーの「+新しいアプリ」をクリックします

新規アプリケーション作成

  • 「アプリ名」を入力し「新規作成」をクリックすると、APIキー(アプリケーションキーとクライアントキー)が発行されます

APIキー発行

  • APIキーは後ほど初期化コードで使います

SDKのインストール

Node.jsで利用する場合

Nodejs

  • 下記コマンドでnpmインストールします
    • 事前にNode.jsをインストールする必要があります。
$ npm install -S ncmb

Node.js以外で利用する場合

HTML

  • ブラウザで利用するSDKファイルをダウンロードする場合はこちらをご覧ください
    • 上記の方法でダウンロードできるファイルは、npmインストールしたncmb_jsディレクトリ内のncmb.min.jsと同一のものです

SDKの読み込み

Node.jsの場合

Nodejs

  • sample.jsファイルを作成し、以下のコードを書き込みます
// ncmbモジュールの読み込み
var NCMB = require("ncmb");

Node.js以外の場合

HTML

  • index.htmlを作成し、以下のコードを書き込んでください
  • 次に、index.htmlを作成したディレクトリにjsフォルダを作成し、その中にncmb.min.jsを保存します
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript SDK クイックスタート(ブラウザ版)</title>
  </head>
  <!-- SDKの読み込み -->
  <script type="text/javascript" src="js/ncmb.min.js" charset="utf-8"></script>

APIキーの設定とSDKの初期化

Node.jsの場合

Nodejs

  • 以下のコードを追記します
     // mobile backendアプリとの連携
     var ncmb = new NCMB("YOUR_APPLICATION_KEY","YOUR_CLIENT_KEY");

Node.js以外の場合

HTML

  • 以下のコードを追記します
    <script>
      // mobile backendアプリとの連携
      var ncmb = new NCMB("YOUR_APPLICATION_KEY","YOUR_CLIENT_KEY");
    </script>

APIキーの確認と設定

ダッシュボード

  • 上の「YOUR_APPLICATION_KEY」と「YOUR_CLIENT_KEY」は、mBaaSの管理画面で「アプリの新規作成」を行ったときに発行されたAPIキーに置き換えます
    • アプリ作成時のAPIキー発行画面を閉じてしまった場合は、「アプリ設定」>「基本」で確認できます。
    • 「コピー」ボタンを使用してコピーしてください。

APIキー確認

  • これで連携作業は完了です!
  • サンプルコードを書いて実際にmBaaSを使ってみましょう

サンプルコードの実装

  • APIキーの設定とSDK初期化コードの下にサンプルコードを書くと、すぐに動作確認が可能です
var ncmb = new NCMB("YOUR_APPLICATIONKEY","YOUR_CLIENTKEY");
// ↓ ここにサンプルコードを実装 ↓

サンプルコード(データストア)
  • 次のコードはmBaaSのデータストアに保存先の「TestClass」というクラスを作成し、「message」というフィールドへ「Hello, NCMB!」というメッセージ(文字列)を保存するものです
// クラスのTestClassを作成
var TestClass = ncmb.DataStore("TestClass");

// データストアへの登録
var testClass = new TestClass();
testClass.set("message", "Hello, NCMB!");
testClass.save()
         .then(function(){
            // 保存に成功した場合の処理
          })
         .catch(function(err){
            // 保存に失敗した場合の処理
          });

アプリを実行してmBaaSの管理画面を確認する
  • Node.js以外の場合は、ブラウザで実装したコードを実行します
  • Node.jsの場合は、コマンドライン上で作成したsample.jsを実行します
    • 以下のコマンドは、sample.jsがあるディレクトリで実行した場合の例です。
$node sample.js

ダッシュボード

  • アプリが起動されたら、mBaaSの管理画面で「データストア」から、データが保存されていることを確認できます

DBサンプル結果

JavaScriptアプリのチュートリアルについて

  • 他にもさまざまなチュートリアルをご用意しています

  • 5分体験会

    • あっという間にmBaaS(データストア)を体験できます! 興味がある方はこちら

ぜひご活用ください!

お探しの内容が見つからなかった場合はユーザーコミュニティ もご活用ください。(回答保証はいたしかねます)
なお、 Expertプラン以上のお客様はテクニカルサポートにてご質問を承らせて頂きます。

推奨画面サイズ1024×768px以上

ページの先頭へ