LoginSignup
15
12

More than 5 years have passed since last update.

@mix_dvd(きむら しのぶ)

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

Last updated at Posted at 2016-10-31

はじめに

福井県の公開しているオープンデータの中に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マップ」としました。

スクリーンショット 2016-11-01 4.50.05.png

上記で作成した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アプリをダウンロードし、自分のアカウントでログイン。
ログインすると作成したプロジェクトが表示されているので、目的のプロジェクト名をタップ。

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

IMG_3709のコピー.png

できた！

ビルド

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

その他

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

15
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
12