LODチャレンジデー　オープンデータを利用したサンプルアプリ

第6回LODチャレンジデー
モバイルアプリ開発コース
アシアル株式会社

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved.

｜

1

今回作成するアプリ


｜

2

機能一覧
本アプリは、以下の機能を持ちます。
【機能】
•

Googleマップと鯖江市のオープンデー
タを読み込み、市内のトイレの位置を
マーカーで示す。

•

トイレのマーカーをタップすると、吹
き出しに詳細情報を表示する。


｜

3

開発環境のセットアップ


｜

4

Monacaのアカウント登録
•

http://monaca.mobi にアクセス
–

ここをクリックして、
アカウントを作成

アカウント作成に進んでください。


｜

5

アカウント情報入力
•

アカウント情報入力
–

メール受信可能なアドレスを登録して下さい。


｜

6

アカウント仮登録完了
•

アカウント仮登録完了
–

一度ダッシュボードという画面に遷移しますが、先程のメールアドレスに確認のメールが届
きます。


｜

7

メールアドレスの確認
•

メールアドレスの確認
–

確認メールを受け取りURLにアクセスし、必要事項を入力することで登録完了です。


｜

8

アカウント登録完了
•

アカウント登録完了
–
–

登録が完了し、ログイン済み状態になります。
以後、ユーザー名とパスワードを入力することでMonacaを利用できます。


｜

9

プロジェクトの作成
1. PCブラウザにてMonacaにロ
グインします。ダッシュ
ボード（左図）が表示され
ます。
2. 「新しいプロジェクト」ボ
タンをクリックします。


｜

10

サンプルプロジェクトのインポート①
「プロジェクトをインポート」を選択し、「URLを指定してインポート」の入力欄に以
下のURLを入力して、最後に「インポート」ボタンを押します。
http://s3.asial.co.jp/~monaca/event/lod/project.zip


｜

11

サンプルプロジェクトのインポート②
下記のとおり情報を入力します。
プロジェクト名：鯖江市トイレ情報
説明：任意
入力が完了したら、「プロジェクトを作成する」をク
リックしてください。

プロジェクトを作成したら
IDEを起動します

｜

12

jQueryプラグインの有効化
•

ファイルツリーのpluginsフォルダを右
クリックし、「プラグイン設定」を選択
してください。

•

プラグイン設定ダイアログで「jQuery」
をチェックし、「保存する」をクリック
してください。


｜

13

Monacaデバッガーのインストール
•

Google PlayまたはApp Storeで、「monaca」で検索してください。

アイコンはこちらです。


｜

14

Monacaデバッガーの起動
Monacaデバッガーを起動すると、左のログイン画面が表示
されます。
1. メールアドレスとパスワードを入力してください
2. ログインボタンをタップしてください
正しければ、プロジェクト一覧画面が表示されます。


｜

15

Monacaデバッガーの使い方 ①
プロジェクト更新

実行

•

Monacaデバッガーにログインすると、登録されて
いるすべてのプロジェクトが表示されます。

•

作成したプロジェクトが見えない場合は、右上の
「更新」ボタンをタップしてください。

•

アプリを実行すると、サーバー上のファイルをダ
ウンロードします。


｜

16

Monacaデバッガーの使い方 ②

サブメニュー（抜粋）

更新

プロジェクト
一覧に戻る
スクリーン
ショットを撮る

 アプリログ
JavaScriptのエラーログやデバッグログを表示し
ます。
 ネットワークインストール（Androidのみ）
Monacaでビルドしたアプリを、直接端末にインス
トールできます。
 同期データの削除
CSSや画像などを変更しても反映されない場合は、
この操作を行います。

サブメニュー
にアクセス

｜

17

サンプルアプリの解説


｜

18

地図を表示する
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

① 鯖江市の中心地の緯度と経度を
// 鯖江市の地図を表示する
指定
function createMap() {
// 鯖江市の緯度経度を元に位置情報オブジェクトを作成する
var latlng=new google.maps.LatLng(35.961555,136.184474);

// 地図のオプション
var mapOption = {
zoom: 14,
// ズームレベル
center:latlng, // 中心地を設定
mapTypeId: google.maps.MapTypeId.ROADMAP // 地図のタイプ
};
// 地図を表示するdiv要素とオプションを引数として、mapオブジェクトを作成
map = new google.maps.Map($("#map_canvas").get(0), mapOption);
// 情報ウィンドウ（吹き出し）を１つ作成しておく
infoWindow = new google.maps.InfoWindow();
}

