はじめに
無料で作る自作Webアプリ第四弾です。
(過去のアプリは末尾のリンクを参照下さい)
これまでのWebアプリは、
Bootstrapを使って、スマホ対応していましたが、
スマホならではの機能はありませんでした。
今回は、スマホ用のWebアプリとして、
スマホのGPSのデータを使って、
47都道府県を制覇する簡単なゲームアプリを作りました。
Japan Questの使い方
Webアプリのリンクはこちらです。
このアプリの使い方としては、
まずブラウザで開いてから、
ホーム画面に追加を押して、
下記のようにアプリとして配置して下さい。
あとは、旅行などで各都道府県に行った時に、
Get Positionボタンを押すと、スマホのGPS情報から
対応する都道府県を制覇(地図上で塗りつぶす)ことができます。
また、GetPositionボタンを押して、
新しい都道府県を制覇できた際には、
制覇した都道府県名と
残り都道府県数を簡単にツイートできるボタンもつけました。
このツイートボタンを使った場合、
#JapanQuestというハッシュタグでツイートするので、
それらをまとめるウィジェットも表示するようにしました。
これを使えば、他のユーザをTwitter経由で探すこともできます。
ページの下部には、
制覇した都道府県の地図や履歴が表示されます。
また、右上のハンバーガメニューには、
使い方の説明のこの記事のリンクと、
別のスマホへのデータ移行用のツールへのリンクがあります。
ちなみに、
このWebアプリでは、
位置情報や制覇した都道府県のデータは、
スマホのブラウザのみに保存されるため、
データの流出などの心配はありません。
Japan Questの技術構成
こちらのアプリはGithub pagesで運用しています。
javascriptでスマホのGPSのデータを取得するのは、
navigator.geolocation.getCurrentPosition関数を使うと、
簡単に取得できました。
制覇した都道府県の地図の表示に関しては、
Google ChartのGeomap APIを使いました。
データの保存に関しては、HTML5のlocalStrageを使っています。
localStrageを使った場合、他のスマホなどに移動した時に、
データを移行できないので、
json形式のデータを吐き出して読み込ませる
データ移行(Data Migration機能)も付けました。
その他の自作Webアプリ
第一弾
第二弾
第三弾
参考資料
MyEnigma Supporters
もしこの記事が参考になり、
ブログをサポートしたいと思われた方は、
こちらからよろしくお願いします。