【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作成アプリを作りましょう！

http://aizu.io/app_list/hydrant/search2.php

http://papamama.codeforsapporo.org/


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

GPSLocationGPSLocation



「開く」をクリック

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

GPSLocation



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

GPSLocation


Monacaデバッガーのインストール

今回作成するアプリは動作確認にMonacaデバッガーが必須です！

重要

https://ja.monaca.io/debugger.html


スマホにmapを表示する

インストールしたデバッガーを立ち上げて、ログイン後GPSLocationをタップして左のmapを表示してください

タップすると表示される

登録




手順

Monaca利用準備

mobile backend利用準備利用登録

アプリの作成

近接ポイントの表示



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が表示されます。

ブラウザ画面上で右クリックして「名前を付けて保存」してください。

https://goo.gl/Vb4Aq6



先ほどダウンロードした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は・・・

データ更新参照



ヒト・モノ間でデータを共有するデータ基盤


Engineering

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