Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright @ NIFTY Corporation All Rights Reserved
Monaca × mobile backendで
簡単モバイルアプリ開発
-チェックインアプリをつくる-
ニフティ株式会社
1
Copyright @ NIFTY Corporation All Rights Reserved
事前準備
1. mobile backendのアカウント作成
2. Monacaのアカウント作成
3. Monacaデバッガーのインストール
↑...
Copyright @ NIFTY Corporation All Rights Reserved
Monacaとは
• アシアル株式会社が提供
• ハイブリッドアプリを開発するツール
• HTML / CSS / JavaScriptでコーデ...
Copyright @ NIFTY Corporation All Rights Reserved
ニフティクラウド mobile backendとは
• ニフティ株式会社が提供
• スマホアプリによくあるサーバー機能をAPIにした
• プッシ...
Copyright @ NIFTY Corporation All Rights Reserved
チェックインアプリをつくる(目次)
1. スポットの検索
2. スポットをmobile backendに保存
5
Copyright @ NIFTY Corporation All Rights Reserved
プロジェクトをダウンロード
プロジェクトをダウンロードしましょう!
https://github.com/NIFTYCloud-mbaas/Lo...
Copyright @ NIFTY Corporation All Rights Reserved
プロジェクトをダウンロード
プロジェクトをダウンロードしましょう!
https://github.com/NIFTYCloud-mbaas/Lo...
Copyright @ NIFTY Corporation All Rights Reserved
Monacaでプロジェクトインポート
ダウンロードしたzipファイルをもとに、
Monacaでのインポートを行います
ここから
インポートできま...
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendのアプリを作成する
mobile backendでアプリの新規作成画面を開き、
アプリ名を入力してアプリを作成しまし...
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendのAPIキーを設定
アプリの作成完了画面から、2つのキーをコピーして
Monacaに戻ってsetting.jsonに...
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendにデータを登録
ダウンロードしたzipファイルのwwwフォルダにある
yamanote.jsonをアップロードします...
Copyright @ NIFTY Corporation All Rights Reserved
アプリをうごかしてみましょう!
「スポットを検索」をタップすると
mobile backendでインポートした山手線の駅が
一覧で表示されます。...
Copyright @ NIFTY Corporation All Rights Reserved
チェックインアプリをつくる(目次)
1. スポットを検索
2. スポットをmobile backendに保存
13
Copyright @ NIFTY Corporation All Rights Reserved
位置情報をmobile backendに保存
app.jsに★マークのコメントがついている部分があります。
以下のようにコードを書いてください。...
Copyright @ NIFTY Corporation All Rights Reserved
アプリをうごかしてみましょう!
「スポットを登録」をタップすると
登録画面に遷移します。
入力されたスポット名と
今いる場所の位置でスポットを登...
Copyright @ NIFTY Corporation All Rights Reserved
まとめ
Monacaのおかげでやらずに済んだこと
・Android/iOSでの位置情報処理を2回作ること
・開発環境の用意
16
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendのおかげでやらずに済んだこと
・サーバーの用意
・データベースの用意
mobile backendのおかげで簡単にな...
Copyright @ NIFTY Corporation All Rights Reserved
スポットの一覧をGoogle Mapにマッピングしてみましょう!
18
おまけ
Copyright @ NIFTY Corporation All Rights Reserved
Monacaとmobile backendを利用した
クラウド上でのアプリ開発を
ぜひ試してみてください!
19
Upcoming SlideShare
Loading in …5
×

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

19,368 views

Published on

Monacaとニフティクラウド mobile backendを利用して、
簡単にチェックインアプリをつくるためのチュートリアル資料です。

Published in: Mobile
  • Login to see the comments

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

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

×