オープンデータとMonacaで作るモバイルアプリ「福井県AEDマップ」

# はじめに

福井県の公開しているオープンデータの中にAEDの位置情報があったので、これを使って福井県AEDマップというモバイルアプリケーションを作ってみました。

開発環境はMonacaを用いています。

https://ja.monaca.io/

Monacaはブラウザ上で動作する開発環境(IED)を利用し、HTML5で記述したページをモバイルアプリケーション化することができるcordovaというソフトウェアを使ってモバイルアプリケーションを生成します。

https://cordova.apache.org/

同じようなデータを集めれば他にも色々作れそうですね。

# データの取得

まず、福井県のWebサイトからAED設置場所一覧のデータを入手します。

http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/list_3.html

データ形式はCSVで、場所、所在地、台数、緯度、経度が入っています。

CSVでは使いにくいので、CSVをJSON形式に変換。
以下、変換例を示します。
ちなみに台数は省略しています。

```csv:
施設名,住所,台数,緯度,経度
藤島高等学校,福井市文京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
```

↓

```json:
[
  ["藤島高等学校","福井市文京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マップ」としました。

![スクリーンショット 2016-11-01 4.50.05.png](https://qiita-image-store.s3.amazonaws.com/0/114240/9084a446-b1d4-09e9-ba28-be2b108ea7d5.png)

上記で作成したJSONデータを「www」フォルダにアップロードします。
以降、生成されたファイルの中にある「index.html」を主に編集します。

# index.htmlの編集

## ヘッダーの設定

GoogleMapAPIとjQueryを利用するためにヘッダーへ以下の行を追加。

```html:
    <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の記載

&lt;body>〜&lt;/body>の中身を以下のとおり変更。

```html:
<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)の読込と地図上のマーカ作成

```js:
        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);
                }
            });
        }
```

### 画面サイズの取得と地図サイズの設定

```js:
        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();
        });
```

### 地図の初期化

```js:
        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();
        }
```

### アプリケーションの初期化

```js:
        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全文

```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」に以下を追加。

```css:
#map_canvas {
    border: 1px solid #999;
    background-color: #CCF;
    width:100%;
    height: 500px;
}
```

# Monacaデバッガーでの動作確認

iOSやAndroidのMonacaアプリをダウンロードし、自分のアカウントでログイン。
ログインすると作成したプロジェクトが表示されているので、目的のプロジェクト名をタップ。

現在地の情報を使用するか確認があるので、許可するを選択。

![IMG_3709のコピー.png](https://qiita-image-store.s3.amazonaws.com/0/114240/1577065e-298f-6bdf-b59f-c0000e492fd8.png)

できた！

# ビルド

Android用にビルドし、Monacaを使わずに使用出来るものを以下のURLにおいておきました。
もし、実機で試されたいという方がおられましたらご利用下さい。

http://blueomega.jp/20161107163541-android-debug.apk

# その他

12月4日に松江オープンソースラボでMonacaを使ったアプリケーション開発のセミナーを予定しています。
興味のある方は以下のURLからお申し込み下さい。

http://connpass.com/event/42797/