② 鯖江市の地図をGoogleのサーバー
から取得し、div要素内に表示


｜

19

【参考】地図のオプション
ズームレベル

0

7

18

地図のタイプ

zoom: 14,
center: latlng,
mapTypeId: ROADMAP
SATELLITE

HYBRID

TERRAIN


｜

20

jQueryによるオープンデータの取得
•

サーバーからデータを取得するには、jQueryのajaxメソッドを利用します。

$.ajax({

url : データが置かれているURL
dataType : データのフォーマット

※今回はXMLを利用

})

.done(function(取得したデータ) {
// データの取得に成功したときの処理

※引数としてデータを受け取る

})

.fail(function() {
// データの取得に失敗したときの処理
});

｜

21

鯖江市トイレ情報（XML）のフォーマット
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" xmlns:xsi="http://www.w3.org/2001/XMLSchema…
<toiletinformation>

トイレの件数分繰り返し

<no>番号</no>
<name>トイレがある施設の名称（英語）</name>
<localname>トイレがある施設の名称（日本語）</localname>
<language>jp</language>
<man>男性用トイレの数</man>
<woman>女性用トイレの数</woman>

施設によって存在しない要素もある

<commonuse>男女共用トイレの数</commonuse>

<handicapped>多目的トイレの数</handicapped>
<babybed>赤ちゃんベッドの数</babybed>
<ostomate>オストメイト対応トイレの数</ostomate>
<notuse>使用不可時間帯</notuse>
<latitude>緯度</latitude>
<longitude>経度</longitude>
<url>URL</url>
</toiletinformation>
</dataroot>


｜

22

鯖江市のトイレ情報を取得する
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

// オープンデータとして提供されているトイレ情報を取得する
function getToiletInfo() {
① 鯖江市のオープンデータ
// 鯖江市のトイレ情報（XML）を取得
$.ajax({
url: "http://www3.city.sabae.fukui.jp/xml/toilet/toiletinformation.xml",
dataType: "xml"
})
② 取得したデータ
.done(function(xml) {
// XMLの中からトイレ情報群を取得
var toilets = $(xml).find("toiletinformation");
// 各トイレ1件1件にマーカーを設定
toilets.each(function(){
createMarker($(this));
});

}

③ XMLデータを$()で囲むと、jQueryのメソッド群が
利用できるようになる。findメソッドで<dataroot>要
素内の<toiletinformation>要素を取得している

})
.fail(function() {
④ eachメソッドは、複数の
alert("情報の取得に失敗しました");
<toiletinformation>要素に対して１件ずつ処理
});
をする。$(this)は、現在処理中の１件分の要素
を表す。

｜

23

トイレがある場所にマーカーを表示する
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

86
87
88
89
90

// 各トイレのマーカーを作成する
function createMarker($toilet){
// トイレ情報に含まれる緯度経度を元に位置情報オブジェクトを作成
var latitude = $toilet.find("latitude").text();
① <toiletinformation>の子要素か
var longitude = $toilet.find("longitude").text();
ら、<latitude>要素（緯度）と
var latlng = new google.maps.LatLng(latitude, longitude);
<longitude>要素（経度）を取得
// トイレがある位置にマーカーを表示
var marker = new google.maps.Marker({position:latlng, map:map});

② マーカーを表示

// マーカーがタップされたときの処理
③ 地図上のオブジェクトに対する
google.maps.event.addListener(marker, "click", function(){
イベントの登録
// 吹き出しに表示する内容を設定
var info = $toilet.find("localname").text() + "<br>";
if($toilet.children().is("man")) {
④ <toiletinformation>の子要素
info += "男性用：" + $toilet.find("man").text() + "<br>";
に<man>があったら、という意味
}
～中略～
// 吹き出しを開く
infoWindow.setContent(info);
⑤ setContentで表示内容を
infoWindow.open(map, marker);
セットして、openで開く
});
}

｜

24


｜

25

LODチャレンジデー オープンデータを利用したサンプルアプリ

More Related Content

Similar to LODチャレンジデー オープンデータを利用したサンプルアプリ

More from Monaca