1.
Copyright @ NIFTY Corporation All Rights Reserved
Monaca × mobile backendで
簡単モバイルアプリ開発
-チェックインアプリをつくる-
ニフティ株式会社
1

2.
Copyright @ NIFTY Corporation All Rights Reserved
事前準備
1. mobile backendのアカウント作成
2. Monacaのアカウント作成
3. Monacaデバッガーのインストール
↑すべて無料で利用できます
2

3.
Copyright @ NIFTY Corporation All Rights Reserved
Monacaとは
• アシアル株式会社が提供
• ハイブリッドアプリを開発するツール
• HTML / CSS / JavaScriptでコーディング
• Monacaデバッガーで動作確認
3
（引用：http://ja.monaca.io）

4.
Copyright @ NIFTY Corporation All Rights Reserved
ニフティクラウド mobile backendとは
• ニフティ株式会社が提供
• スマホアプリによくあるサーバー機能をAPIにした
• プッシュ通知
• 会員管理
• データストア
• ファイルストア
• 位置情報検索
etc…
4
（引用：http://mb.cloud.nifty.com）

5.
Copyright @ NIFTY Corporation All Rights Reserved
チェックインアプリをつくる(目次)
1. スポットの検索
2. スポットをmobile backendに保存
5

6.
Copyright @ NIFTY Corporation All Rights Reserved
プロジェクトをダウンロード
プロジェクトをダウンロードしましょう！
https://github.com/NIFTYCloud-mbaas/LocationDemo
「Download ZIP」を
クリックしてください。
6

7.
Copyright @ NIFTY Corporation All Rights Reserved
プロジェクトをダウンロード
プロジェクトをダウンロードしましょう！
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

8.
Copyright @ NIFTY Corporation All Rights Reserved
Monacaでプロジェクトインポート
ダウンロードしたzipファイルをもとに、
Monacaでのインポートを行います
ここから
インポートできます左上のロゴをクリック
→プロジェクトの作成をクリック
→Import Projectをクリック
8

9.
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendのアプリを作成する
mobile backendでアプリの新規作成画面を開き、
アプリ名を入力してアプリを作成しましょう
9

10.
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendのAPIキーを設定
アプリの作成完了画面から、2つのキーをコピーして
Monacaに戻ってsetting.jsonに貼付けます。
{
"application_key":“YOUR_APPLICATION_KEY",
"client_key":“YOUR_CLIENT_KEY"
}
Monacaの画面にて
wwwフォルダを開くと
setting.jsonがあります
10

11.
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendにデータを登録
ダウンロードしたzipファイルのwwwフォルダにある
yamanote.jsonをアップロードします。
クラス名は「Spot」にしてください。
11

12.
Copyright @ NIFTY Corporation All Rights Reserved
アプリをうごかしてみましょう！
「スポットを検索」をタップすると
mobile backendでインポートした山手線の駅が
一覧で表示されます。
（検索距離が5kmに設定されているので、
近くのスポットをデータストアに
登録したうえで動作確認してください）
12

13.
Copyright @ NIFTY Corporation All Rights Reserved
チェックインアプリをつくる(目次)
1. スポットを検索
2. スポットをmobile backendに保存
13

14.
Copyright @ NIFTY Corporation All Rights Reserved
位置情報を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.
Copyright @ NIFTY Corporation All Rights Reserved
アプリをうごかしてみましょう！
「スポットを登録」をタップすると
登録画面に遷移します。
入力されたスポット名と
今いる場所の位置でスポットを登録します。
チェックインアプリっぽくなりました！
15

16.
Copyright @ NIFTY Corporation All Rights Reserved
まとめ
Monacaのおかげでやらずに済んだこと
・Android/iOSでの位置情報処理を2回作ること
・開発環境の用意
16

17.
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendのおかげでやらずに済んだこと
・サーバーの用意
・データベースの用意
mobile backendのおかげで簡単になること
・アプリで扱う情報の設計変更
→例えば、名前と位置情報に加えて、スポットの説明文も
追加したいときは、アプリの改修だけで可能になる
→データベースの設計変更は不要！
17
まとめ

18.
Copyright @ NIFTY Corporation All Rights Reserved
スポットの一覧をGoogle Mapにマッピングしてみましょう！
18
おまけ

19.
Copyright @ NIFTY Corporation All Rights Reserved
Monacaとmobile backendを利用した
クラウド上でのアプリ開発を
ぜひ試してみてください！
19