Monacaとmobile backendで簡単モバイルアプリ開発

Copyright © NIFTY Corporation All Rights Reserved. Confidential

Monaca × mobile backendで簡単モバイルアプリ開発

2014年11月1 6日ニフティ株式会社


mobile backendの無料アカウント作成

mb.cloud.nifty.comにアクセスして、

右上の申し込みを行ってください。


Monacaの無料アカウント作成

monaca.mobi/jaにアクセスして、右上のサインアップを行ってください。


Monacaデバッガーのインストール

スマホのGoogle Playストア / App Storeアプリで「Monaca」と検索してください


位置情報を使ってみよう

4

1. プロジェクトインポート2. 位置情報をmobile backendに保存


プロジェクトをダウンロード

5

プロジェクトをダウンロードしましょう！

• http://goo.gl/ fcJKLS


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

6

ダウンロードしたzipファイルをもとに、Monacaでのインポートを行います

ここからインポートできます左上のロゴをクリック

→プロジェクトの作成をクリック→Import Projectをクリック


mobile backendのアプリを作成する

7

mobile backendでアプリの新規作成画面を開き、アプリ名を入力してアプリを作成しましょう


mobile backendのAPIキーを設定する

8

アプリの作成完了画面から、2つのキーをコピーしてMonacaに戻ってapp.jsに貼付けます。

NCMB.initialize( "YOUR_APP_KEY","YOUR_CLIENT_KEY" ) ;

Monacaの画面にてjsフォルダを開くとapp.jsがあります


mobile backendにデータを登録

9

ダウンロードしたzipファイルのwwwフォルダにあるyokoteyakisoba.jsonをアップロードします。

クラス名は「Yokote」にしてください。


アプリをうごかしてみましょう！

10

「店舗を検索」をタップすると横手やきそばのお店が検索されます

（横手やきそば暖簾会のページで調べました）

Google Mapを使えば横手やきそばMapが作成できるはず！！


位置情報を使ってみよう

11

1. プロジェクトインポート2. 位置情報をmobile backendに保存


位置情報をmobile backendに保存する

12

app.jsに★マークのコメントがついている部分があります。以下のようにコードを書いてください。

//Postクラスのインスタンスを作成★var Post = NCMB. Object.extend ("Yokote");var post = new Post();

//値を設定★post.set("name ",title);post.set( "location" , geoPoint);

//保存を実行★post.save();


アプリをうごかしてみましょう！

13

「店舗を登録」をタップするとお店の名前を入力して

今いる場所の位置でお店を登録します。

foursquareのようなチェックインアプリっぽくなりました


まとめ

14

Monacaのおかげでやらずに済んだこと

・Android/iOSそれぞれでの位置情報処理を作ること・開発環境の用意


まとめ

15

mobile backendのおかげでやらずに済んだこと・サーバーの用意・データベースの用意

mobile backendのおかげで簡単になること・データベースの設計変更→例えば、名前と位置情報に加えて、営業時間も追加したいとき


ハンズオンは以上で終了です！おつかれさまでした！

Monacaとmobile backendで簡単モバイルアプリ開発

Mobile

Transcript of Monacaとmobile backendで簡単モバイルアプリ開発