ニフクラ mobile backend(mBaaS)お役立ちブログ

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

Monaca × ニフティクラウド mobile backendでチェックイン風アプリを作ってみよう

Monacaを使うとiOS/Android(さらにChromeアプリも)の両方で動作するハイブリッドアプリが手軽に作成できます。さらにニフティクラウド 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);
}

これで準備は完了です。

Monacaデバッガーで確認する

Monacaでは作成したアプリを手軽に確認できる Monaca デバッガーが備わっています。iOS版Android版が用意されていますので必要な方をダウンロードしてください。

アプリは起動後、MonacaのユーザIDとパスワードを使ってログインする必要があります。チェックイン風アプリを起動すると次の画面が表示されます。

スポットを登録ボタンを押すと、初回時は位置情報を取得することに対するパーミッションが求められます。後はスポット名を登録するだけです。

スポットを登録すると自動的に前の画面に戻ります。そして検索ボタンを押すと現在の位置情報付近にあるスポット情報が一覧になって返ってきます。


ここから発展させて、ログインの仕組みを作ったり、さらに細かくスポット情報を登録できても面白そうです。ぜひアプリをカスタマイズしてみてください。

LocationDemo/www at master · NIFTYCloud-mbaas/LocationDemo

アプリ別活用事例集 mbaas nifty mobilebackend