読者です 読者をやめる 読者になる 読者になる

MyEnigma

とあるエンジニアのブログです。#Robotics #Programing #C++ #Python #MATLAB #Vim #Mathematics #Book #Movie #Traveling #Mac #iPhone

スマホのGPSで47都道府県を制覇するWebアプリを作った。

Web javascript

完全制覇国内旅行地理検定試験 平成24年度受験用 (2012)

完全制覇国内旅行地理検定試験 平成24年度受験用 (2012)

はじめに

無料で作る自作Webアプリ第四弾です。

(過去のアプリは末尾のリンクを参照下さい)

 

これまでのWebアプリは、

Bootstrapを使って、スマホ対応していましたが、

スマホならではの機能はありませんでした。

今回は、スマホ用のWebアプリとして、

スマホのGPSのデータを使って、

47都道府県を制覇する簡単なゲームアプリを作りました。

Japan Questの使い方

Webアプリのリンクはこちらです。

Japan Quest

 

このアプリの使い方としては、

まずブラウザで開いてから、

ホーム画面に追加を押して、

下記のようにアプリとして配置して下さい。

f:id:meison_amsl:20150704161446p:plain

 

あとは、旅行などで各都道府県に行った時に、

Get Positionボタンを押すと、スマホのGPS情報から

対応する都道府県を制覇(地図上で塗りつぶす)ことができます。

f:id:meison_amsl:20150704161448p:plain

 

また、GetPositionボタンを押して、

新しい都道府県を制覇できた際には、

制覇した都道府県名と

残り都道府県数を簡単にツイートできるボタンもつけました。

このツイートボタンを使った場合、

#JapanQuestというハッシュタグでツイートするので、

それらをまとめるウィジェットも表示するようにしました。

これを使えば、他のユーザをTwitter経由で探すこともできます。

 

ページの下部には、

制覇した都道府県の地図や履歴が表示されます。

f:id:meison_amsl:20150712131744p:plain

 

また、右上のハンバーガメニューには、

使い方の説明のこの記事のリンクと、

別のスマホへのデータ移行用のツールへのリンクがあります。

f:id:meison_amsl:20150712131650p:plain

 

ちなみに、

このWebアプリでは、

位置情報や制覇した都道府県のデータは、

スマホのブラウザのみに保存されるため、

データの流出などの心配はありません。

 

Japan Questの技術構成

こちらのアプリはGithub pagesで運用しています。  

javascriptでスマホのGPSのデータを取得するのは、

navigator.geolocation.getCurrentPosition関数を使うと、

簡単に取得できました。

 

制覇した都道府県の地図の表示に関しては、

Google ChartのGeomap APIを使いました。

 

データの保存に関しては、HTML5のlocalStrageを使っています。

localStrageを使った場合、他のスマホなどに移動した時に、

データを移行できないので、

json形式のデータを吐き出して読み込ませる

データ移行(Data Migration機能)も付けました。

その他の自作Webアプリ

第一弾

myenigma.hatenablog.com

第二弾

myenigma.hatenablog.com

第三弾

myenigma.hatenablog.com

参考資料

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com