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

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

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

アシアル株式会社


今回作成するアプリ


機能一覧

本アプリは、以下の機能を持ちます。

【機能】

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

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


開発環境のセットアップ


Monaca のアカウント登録

ここをクリックして、アカウントを作成• http://monaca.mobi にアクセス

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

http://monaca.mobi/


アカウント情報入力

• アカウント情報入力– メール受信可能なアドレスを登録して下さい。


アカウント仮登録完了

• アカウント仮登録完了– 一度ダッシュボードという画面に遷移しますが、先程のメールアドレスに確認のメールが

届きます。


メールアドレスの確認

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


アカウント登録完了

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


プロジェクトの作成

1. PC ブラウザにて Monacaにログインします。ダッシュボード（左図）が表示されます。

2. 「新しいプロジェクト」ボタンをクリックします。


サンプルプロジェクトのインポート①

「プロジェクトをインポート」を選択し、「 URL を指定してインポート」の入力欄に以下の URL を入力して、最後に「インポート」ボタンを押します。

http://s3.asial.co.jp/~monaca/event/lod/project.zip


サンプルプロジェクトのインポート②

下記のとおり情報を入力します。

プロジェクト名：鯖江市トイレ情報説明：任意

入力が完了したら、「プロジェクトを作成する」をクリックしてください。

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


jQuery プラグインの有効化

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

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


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

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

アイコンはこちらです。


Monaca デバッガーの起動

Monaca デバッガーを起動すると、左のログイン画面が表示されます。

1. メールアドレスとパスワードを入力してください

2. ログインボタンをタップしてください

正しければ、プロジェクト一覧画面が表示されます。


Monaca デバッガーの使い方 ①

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

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

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

プロジェクト更新

実行


Monaca デバッガーの使い方 ②

アプリログ JavaScript のエラーログやデバッグログを表示します。

ネットワークインストール（ Android のみ） Monaca でビルドしたアプリを、直接端末にインストールできます。

同期データの削除　 CSS や画像などを変更しても反映されない場合は、この操作を行います。

サブメニュー（抜粋）

更新

プロジェクト一覧に戻る

スクリーンショットを撮

る

サブメニューにアクセス


サンプルアプリの解説


101112131415161718192021222324252627

// 鯖江市の地図を表示する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 要素内に表示


zoom: 14, center: latlng, mapTypeId: ROADMAP

ズームレベル

0 7 18

地図のタイプ

SATELLITE HYBRID TERRAIN

【参考】地図のオプション


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

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

$.ajax({

url : データが置かれている URL

dataType : データのフォーマット　※今回は XML を利用})

.done(function( 取得したデータ ) {

// データの取得に成功したときの処理　※引数としてデータを受け取る})

.fail(function() {

// データの取得に失敗したときの処理});


鯖江市トイレ情報（ 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>

トイレの件数分繰り返し

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


2930313233343536373839404142434445464748

// オープンデータとして提供されているトイレ情報を取得する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));});

}).fail(function() {

alert(" 情報の取得に失敗しました ");});

}

① 鯖江市のオープンデータ

鯖江市のトイレ情報を取得する

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

② 取得したデータ

④ each メソッドは、複数の<toiletinformation> 要素に対して１件ずつ処理をする。 $(this) は、現在処理中の１件分の要素を表す。


5051525354555657585960616263646566

8687888990

// 各トイレのマーカーを作成するfunction createMarker($toilet){

// トイレ情報に含まれる緯度経度を元に位置情報オブジェクトを作成var latitude = $toilet.find("latitude").text();var longitude = $toilet.find("longitude").text();var latlng = new google.maps.LatLng(latitude, 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")) {

info += "男性用： " + $toilet.find("man").text() + "<br>";

}～中略～

// 吹き出しを開くinfoWindow.setContent(info);infoWindow.open(map, marker);

});}

① <toiletinformation> の子要素から、 <latitude> 要素（緯度）と<longitude> 要素（経度）を取得

トイレがある場所にマーカーを表示する

② マーカーを表示

③ 地図上のオブジェクトに対するイベントの登録

④ <toiletinformation> の子要素に <man> があったら、という意味

⑤ setContent で表示内容をセットして、 open で開く

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

Technology

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