Monaca × mobile backendでチェックイン風アプリを作ってみよう - ニフクラ mobile backend（mBaaS）お役立ちブログ

Monacaを使うとiOS/Android（さらにChromeアプリも）の両方で動作するハイブリッドアプリが手軽に作成できます。さらにmobile backendを組み合わせることでデータをサーバ上に保存したり、それを検索するのがサーバサイドのコードなしで実現できます。

Monacaアプリにmobile backendを接続してみようでは既存のMonacaアプリに対してmobile backendをいかに組み合わせるかについて紹介しましたが、今回は一からアプリを作ってみます。題材としては位置情報検索を使ったチェックイン風アプリになります。

必要なもの

Monacaのアカウント（無料）
mobile backendのアカウント（無料）

ベースになるソースコード

今回は全くのゼロからではなく、既にGitHubにて公開されているソースコードをベースにします。

NIFTYCloud-mbaas/LocationDemo

こちらのソースコードをダウンロードしてください。

mobile backendにて新しいアプリを作成

管理画面にログインして新しいアプリを作成してください。

作成した後に表示されるアプリケーションキー、クライアントキーをメモしておいてください。

Monacaにて新しいアプリを作成

Monacaにログインしてプロジェクトの作成ボタンをクリックしてください。

今回は最小限のテンプレートを選択します。

プロジェクトを作成したら開くボタンを押してMonaca IDEを立ち上げます。

WebDAVを使ってアップロード

Monaca IDEが立ち上がったら、画面下にあるWebDAVのURLをコピーします。

これを使えばMonacaプロジェクトのファイルをエクスプローラーやFinderからアップロードできます。今回はMac OSXから接続しました。WebDAVサーバへの接続自体については説明を割愛します。そして接続したら www/components 以外のファイルをコピー&ペーストでコピーします。

compornentsをコピーしないのはMonaca上の標準ライブラリがアップデートしていた場合にバージョンが古くなってしまうのを避けるためです。

コンポーネントを登録

続いてMonaca IDE上で設定メニューの JS/CSSコンポーネントの追加と削除を選択します。そしてjQueryとOnsen UIを有効にしてください。

コードの修正

www/js/app.js を開いて、最初の行にある

//起動時にmobile backend APIキーを設定
NCMB.initialize("YOUR_APP_KEY","YOUR_CLIENT_KEY");

を先ほどmobile backendでアプリケーションを作成した際に生成されたアプリケーションキー、クライアントキーに差し替えてください。

なお、GitHubにあるコードはチェックイン情報の保存処理がされていませんので、savePostを以下のように修正します。

//店舗を登録する
function savePost(){
    console.log("savePost");
    //位置情報が取得できたときの処理
    var onSuccess = function (location){
        console.log("onSuccess");
        console.log("lat:" + location.coords.latitude + " lon:" + location.coords.longitude);
        
        //記事内容を取得
        var title = $("#name").val();
        
        //位置情報オブジェクトを作成
        var geoPoint = new NCMB.GeoPoint(location.coords.latitude, location.coords.longitude);
        
        //Postクラスのインスタンスを作成★
        var SpotClass = NCMB.Object.extend("Spot");
        spot = new SpotClass();
        
        //値を設定
        spot.set("name", title);
        spot.set("geo", geoPoint);
        
        //保存を実行
        spot.save({
            success: function(data){
                console.log("Success.");
                alert("登録しました");
                myNavigator.popPage();
            },
            error: function(err) {
                alert("保存できませんでした");
            }
        });
        
        //前のページに戻る
        
    }

    //位置情報取得に失敗した場合の処理
    var onError = function(error){
        alert("error:" + error.message);
    }
    
    var option = {
        timeout: 6000   //タイムアウト値(ミリ秒)
    };
    
    //位置情報を取得
    navigator.geolocation.getCurrentPosition(onSuccess, onError, option);
}

これで準備は完了です。