Monacaとmobile backendでチェックインアプリをつくる

Copyright @ NIFTY Corporation All Rights Reserved

Monaca × mobile backendで簡単モバイルアプリ開発-チェックインアプリをつくる-

ニフティ株式会社

1


事前準備

1. mobile backendのアカウント作成2. Monacaのアカウント作成3. Monacaデバッガーのインストール

↑すべて無料で利用できます

2


Monacaとは

• アシアル株式会社が提供• ハイブリッドアプリを開発するツール• HTML / CSS / JavaScriptでコーディング• Monacaデバッガーで動作確認

3

（引用：http://ja.monaca.io）

http://ja.monaca.io/


ニフティクラウド mobile backendとは

• ニフティ株式会社が提供• スマホアプリによくあるサーバー機能をAPIにした

• プッシュ通知• 会員管理• データストア• ファイルストア• 位置情報検索

etc…

4

（引用：http://mb.cloud.nifty.com）

http://mb.cloud.nifty.com/


チェックインアプリをつくる(目次)

1. スポットの検索2. スポットをmobile backendに保存

5


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

プロジェクトをダウンロードしましょう！https://github.com/NIFTYCloud-mbaas/LocationDemo

「Download ZIP」をクリックしてください。

6

https://github.com/NIFTYCloud-mbaas/LocationDemo


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

プロジェクトをダウンロードしましょう！https://github.com/NIFTYCloud-mbaas/LocationDemo

サンプルプロジェクトで実施済みなこと

• mobile backendのjava script SDKをインストール済み

• ドキュメントからDLしたncmb-latest.min.jsをwww/jsに保存

• 位置情報を取得するcordovaプラグインの有効化

• 設定＞cordovaプラグインの管理

• OnsenUI、jQueryのインポート

• 設定＞JS/CSSコンポーネントの管理

• ページの作成（wwwフォルダのindex.html、page1.html、page2.html）

• JavaScriptの作成（www/js/app.js）7

https://github.com/NIFTYCloud-mbaas/LocationDemo


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

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

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

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

8


mobile backendのアプリを作成する

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

9


mobile backendのAPIキーを設定

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

{"application_key":“YOUR_APPLICATION_KEY","client_key":“YOUR_CLIENT_KEY"

}

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

10


mobile backendにデータを登録

ダウンロードしたzipファイルのwwwフォルダにあるyamanote.jsonをアップロードします。クラス名は「Spot」にしてください。

11


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

「スポットを検索」をタップするとmobile backendでインポートした山手線の駅が

一覧で表示されます。

（検索距離が5kmに設定されているので、近くのスポットをデータストアに

登録したうえで動作確認してください）

12


チェックインアプリをつくる(目次)

1. スポットを検索2. スポットをmobile backendに保存

13


位置情報をmobile backendに保存

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

//Spotクラスのインスタンスを作成★var SpotClass = NCMB.Object.extend ("Spot");var spot = new SpotClass();

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

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

14


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

「スポットを登録」をタップすると登録画面に遷移します。入力されたスポット名と

今いる場所の位置でスポットを登録します。

チェックインアプリっぽくなりました！

15


まとめ

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

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

16


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

mobile backendのおかげで簡単になること・アプリで扱う情報の設計変更→例えば、名前と位置情報に加えて、スポットの説明文も追加したいときは、アプリの改修だけで可能になる

→データベースの設計変更は不要！

17

まとめ


スポットの一覧をGoogle Mapにマッピングしてみましょう！

18

おまけ


Monacaとmobile backendを利用したクラウド上でのアプリ開発をぜひ試してみてください！

19

Monacaとmobile backendでチェックインアプリをつくる

Mobile

Transcript of Monacaとmobile backendでチェックインアプリをつくる