ニフクラ mobile backend（mBaaS）お役立ちブログ

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

Monaca公式ガイドブックに掲載されているハイブリッドアプリをニフティクラウド mobile backendに対応させてみよう

過去記事 javascript Monaca SDK Tips

MonacaよりクラウドでできるHTML5ハイブリッドアプリ開発という公式本が出版されました。Monacaの使い方、Onsen UIを使ったハイパフォーマンスな開発手法を細かく説明しているガイドブックになります。

そこで今回は書籍に掲載されているサンプルプロジェクトの中から、バーコードスキャナにニフティクラウド mobile backendの機能を追加してみたいと思います。

必要なもの

バーコードリーダーの仕様

公式ガイドブックの中では、2次元バーコードを読み取り、その結果を元にYahoo!ショッピング検索APIを使って商品検索を行います。検索結果は履歴としてlocalStrageに保存されます。

今回はこの検索結果の保存処理をニフティクラウド mobile backendに変更したいと思います。この結果、localStrageでは容量に限度（5MB）がありますが、データをほぼ無制限に保存できるようになります。さらにクラウド上に保存することで他のデバイスとデータを共有したり、デスクトップブラウザから読み取ったデータの再利用ができるようになります。

ニフティクラウド mobile backendでアプリを作成

まずニフティクラウド mobile backend側での作業になります。管理画面にて新規アプリ作成を選択します。

作成するとアプリケーションキーとクライアントキーが表示されます。これを使いますのでコピーしておきます。

Monacaでプロジェクトをインポート

続いてMonaca側で作業します。Monaca - Monaca公式ガイドブック「クラウドでできるHTML5ハイブリッドアプリ開発」にあるプロジェクト一覧から、バーコードスキャナーアプリのダウンロードを右クリックして、URLをコピーします。

続いてダッシュボードにて新規プロジェクトを作成します。プロジェクトの作成をクリックします。

スライドしてきたテンプレート一覧の上にあるImport Projectをクリックします。

モーダルウィンドウが開きますので、プロジェクト名は適当に、インポート方法として URLを指定してインポート を選択して先ほどコピーしたURLを貼り付けます。その後、インポートボタンを押すと新規プロジェクトが作成されます。今回はプロジェクト名をバーコードリーダーとしました。

プロジェクトが作成されたら開くボタンをクリックします。

JavaScript SDKの追加

まずニフティクラウド mobile backendのJavaScript SDKをダウンロードします。こちらのJavaScriptファイルをローカルにダウンロードしてください。

続いてMonaca IDEにおいてwwwフォルダを右クリックして、アップロードを選択します。

表示されたモーダルウィンドウで、先ほどダウンロードしたJavaScript SDKを選択してアップロードしてください。

これで準備は完了です。

index.htmlの編集

www/index.html を開いて編集します。ニフティクラウド mobile backendのJavaScript SDKを読み込みます。

<script>
  var module = ons.bootstrap();
  ons.disableAutoStatusBarFill();  // (Monaca enables StatusBar plugin by default)
</script>
<script src="ncmb-latest.min.js"></script> <!-- この行を追加 -->
<script src="app.js"></script>

app.jsの編集

www/app.js を開いて編集します。まずNCMBオブジェクトを初期化します。ニフティクラウド mobile backendでアプリを作成した時のアプリケーションキーおよびクライアントキーを使います。

"use strict";

// 追加ここから
NCMB.initialize("APP_KEY",
    "CLIENT_KEY");
var NProduct = NCMB.Object.extend("Product");
// 追加ここまで

var loadingDialog = null;
ons.ready(function() {
    // 読み込み中ダイアログの初期化
    ons.createAlertDialog('loading.html').then(function(alert) {
        loadingDialog = alert;
    });
});

APP_KEY および CLEINT_KEY は適宜読み替えてください。初期化後、今回のデータ保存先になるデータモデル名をProductとしています。これは自由に設定してもらってかまいません。

続いてバーコードスキャンとYahoo!商品検索が成功した商品データをニフティクラウド mobile backend に保存する処理を書きます。

loadingDialog.show();
$scope.search(result.text, function(product) {
    // 追加ここから
    var pd = new NProduct();
    pd.set("code", result.text);
    for (var key in product) {
        console.info(key, product[key]);
        pd.set(key, product[key]);
    }
    pd.save();
    // 追加ここまで
    
    $scope.history.unshift(product);
    $scope.history = $scope.history.slice(0, 10);
    $scope.saveHistory();
    $scope.selectProduct(product);
    setTimeout(function() {
        loadingDialog.hide();
    }, 200);
    :

データの保存成功、失敗は今回は無視しています。データストアへの保存処理は非同期で行われますので、動作に影響を及ぼすことはありません。

product には商品データのハッシュが入ってきますので、それをニフティクラウド mobile backendのオブジェクトに追加しています。この処理が問題なくいけば、商品データがデータストアに保存されます。

続いて履歴処理を変更します。ここはlocalStrageを使用しないようにするだけです。

// 処理を変更
$scope.saveHistory = function() {
  $scope.history.push(JSON.stringify($scope.history));
};

起動時の履歴初期化処理も変更します。

var query = new NCMB.Query(NProduct);
query.find({
    success: function(products) {
        $scope.history = NCMB._.map(products, function(product){
            return product.toJSON();
        });
    },
    error: function(){
        $scope.history = [];
    }
});

ここではNCMB.Queryを使ってニフティクラウド mobile backend上にあるデータを取り出し、それを $scope.historyに追加しています。NCMB._mapはNCMB.ObjectからJSONに変換するために行っています。

これで変更はすべてです。

実際に使ってみる

起動時の画面です。この時点で履歴はニフティクラウド mobile backendから取り出しています。

バーコードを読み取ると結果が表示されます。この時点でニフティクラウド mobile backendへデータを保存しています。

データは管理画面で実際に見ることができます。

データは蓄積されて、他のデバイスでも同じデータを確認できるようになります。

いかがでしょうか。ハイブリッドアプリを簡単に作れるのがMonacaの魅力ですが、そこにネットワーク機能が追加されるだけで使い方が様々に考えられるようになるでしょう。ぜひMonaca公式ガイドブックを通じてMonacaに興味を持たれたら、ニフティクラウド mobile backendと組み合わせて使ってみてください！

導入相談会