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