Monaca × ニフティクラウド mobile backendによるWeb技術でのスマホアプリ開発（Todoアプリ編）

MonacaというのはHTML5/JavaScriptを使ってiOS/Androidアプリを開発できるサービスです。これまで慣れ親しんできたWeb技術を使ってネイティブアプリが開発できます。

しかし、これまでサーバサイドありきで開発してきたWebシステムだけに、スマートフォンアプリになると多少勝手が違います。特にデータの保存先が大きな違いで、サーバサイドがあった方がこれまでと同じように開発ができるでしょう。

もちろん自分でサーバサイドを開発しても良いですが、アプリもサーバも作るとなると時間も工数もかかってしまいます。そこで使ってみて欲しいのがニフティクラウド mobile backendです。Monacaとニフティクラウド mobile backendはシームレスに連携しており、すぐに連携アプリが開発できます。

前回はMonacaで使えるニフティクラウド mobile backend連携アプリを一通り紹介してきましたが、今回はさらに掘り下げて一つ一つの機能を見ていきます。まず最初はTodoアプリです。

Monacaとニフティクラウド mobile backendはシームレスに連携しており、すぐに連携アプリが開発できます。

ニフティクラウド mobile backendの設定

まず最初にすべきこととして、ニフティクラウド mobile backendのアプリケーションキーおよびクライアントキーをMonaca IDEに登録します。編集するファイルは www/js/base.js です。

window.APP_KEY = "your_application_key";
window.CLIENT_KEY = "your_client_key";

どちらもニフティクラウド mobile backendの管理コンソールで確認して入力してください。

これで準備は完了です。では使い方を見ていきましょう。

初期化

先ほど適用したアプリケーションキー、クライアントキーでニフティクラウド mobile backendのオブジェクトを初期化しています。

NCMB.initialize(APP_KEY, CLIENT_KEY);

これで利用準備が整ったことになります。

Todoアプリの内容を見る

Todoアプリは www/js/todo.js を見ると処理内容が全て分かります。

まず最初にデータストアを呼び出しています。

var TODO = NCMB.Object.extend('TODO');

これは任意の名前が使えて、管理画面で設定する必要もありません。

データを取得する

次にrefreshという処理を見てみます。これはニフティクラウド mobile backendへアクセスしてデータストアからデータを引き出す処理になります。

refresh : function() {
  showSpinner();
  var query = new NCMB.Query(TODO);
  query.find({
    success : function(results) {
      TODOListController.render(results);
    },
    error : function(error) {
      console.log(JSON.stringify(arguments));
    }
  }); 
},

showSpinner() は処理中のスピナーを表示する処理です。TODOに対する NCMB.Query を呼び出して、後はfindを実行しています。それだけでクラウド上にあるデータを取り出せます。とても簡単ですね。

タスクを追加する

次にタスクを追加する処理についてです。

add : function() {
  var todo = prompt('TODOを追加');
  if (typeof todo === 'string' && todo.length > 0) {
    // TODOを保存
    new TODO().save({
      todo : todo
    }, {
      success : function() {
        alert("TODO追加できました");
        TODOListController.refresh();
      }, 
      error : function() {
        alert("エラーがおきました:");
      }
    });
   }
},

肝心なのは、

new TODO().save({
  todo : todo
}, {
  success : function() {
    alert("TODO追加できました");
    TODOListController.refresh();
  }, 
  error : function() {
    alert("エラーがおきました:");
  }
});

の部分です。Todoを新しく作成して、saveを実行するだけでデータがニフティクラウド mobile backendに保存される仕組みです。保存処理が正しく行われれば、successにコールバックされます。後は適時refreshメソッドを呼び出すことで、データを再度ニフティクラウド mobile backendから取得し直して、再描画しています。