Monacaとmobile backendでチェックインアプリをつくる
Transcript of Monacaとmobile backendでチェックインアプリをつくる
Copyright @ NIFTY Corporation All Rights Reserved
Monaca × mobile backendで簡単モバイルアプリ開発-チェックインアプリをつくる-
ニフティ株式会社
1
Copyright @ NIFTY Corporation All Rights Reserved
事前準備
1. mobile backendのアカウント作成2. Monacaのアカウント作成3. Monacaデバッガーのインストール
↑すべて無料で利用できます
2
Copyright @ NIFTY Corporation All Rights Reserved
Monacaとは
• アシアル株式会社が提供• ハイブリッドアプリを開発するツール• HTML / CSS / JavaScriptでコーディング• Monacaデバッガーで動作確認
3
(引用:http://ja.monaca.io)
Copyright @ NIFTY Corporation All Rights Reserved
ニフティクラウド mobile backendとは
• ニフティ株式会社が提供• スマホアプリによくあるサーバー機能をAPIにした
• プッシュ通知• 会員管理• データストア• ファイルストア• 位置情報検索
etc…
4
(引用:http://mb.cloud.nifty.com)
Copyright @ NIFTY Corporation All Rights Reserved
チェックインアプリをつくる(目次)
1. スポットの検索2. スポットをmobile backendに保存
5
Copyright @ NIFTY Corporation All Rights Reserved
プロジェクトをダウンロード
プロジェクトをダウンロードしましょう!https://github.com/NIFTYCloud-mbaas/LocationDemo
「Download ZIP」をクリックしてください。
6
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
Copyright @ NIFTY Corporation All Rights Reserved
Monacaでプロジェクトインポート
ダウンロードしたzipファイルをもとに、Monacaでのインポートを行います
ここからインポートできます左上のロゴをクリック
→プロジェクトの作成をクリック→Import Projectをクリック
8
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendのアプリを作成する
mobile backendでアプリの新規作成画面を開き、アプリ名を入力してアプリを作成しましょう
9
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
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendにデータを登録
ダウンロードしたzipファイルのwwwフォルダにあるyamanote.jsonをアップロードします。クラス名は「Spot」にしてください。
11
Copyright @ NIFTY Corporation All Rights Reserved
アプリをうごかしてみましょう!
「スポットを検索」をタップするとmobile backendでインポートした山手線の駅が
一覧で表示されます。
(検索距離が5kmに設定されているので、近くのスポットをデータストアに
登録したうえで動作確認してください)
12
Copyright @ NIFTY Corporation All Rights Reserved
チェックインアプリをつくる(目次)
1. スポットを検索2. スポットをmobile backendに保存
13
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
Copyright @ NIFTY Corporation All Rights Reserved
アプリをうごかしてみましょう!
「スポットを登録」をタップすると登録画面に遷移します。入力されたスポット名と
今いる場所の位置でスポットを登録します。
チェックインアプリっぽくなりました!
15
Copyright @ NIFTY Corporation All Rights Reserved
まとめ
Monacaのおかげでやらずに済んだこと
・Android/iOSでの位置情報処理を2回作ること・開発環境の用意
16
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendのおかげでやらずに済んだこと・サーバーの用意・データベースの用意
mobile backendのおかげで簡単になること・アプリで扱う情報の設計変更→例えば、名前と位置情報に加えて、スポットの説明文も追加したいときは、アプリの改修だけで可能になる
→データベースの設計変更は不要!
17
まとめ