ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

アプリカンとNCMBを組み合わせて使ってみる

アプリカンはHTML5/JavaScriptを使ってスマートフォンアプリを開発するサービスです。Monacaに似ていますが、プラグインの仕組みはなく、開発者はHTML5/JavaScriptだけで開発を行います。

アプリカン | アプリ開発支援プラットフォーム

今回はそんなアプリカンとニフティクラウド mobile backendを組み合わせて使ってみたいと思います。

アプリカンにおける開発の進め方

まずアプリカンのサイトに行き、会員登録またはログインを行います。

ログインするとダッシュボードが表示されるので、新しいプロジェクトを作成します。

プロジェクト名と、対象デバイスを選択します。

作成されるとプロジェクトのページに飛びます。

ベースをダウンロード

プロジェクトのページ下にある各種ライブラリというボタンをクリックします。

このようなウィンドウが開くので、下にあるシンプルをダウンロードします。

解凍すると以下のようなコンテンツが表示されます。

NCMBのインストール

アプリカンは普通のHTML/JavaScriptファイルなので、Bowerを使ってNCMBのライブラリをインストールします。npmを使っても良いでしょう。

bower init
bower install ncmb --save

今回はサンプルとして次のようなコードを書きます。YOUR_APPLICATION_KEY/YOUR_CLIENT_KEYはそれぞれ書き換えてください。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0, user-scalable=no">
<title>Sample</title>
<script type="text/javascript" charset="utf-8" src="js/applican.js"></script>
<script src="bower_components/ncmb/ncmb.min.js"></script>
</head>

<body>

SAMPLE

<script>
  function onDeviceReady() {
    var application_key = "YOUR_APPLICATION_KEY";
    var client_key      = "YOUR_CLIENT_KEY";
    var ncmb = new NCMB(application_key, client_key);
    var Item = ncmb.DataStore("Item");
    var item = new Item;
    item.set("message", "Hello Applican");
    item.save()
      .then(function() {
        alert("保存しました");
      })
      .error(function(err) {
        alert("エラーです。" + err);
      })
  }
  document.addEventListener('deviceready', onDeviceReady, false);
</script>
</body>
</html>

コンテンツのアップロード

コードが書き終わったらアプリカンにアップロードします。まず、webというフォルダを圧縮して、web.zipという名前にします。次にプロジェクトページのメニューにある、アップロードを選択します。そしてweb.zipをアップロードします。

アップロードが完了したら、公開ボタンを押します。

公開設定は通常公開になります。

アプリカンシミュレータでの確認

アプリカンにアップロードしたコンテンツはアプリをビルドすることなく、アプリカンシミュレータというアプリで確認できます。iOS、Android用がそれぞれリリースされています。

このどちらかをインストールし、起動するとアプリカンのログイン画面が表示されます。

ログインすると、これまで作成したプロジェクトが一覧表示されますので、今回作成したプロジェクトをタップします。

そうするとコードが実行され、NCMBにデータが保存されているのが分かるはずです。


アプリカンとNCMBはとても簡単に連携させられます。ぜひ試してみてください!