はじめに
福井県の公開しているオープンデータの中にAEDの位置情報があったので、これを使って福井県AEDマップというモバイルアプリケーションを作ってみました。
開発環境はMonacaを用いています。
Monacaはブラウザ上で動作する開発環境(IED)を利用し、HTML5で記述したページをモバイルアプリケーション化することができるcordovaというソフトウェアを使ってモバイルアプリケーションを生成します。
同じようなデータを集めれば他にも色々作れそうですね。
データの取得
まず、福井県のWebサイトからAED設置場所一覧のデータを入手します。
データ形式はCSVで、場所、所在地、台数、緯度、経度が入っています。
CSVでは使いにくいので、CSVをJSON形式に変換。
以下、変換例を示します。
ちなみに台数は省略しています。
施設名,住所,台数,緯度,経度
藤島高等学校,福井市文京2-8-30,1,36.079844,136.216209
高志高等学校,福井市御幸2-25-8,1,36.059456,136.232397
羽水高等学校,福井市羽水1-302,1,36.042124,136.228942
足羽高等学校,福井市杉谷町44,1,36.009178,136.196403
↓
[
["藤島高等学校","福井市文京2-8-30",36.079844,136.216209],
["高志高等学校","福井市御幸2-25-8",36.059456,136.232397],
["羽水高等学校","福井市羽水1-302",36.042124,136.228942],
["足羽高等学校","福井市杉谷町44",36.009178,136.196403]
]
作成したJSONデータは「aed.json」という名前で保存します。
プロジェクトの作成
Monacaにログインして、「新規プロジェクトの作成」から「Onsen UI V2 JS Tabbar」を選択し、「作成」をクリック。
名前は適当に入れて下さい。ちなみに僕は「福井県AEDマップ」としました。
上記で作成したJSONデータを「www」フォルダにアップロードします。
以降、生成されたファイルの中にある「index.html」を主に編集します。
index.htmlの編集
ヘッダーの設定
GoogleMapAPIとjQueryを利用するためにヘッダーへ以下の行を追加。
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
HTMLの記載
<body>〜</body>の中身を以下のとおり変更。
<body onload="init();">
<ons-tabbar>
<ons-tab label="マップ" page="tab1.html" active>
</ons-tab>
<ons-tab label="情報" page="tab2.html">
</ons-tab>
</ons-tabbar>
<ons-template id="tab1.html">
<ons-page>
<ons-toolbar>
<div class="center" onclick="init();">福井県AEDマップ</div>
</ons-toolbar>
<div id="map_canvas"></div>
</ons-page>
</ons-template>
<ons-template id="tab2.html">
<ons-page>
<ons-toolbar>
<div class="center">情報</div>
</ons-toolbar>
<p>
このアプリは以下のサイトの情報を利用しています。<br />
<div onclick="window.open('http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/','_system');">http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/</div>
</p>
<div id="info_canvas" name="info_canvas">情報表示</div>
</ons-page>
</ons-template>
</body>
JavaScriptの作成
以下のとおりヘッダー内にスクリプトを作成
AED情報(JSON)の読込と地図上のマーカ作成
var map;
function init_info() {
var info_canvas = document.getElementById("info_canvas");
info_canvas.innerHTML = "TEST";
//Ajax通信
$.ajax({
type: 'GET',
url: './aed.json',
dataType: 'json',
success: function(json){
var len = json.length;
info_canvas.innerHTML = "AED数 " + json.length;
for(var i=0; i < len; i++){
pos = {
lat: json[i][2],
lng: json[i][3]
};
marker = new google.maps.Marker({
position: pos,
map: map
});
}
},
//エラー処理
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
画面サイズの取得と地図サイズの設定
function getWindowSize() {
var sW,sH;
sW = window.innerWidth;
sH = window.innerHeight;
document.getElementById("map_canvas").style.height = (sH - 113) + 'px';
}
$(window).on('resize', function(e) {
getWindowSize();
});
地図の初期化
function init_map(lat, lng) {
var mapOptions = {
//中心地設定
center: new google.maps.LatLng(lat, lng),
//ズーム設定
zoom: 15,
//地図のタイプを指定
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
getWindowSize();
init_info();
}
アプリケーションの初期化
function init() {
//福井県庁舎の位置
var lat = 36.0652433;
var lng = 136.2194966;
if (navigator.geolocation) {
// 現在の位置情報取得
navigator.geolocation.getCurrentPosition(
function(pos) {
lat = pos.coords.latitude;
lng = pos.coords.longitude;
init_map(lat, lng);
},
function() {
init_map(lat, lng);
}
);
} else {
init_map(lat, lng);
}
}
index.html全文
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script>
var map;
function init() {
//福井県庁舎の位置
var lat = 36.0652433;
var lng = 136.2194966;
if (navigator.geolocation) {
// 現在の位置情報取得
navigator.geolocation.getCurrentPosition(
function(pos) {
lat = pos.coords.latitude;
lng = pos.coords.longitude;
init_map(lat, lng);
},
function() {
init_map(lat, lng);
}
);
} else {
init_map(lat, lng);
}
}
function init_map(lat, lng) {
var mapOptions = {
//中心地設定
center: new google.maps.LatLng(lat, lng),
//ズーム設定
zoom: 15,
//地図のタイプを指定
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
getWindowSize();
init_info();
}
function getWindowSize() {
var sW,sH;
sW = window.innerWidth;
sH = window.innerHeight;
document.getElementById("map_canvas").style.height = (sH - 113) + 'px';
}
function init_info() {
var info_canvas = document.getElementById("info_canvas");
info_canvas.innerHTML = "TEST";
//Ajax通信
$.ajax({
type: 'GET',
url: './aed.json',
dataType: 'json',
success: function(json){
var len = json.length;
info_canvas.innerHTML = "AED数 " + json.length;
for(var i=0; i < len; i++){
pos = {
lat: json[i][2],
lng: json[i][3]
};
marker = new google.maps.Marker({
position: pos,
map: map
});
}
},
//エラー処理
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
ons.ready(function() {
console.log("Onsen UI is ready!");
});
</script>
</head>
<body onload="init();">
<ons-tabbar>
<ons-tab label="マップ" page="tab1.html" active>
</ons-tab>
<ons-tab label="情報" page="tab2.html">
</ons-tab>
</ons-tabbar>
<ons-template id="tab1.html">
<ons-page>
<ons-toolbar>
<div class="center" onclick="init();">福井県AEDマップ</div>
</ons-toolbar>
<div id="map_canvas"></div>
</ons-page>
</ons-template>
<ons-template id="tab2.html">
<ons-page>
<ons-toolbar>
<div class="center">情報</div>
</ons-toolbar>
<p>
このアプリは以下のサイトの情報を利用しています。<br />
<div onclick="window.open('http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/','_system');">http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/</div>
</p>
<div id="info_canvas" name="info_canvas">情報表示</div>
</ons-page>
</ons-template>
</body>
</html>
CSSの編集
地図用にCSSを編集。
cssフォルダ内の「style.css」に以下を追加。
#map_canvas {
border: 1px solid #999;
background-color: #CCF;
width:100%;
height: 500px;
}
Monacaデバッガーでの動作確認
iOSやAndroidのMonacaアプリをダウンロードし、自分のアカウントでログイン。
ログインすると作成したプロジェクトが表示されているので、目的のプロジェクト名をタップ。
現在地の情報を使用するか確認があるので、許可するを選択。
できた!
ビルド
Android用にビルドし、Monacaを使わずに使用出来るものを以下のURLにおいておきました。
もし、実機で試されたいという方がおられましたらご利用下さい。
その他
12月4日に松江オープンソースラボでMonacaを使ったアプリケーション開発のセミナーを予定しています。
興味のある方は以下のURLからお申し込み下さい。