アプリカンは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はとても簡単に連携させられます。ぜひ試してみてください!