【code for向け】保育園・消火栓mapを作れるアプリを作ろう!
Post on 15-Apr-2017
723 Views
Preview:
TRANSCRIPT
Copyright © NIFTY Corporation All Rights Reserved.
【ハンズオン】
保育園mapや消火栓mapを作れるアプリを作ろう!
Copyright © NIFTY Corporation All Rights Reserved. 2
事前準備
Monaca
ニフティクラウドmobile backend
https://ja.monaca.io/
http://mb.cloud.nifty.com/
※利用登録とMonacaデバッガーのインストール
※利用登録
本日の資料
【SlideShare】 http://goo.gl/JSQT8u★【GitHub】https://goo.gl/ZhwFsz
Copyright © NIFTY Corporation All Rights Reserved. 3
事前準備
【GitHub】https://goo.gl/ZhwFsz
※このあと使いますので開いておいてください!
Copyright © NIFTY Corporation All Rights Reserved. 4
Code forでよくあるプロジェクトを作ろう!
○○mapってよくありますよね!?
会津若松市消火栓マップhttp://aizu.io/app_list/hydrant/search2.php
札幌保育園マップhttp://papamama.codeforsapporo.org/
こうしたmap作成アプリを作りましょう!
Copyright © NIFTY Corporation All Rights Reserved. 5
MAPを作るときの課題
例えば保育園mapを作るときはこんな課題が・・・・各保育園の位置情報を調査が必要だけど・・・
GPSとか持っていない!
・調査結果を保存するサーバー必要だけど・・・
サーバーの用意とかメンドクサイ!
・位置情報による絞込み機能をサーバーに作りたいけど・・・
緯度経度の計算方法なんて分からないよ!
クラウドサービスを使ってこんな課題を解決するハンズオンをやりましょう!
Copyright © NIFTY Corporation All Rights Reserved. 6
本日のハンズオン内容
○○map作成アプリ
現在地の位置情報をスマホで取得してサーバーに保存する
現在地付近のポイントをmapに表示
登録
Copyright © NIFTY Corporation All Rights Reserved. 7
利用するクラウドサービス
GPSとか持っていない!を解決するMonaca:アシアル社が提供するクラウドサービスHTML5とJSでスマホアプリが開発できる各センサへのアクセスも行える
緯度経度の計算方法分からん!とサーバーの用意とかメンドイ!を解決する
ニフティクラウド mobile backend:ニフティ社が提供するクラウドサービススマートフォンアプリの汎用的なバックエンド機能をそろえたクラウドサービス用意されたAPI・SDKを使うだけで、データベースへの保存やプッシュ通知の配信ができます。
Copyright © NIFTY Corporation All Rights Reserved. 8
ニフティクラウドmobile backendの機能
人気 No1
位置情報の絞込みを行える色んなデータを保存できる
Copyright © NIFTY Corporation All Rights Reserved. 9
手順
Monaca利用準備
mobile backend利用準備
近接ポイントの表示
位置情報で絞り込んで近接ポイントを表示
利用登録
プロジェクトのインポート
デバッガーのインストール
スマホにmapを表示する
Copyright © NIFTY Corporation All Rights Reserved.
Monaca利用準備
Copyright © NIFTY Corporation All Rights Reserved. 11
Monacaの利用登録
https://ja.monaca.io/
※登録済みの方は不要です
Copyright © NIFTY Corporation All Rights Reserved. 12
プロジェクトのインポート
Monacaの新しいプロジェクトを作ります
「開発をスタート」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 13
プロジェクトのインポート
「Monaca.ioで開発」を選択してください
Copyright © NIFTY Corporation All Rights Reserved. 14
プロジェクトのインポート
「Import Project」を選択してください
Copyright © NIFTY Corporation All Rights Reserved. 15
プロジェクトのインポート
「インポート」をクリック
★https://github.com/hounenhounen/NCMB_GPSLocation/archive/master.zip
GPSLocationGPSLocation
Copyright © NIFTY Corporation All Rights Reserved. 16
プロジェクトのインポート
「開く」をクリック
ダッシュボードの左側に作成したプロジェクトが追加されています
GPSLocation
Copyright © NIFTY Corporation All Rights Reserved. 17
プロジェクトのインポート
プロジェクトの開発環境が開きます
GPSLocation
Copyright © NIFTY Corporation All Rights Reserved. 18
Monacaデバッガーのインストール
今回作成するアプリは動作確認にMonacaデバッガーが必須です!
重要
https://ja.monaca.io/debugger.html
Copyright © NIFTY Corporation All Rights Reserved. 19
スマホにmapを表示する
インストールしたデバッガーを立ち上げて、ログイン後GPSLocationをタップして左のmapを表示してください
タップすると表示される
登録
Copyright © NIFTY Corporation All Rights Reserved.
mobile backend利用準備
Copyright © NIFTY Corporation All Rights Reserved. 21
手順
Monaca利用準備
mobile backend利用準備利用登録
アプリの作成
近接ポイントの表示
位置情報で絞り込んで近接ポイントを表示
Copyright © NIFTY Corporation All Rights Reserved. 22
mobile backendの利用登録 1/2
http://mb.cloud.nifty.com/
※右クリックして新しいタブで開くと便利です。
まず、下記URLよりサービスサイトにアクセスしてください。
ここをクリック
ここをクリック
Copyright © NIFTY Corporation All Rights Reserved. 23
mobile backendの利用登録 2/2
必要事項を入力して@nifty会員登録してください。
ここをクリック
ご登録いただいた@nifty IDでログイン
利用規約を確認後、同意して
利用開始!
Copyright © NIFTY Corporation All Rights Reserved. 24
mobile backendのアプリ作成
利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。
「アプリケーションキー」、「クライアントキー」の2つのキーを使い、サーバー接続の認証をしています。その2つのキーがアプリ作成時に生成されます。
「GPSLocation」と入力してください
2つのキーは後で使います
OKを押すと管理画面へ
Copyright © NIFTY Corporation All Rights Reserved. 25
mobile backendのアプリ作成-補足-
※ログイン後に、この画面が出た方は…
「+新しいアプリ」をクリックすると
でてきます!
「GPSLocation」と入力してください
Copyright © NIFTY Corporation All Rights Reserved.
現在地付近のポイント表示
Copyright © NIFTY Corporation All Rights Reserved. 27
手順
Monaca利用準備
mobile backend利用準備
ポイント情報のインポート
動作確認
ポイント表示コードの説明
現在地のポイント登録
キーの埋め込み
位置情報で絞り込んで近接ポイントを表示
Copyright © NIFTY Corporation All Rights Reserved. 28
キーの埋め込み
Monaca開発環境、 www内のapp.jsを開いてください。
ここをダブルクリック
アプリ作成時に表示された「アプリケーションキー」、「クライアントキー」
をそれぞれコピー&ペースト
SDK初期化のため、各キーを赤四角枠の中に貼り付けてください
Copyright © NIFTY Corporation All Rights Reserved. 29
ポイント情報のインポート
今回は事前に登録しておくポイントの情報として善光寺、信州大学位置情報が記された「sample.json」を使います。下記のURLからそのファイルをダウンロードしてください。
https://goo.gl/Vb4Aq6
URLへアクセスするとsample.jsonが表示されます。
ブラウザ画面上で右クリックして「名前を付けて保存」してください。
Copyright © NIFTY Corporation All Rights Reserved. 30
ポイント情報のインポート
先ほどダウンロードしたsample.jsonをmobile backendアップロードします。クラス名は「PlacePoints」にしてください。
インポート終了後山の手線の位置情報が表示される
Copyright © NIFTY Corporation All Rights Reserved. 31
動作確認
一度デバッガーを立ち上げて「ポイントを見る」をタップしてください
赤丸タップ後「ポイントを見る」をタップ
登録
Copyright © NIFTY Corporation All Rights Reserved. 32
コードの解説
「PlacePoints」クラスを操作する宣言
現在地から5km以内のポイントをgeoカラムから検索する
条件に適合するものを全て取得
取得したポイントをmapに描画
Copyright © NIFTY Corporation All Rights Reserved.
現在地のポイント登録
Copyright © NIFTY Corporation All Rights Reserved. 34
手順
Monaca利用準備
mobile backend利用準備
位置情報で絞り込んで近接ポイントを表示
現在地のポイント登録
動作確認
ポイント登録コードの解説
Copyright © NIFTY Corporation All Rights Reserved. 35
動作確認
一度デバッガーを立ち上げて「ポイントを登録する」をタップしてください
赤丸タップ後「ポイントを登録する」をタップ
登録後mobile backendの管理画面を確認
登録
Copyright © NIFTY Corporation All Rights Reserved. 36
動作確認
mobile backendの管理画面で、PlacePointsのデータを再度確認します
赤枠内のようにデータが更新されていれば正常に動作しています。
Copyright © NIFTY Corporation All Rights Reserved. 37
コードの解説
「PlacePoints」クラスを操作する宣言
登録するカラム名、値をそれぞれ指定する
実際に登録する
Copyright © NIFTY Corporation All Rights Reserved. 38
まとめ:ハンズオンでやったこと
○○map作成アプリを作った
ニフティクラウドmobile backendで位置情報の絞込みを行えた位置情報を保存できた
Monacaでスマホでの位置情報取得を行えた
Copyright © NIFTY Corporation All Rights Reserved. 39
他のCode for プロジェクトでの使われ方1
さすけね裏路地など非除雪地域を市民が電話(Twilio)で報告
データストアに非除雪地域を保存
位置情報機能を使ってマッピング
非除雪地域の可視化
Copyright © NIFTY Corporation All Rights Reserved. 40
他のCode for プロジェクトでの使われ方2
会津弁 標準語
あいばっせ いくよ
方言の辞書に活用
「あいばっせ」ってなに?
「いくよ」って意味です。
JSを使えばできるっ!
Pepper観光案内
方言辞書
Copyright © NIFTY Corporation All Rights Reserved. 41
Code forにおけるmobile backendは・・・
データ更新参照
データ更新参照
データ更新参照
ヒト・モノ間でデータを共有するデータ基盤
Copyright © NIFTY Corporation All Rights Reserved. 42
top related