【Code for向け】保育園・消火栓mapを作れるアプリを作ろう！

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

事前準備
【GitHub】https://goo.gl/ZhwFsz
※このあと使いますので
開いておいてください！

Code forでよくあるプロジェクトを作ろう！
○○mapってよくありますよね！？
会津若松市消火栓マップ
http://aizu.io/app_list/hydrant/search2.php
札幌保育園マップ
http://papamama.codeforsapporo.org/
こうしたmap作成アプリを作りましょう！

MAPを作るときの課題
例えば保育園mapを作るときはこんな課題が・・・
・各保育園の位置情報を調査が必要だけど・・・
GPSとか持っていない！
・調査結果を保存するサーバー必要だけど・・・
サーバーの用意とかメンドクサイ！
・位置情報による絞込み機能をサーバーに作りたいけど・・・
緯度経度の計算方法なんて分からないよ！
クラウドサービスを使ってこんな課題を
解決するハンズオンをやりましょう！

本日のハンズオン内容
○○map作成アプリ
現在地の位置情報
をスマホで取得して
サーバーに保存する
現在地付近のポイント
をmapに表示
登録

利用するクラウドサービス
GPSとか持っていない！を解決するMonaca：
アシアル社が提供するクラウドサービス
HTML5とJSでスマホアプリが開発できる
各センサへのアクセスも行える
緯度経度の計算方法分からん！と
サーバーの用意とかメンドイ！を解決する
ニフティクラウド mobile backend：
ニフティ社が提供するクラウドサービス
スマートフォンアプリの汎用的なバックエン
ド機能をそろえたクラウドサービス
用意されたAPI・SDKを使うだけで、データ
ベースへの保存やプッシュ通知の配信ができ
ます。

ニフティクラウドmobile backendの機能
人気 No1
位置情報の絞込みを行える色んなデータを保存できる

手順
Monaca利用準備
mobile backend利用準備
近接ポイントの表示
位置情報で絞り込んで
近接ポイントを表示
利用登録
プロジェクトのインポート
デバッガーのインストール
スマホにmapを表示する

Monaca利用準備

Monacaの利用登録
https://ja.monaca.io/
※登録済みの方は不要です

Monacaの新しいプロジェクトを作ります
「開発をスタート」
をクリック

「Monaca.ioで開発」を
選択してください

「Import Project」を
選択してください

「インポート」
をクリック
★https://github.com/hounenhounen/NCMB_GPSLocation/archive/master.zip
GPSLocation
GPSLocation

「開く」
をクリック
ダッシュボードの左側に作成した
プロジェクトが追加されています
GPSLocation

プロジェクトの開発環境が開きます
GPSLocation

Monacaデバッガーのインストール
今回作成するアプリは動作確認に
Monacaデバッガーが必須です！
重要
https://ja.monaca.io/debugger.html

スマホにmapを表示する
インストールしたデバッガーを
立ち上げて、ログイン後
GPSLocationをタップして
左のmapを表示してください
タップすると
表示される
登録

手順
Monaca利用準備
利用登録
アプリの作成
近接ポイントの表示

mobile backendの利用登録 1/2
http://mb.cloud.nifty.com/
※右クリックして新しいタブで開くと便利です。
まず、下記URLよりサービスサイトに
アクセスしてください。
ここをクリック

mobile backendの利用登録 2/2
必要事項を入力して@nifty会員登録してください。
ご登録いただいた
@nifty IDでログイン
利用規約を
確認後、同意して
利用開始！

mobile backendのアプリ作成
利用登録が終わると
アプリの新規作成画面が表示されます。
アプリ名を入力して新規作成してください。
「アプリケーションキー」、「クライアントキー」
の2つのキーを使い、
サーバー接続の認証をしています。
その２つのキーがアプリ作成時に生成されます。
｢GPSLocation｣
と入力してください
2つのキーは
後で使います
OKを押すと管理画面へ

mobile backendのアプリ作成-補足-
※ログイン後に、この画面が出た方は…
「+新しいアプリ」
をクリックすると
でてきます!
｢GPSLocation｣
と入力してください

現在地付近のポイント表示

手順
Monaca利用準備
ポイント情報のインポート
動作確認
ポイント表示コードの説明
現在地のポイント登録
キーの埋め込み

キーの埋め込み
Monaca開発環境、 www内のapp.jsを開いてください。
ここをダブルクリック
アプリ作成時に表示された
「アプリケーションキー」、「クライアントキー」
をそれぞれコピー＆ペースト
SDK初期化のため、
各キーを赤四角枠の中に貼り付けてください

今回は事前に登録しておくポイントの情報として善光寺、
信州大学位置情報が記された「sample.json」を使います。
下記のURLからそのファイルをダウンロードしてください。
https://goo.gl/Vb4Aq6
URLへアクセスすると
sample.jsonが表示されます。
ブラウザ画面上で右クリックして
「名前を付けて保存」してください。

先ほどダウンロードしたsample.jsonを
mobile backendアップロードします。
クラス名は「PlacePoints」にしてください。
インポート終了後
山の手線の位置情報が表示される

動作確認
一度デバッガーを立ち上げて「ポイントを見る」をタ
ップしてください
赤丸タップ後
「ポイントを見る」
をタップ
登録

コードの解説
｢PlacePoints｣クラスを操作する宣言
現在地から5km以内のポイントを
geoカラムから検索する
条件に適合する
ものを全て取得
取得したポイントを
mapに描画

手順
Monaca利用準備
動作確認
ポイント登録コードの解説

動作確認
一度デバッガーを立ち上げて「ポイントを登録する」
をタップしてください
赤丸タップ後
「ポイントを登録する」
をタップ
登録後mobile backend
の管理画面を確認
登録

動作確認
mobile backendの管理画面で、PlacePointsのデータを
再度確認します
赤枠内のようにデータが更新されていれば正常に動作
しています。

コードの解説
｢PlacePoints｣クラスを操作する宣言
登録するカラム名、
値をそれぞれ指定する
実際に登録する

まとめ：ハンズオンでやったこと
○○map作成アプリを作った
ニフティクラウドmobile backendで
位置情報の絞込みを行えた
位置情報を保存できた
Monacaでスマホでの位置情報取得を行えた

他のCode for プロジェクトでの使われ方1
さすけね
裏路地など
非除雪地域を市民が
電話(Twilio)で報告
データストアに
非除雪地域を保存
位置情報機能を
使ってマッピング
非除雪地域の可視化

他のCode for プロジェクトでの使われ方2
会津弁標準語
あいばっせいくよ
方言の辞書に活用
「あいばっせ」
ってなに？
「いくよ」
って意味です。
JSを使えばできるっ！
Pepper観光案内
方言辞書

Code forにおけるmobile backendは・・・
データ
更新
参照
データ
更新
参照
データ
更新
参照
ヒト・モノ間でデータを共有する
データ基盤

【Code for向け】保育園・消火栓mapを作れるアプリを作ろう！

More Related Content

What's hot (12)

Viewers also liked (9)

Similar to 【Code for向け】保育園・消火栓mapを作れるアプリを作ろう！ (20)

【Code for向け】保育園・消火栓mapを作れるアプリを作ろう！