Download - Monacaとmobile backendで簡単モバイルアプリ開発
Copyright © NIFTY Corporation All Rights Reserved. Confidential
Monaca × mobile backendで簡単モバイルアプリ開発
2014年11月1 6日ニフティ株式会社
Copyright © NIFTY Corporation All Rights Reserved. Confidential
mobile backendの無料アカウント作成
mb.cloud.nifty.comにアクセスして、
右上の申し込みを行ってください。
Copyright © NIFTY Corporation All Rights Reserved. Confidential
Monacaの無料アカウント作成
monaca.mobi/jaにアクセスして、右上のサインアップを行ってください。
Copyright © NIFTY Corporation All Rights Reserved. Confidential
Monacaデバッガーのインストール
スマホのGoogle Playストア / App Storeアプリで「Monaca」と検索してください
Copyright © NIFTY Corporation All Rights Reserved. Confidential
位置情報を使ってみよう
4
1. プロジェクトインポート2. 位置情報をmobile backendに保存
Copyright © NIFTY Corporation All Rights Reserved. Confidential
プロジェクトをダウンロード
5
プロジェクトをダウンロードしましょう!
• http://goo.gl/ fcJKLS
Copyright © NIFTY Corporation All Rights Reserved. Confidential
Monacaでプロジェクトインポート
6
ダウンロードしたzipファイルをもとに、Monacaでのインポートを行います
ここからインポートできます左上のロゴをクリック
→プロジェクトの作成をクリック→Import Projectをクリック
Copyright © NIFTY Corporation All Rights Reserved. Confidential
mobile backendのアプリを作成する
7
mobile backendでアプリの新規作成画面を開き、アプリ名を入力してアプリを作成しましょう
Copyright © NIFTY Corporation All Rights Reserved. Confidential
mobile backendのAPIキーを設定する
8
アプリの作成完了画面から、2つのキーをコピーしてMonacaに戻ってapp.jsに貼付けます。
NCMB.initialize( "YOUR_APP_KEY","YOUR_CLIENT_KEY" ) ;
Monacaの画面にてjsフォルダを開くとapp.jsがあります
Copyright © NIFTY Corporation All Rights Reserved. Confidential
mobile backendにデータを登録
9
ダウンロードしたzipファイルのwwwフォルダにあるyokoteyakisoba.jsonをアップロードします。
クラス名は「Yokote」にしてください。
Copyright © NIFTY Corporation All Rights Reserved. Confidential
アプリをうごかしてみましょう!
10
「店舗を検索」をタップすると横手やきそばのお店が検索されます
(横手やきそば暖簾会 のページで調べました)
Google Mapを使えば横手やきそばMapが作成できるはず!!
Copyright © NIFTY Corporation All Rights Reserved. Confidential
位置情報を使ってみよう
11
1. プロジェクトインポート2. 位置情報をmobile backendに保存
Copyright © NIFTY Corporation All Rights Reserved. Confidential
位置情報を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();
Copyright © NIFTY Corporation All Rights Reserved. Confidential
アプリをうごかしてみましょう!
13
「店舗を登録」をタップするとお店の名前を入力して
今いる場所の位置でお店を登録します。
foursquareのようなチェックインアプリっぽくなりました
Copyright © NIFTY Corporation All Rights Reserved. Confidential
まとめ
14
Monacaのおかげでやらずに済んだこと
・Android/iOSそれぞれでの位置情報処理を作ること・開発環境の用意
Copyright © NIFTY Corporation All Rights Reserved. Confidential
まとめ
15
mobile backendのおかげでやらずに済んだこと・サーバーの用意・データベースの用意
mobile backendのおかげで簡単になること・データベースの設計変更→例えば、名前と位置情報に加えて、営業時間も追加したいとき
Copyright © NIFTY Corporation All Rights Reserved. Confidential
ハンズオンは以上で終了です!おつかれさまでした!