MonacaというのはHTML5/JavaScriptを使ってiOS/Androidアプリを開発できるサービスです。これまで慣れ親しんできたWeb技術を使ってネイティブアプリが開発できます。
しかし、これまでサーバサイドありきで開発してきたWebシステムだけに、スマートフォンアプリになると多少勝手が違います。特にデータの保存先が大きな違いで、サーバサイドがあった方がこれまでと同じように開発ができるでしょう。
もちろん自分でサーバサイドを開発しても良いですが、アプリもサーバも作るとなると時間も工数もかかってしまいます。そこで使ってみて欲しいのがニフティクラウド mobile backendです。Monacaとニフティクラウド mobile backendはシームレスに連携しており、すぐに連携アプリが開発できます。
前回はMonacaで使えるニフティクラウド mobile backend連携アプリを一通り紹介してきましたが、今回はさらに掘り下げて一つ一つの機能を見ていきます。まず最初はTodoアプリです。
ニフティクラウド mobile backendの設定
まず最初にすべきこととして、ニフティクラウド mobile backendのアプリケーションキーおよびクライアントキーをMonaca IDEに登録します。編集するファイルは www/js/base.js です。
window.APP_KEY = "your_application_key"; window.CLIENT_KEY = "your_client_key";
これで準備は完了です。では使い方を見ていきましょう。
初期化
先ほど適用したアプリケーションキー、クライアントキーでニフティクラウド mobile backendのオブジェクトを初期化しています。
NCMB.initialize(APP_KEY, CLIENT_KEY);
これで利用準備が整ったことになります。
Todoアプリの内容を見る
Todoアプリは www/js/todo.js を見ると処理内容が全て分かります。
まず最初にデータストアを呼び出しています。
var TODO = NCMB.Object.extend('TODO');
これは任意の名前が使えて、管理画面で設定する必要もありません。
データを取得する
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から取得し直して、再描画しています。
いかがでしょうか。Monacaとニフティクラウド mobile backendを組み合わせれば、こんなにも簡単にネットワークを用いたネイティブアプリが作れてしまいます。サーバサイドのコーディングは一切必要なく、HTMLとJavaScriptの知識だけで開発できます。
次回は画像ギャラリーのデモを通じてファイルアップロードの仕組みを紹介します。