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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserv...
今回作成するアプリ

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

|

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

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

•

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

URL :...
開発環境のセットアップ

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

|

4
Monacaのアカウント登録
•

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

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

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

URL : http://www.asial.co.jp/ │ Copyr...
アカウント情報入力
•

アカウント情報入力
–

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All R...
アカウント仮登録完了
•

アカウント仮登録完了
–

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

URL : http://www.asial.co.jp/ │ Copyright © 20...
メールアドレスの確認
•

メールアドレスの確認
–

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asia...
アカウント登録完了
•

アカウント登録完了
–
–

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

URL : http://www.asial.co.jp/ │ Co...
プロジェクトの作成
1. PCブラウザにてMonacaにロ
グインします。ダッシュ
ボード(左図)が表示され
ます。
2. 「新しいプロジェクト」ボ
タンをクリックします。

URL : http://www.asial.co.jp/ │ Co...
サンプルプロジェクトのインポート①
「プロジェクトをインポート」を選択し、「URLを指定してインポート」の入力欄に以
下のURLを入力して、最後に「インポート」ボタンを押します。
http://s3.asial.co.jp/~monaca/ev...
サンプルプロジェクトのインポート②
下記のとおり情報を入力します。
プロジェクト名:鯖江市トイレ情報
説明:任意
入力が完了したら、「プロジェクトを作成する」をク
リックしてください。

プロジェクトを作成したら
IDEを起動します
URL :...
jQueryプラグインの有効化
•

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

•

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

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

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

アイコンはこちらです。

URL : http://www.asial.co.jp/ │ Copyright ...
Monacaデバッガーの起動
Monacaデバッガーを起動すると、左のログイン画面が表示
されます。
1. メールアドレスとパスワードを入力してください
2. ログインボタンをタップしてください
正しければ、プロジェクト一覧画面が表示されます。...
Monacaデバッガーの使い方 ①
プロジェクト更新

実行

•

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

•

作成したプロジェクトが見えない場合は、右上の
「更新」ボタンをタップして...
Monacaデバッガーの使い方 ②

サブメニュー(抜粋)

更新

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

 アプリログ
JavaScriptのエラーログやデバッグログを表示し
ます。
 ネットワークインストール(Andr...
サンプルアプリの解説

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

|

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

① 鯖江市の中心地の緯度と経度を
// 鯖江市の地図を表示する
指定
function createMap() {
/...
【参考】地図のオプション
ズームレベル

0

7

18

地図のタイプ

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

HYBRID

TERRAIN

URL : http...
jQueryによるオープンデータの取得
•

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

$.ajax({

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

※今回はX...
鯖江市トイレ情報(XML)のフォーマット
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" xmlns:xsi="http://www.w3.org/2001/XMLSchema...
鯖江市のトイレ情報を取得する
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

// オープンデータとして提供されているトイレ情報を取得する
function getToi...
トイレがある場所にマーカーを表示する
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

86
87
88
89
90

// 各トイレのマーカーを作成する
function createMa...
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved.

|

25
Upcoming SlideShare
Loading in …5
×

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

2,160 views

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,160
On SlideShare
0
From Embeds
0
Number of Embeds
1,101
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. 第6回LODチャレンジデー モバイルアプリ開発コース アシアル株式会社 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 1
  2. 2. 今回作成するアプリ URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 2
  3. 3. 機能一覧 本アプリは、以下の機能を持ちます。 【機能】 • Googleマップと鯖江市のオープンデー タを読み込み、市内のトイレの位置を マーカーで示す。 • トイレのマーカーをタップすると、吹 き出しに詳細情報を表示する。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 3
  4. 4. 開発環境のセットアップ URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 4
  5. 5. Monacaのアカウント登録 • http://monaca.mobi にアクセス – ここをクリックして、 アカウントを作成 アカウント作成に進んでください。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 5
  6. 6. アカウント情報入力 • アカウント情報入力 – メール受信可能なアドレスを登録して下さい。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 6
  7. 7. アカウント仮登録完了 • アカウント仮登録完了 – 一度ダッシュボードという画面に遷移しますが、先程のメールアドレスに確認のメールが届 きます。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 7
  8. 8. メールアドレスの確認 • メールアドレスの確認 – 確認メールを受け取りURLにアクセスし、必要事項を入力することで登録完了です。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 8
  9. 9. アカウント登録完了 • アカウント登録完了 – – 登録が完了し、ログイン済み状態になります。 以後、ユーザー名とパスワードを入力することでMonacaを利用できます。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 9
  10. 10. プロジェクトの作成 1. PCブラウザにてMonacaにロ グインします。ダッシュ ボード(左図)が表示され ます。 2. 「新しいプロジェクト」ボ タンをクリックします。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 10
  11. 11. サンプルプロジェクトのインポート① 「プロジェクトをインポート」を選択し、「URLを指定してインポート」の入力欄に以 下のURLを入力して、最後に「インポート」ボタンを押します。 http://s3.asial.co.jp/~monaca/event/lod/project.zip URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 11
  12. 12. サンプルプロジェクトのインポート② 下記のとおり情報を入力します。 プロジェクト名:鯖江市トイレ情報 説明:任意 入力が完了したら、「プロジェクトを作成する」をク リックしてください。 プロジェクトを作成したら IDEを起動します URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 12
  13. 13. jQueryプラグインの有効化 • ファイルツリーのpluginsフォルダを右 クリックし、「プラグイン設定」を選択 してください。 • プラグイン設定ダイアログで「jQuery」 をチェックし、「保存する」をクリック してください。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 13
  14. 14. Monacaデバッガーのインストール • Google PlayまたはApp Storeで、「monaca」で検索してください。 アイコンはこちらです。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 14
  15. 15. Monacaデバッガーの起動 Monacaデバッガーを起動すると、左のログイン画面が表示 されます。 1. メールアドレスとパスワードを入力してください 2. ログインボタンをタップしてください 正しければ、プロジェクト一覧画面が表示されます。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 15
  16. 16. Monacaデバッガーの使い方 ① プロジェクト更新 実行 • Monacaデバッガーにログインすると、登録されて いるすべてのプロジェクトが表示されます。 • 作成したプロジェクトが見えない場合は、右上の 「更新」ボタンをタップしてください。 • アプリを実行すると、サーバー上のファイルをダ ウンロードします。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 16
  17. 17. Monacaデバッガーの使い方 ② サブメニュー(抜粋) 更新 プロジェクト 一覧に戻る スクリーン ショットを撮る  アプリログ JavaScriptのエラーログやデバッグログを表示し ます。  ネットワークインストール(Androidのみ) Monacaでビルドしたアプリを、直接端末にインス トールできます。  同期データの削除 CSSや画像などを変更しても反映されない場合は、 この操作を行います。 サブメニュー にアクセス URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 17
  18. 18. サンプルアプリの解説 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 18
  19. 19. 地図を表示する 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); // 情報ウィンドウ(吹き出し)を1つ作成しておく infoWindow = new google.maps.InfoWindow(); } ② 鯖江市の地図をGoogleのサーバー から取得し、div要素内に表示 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 19
  20. 20. 【参考】地図のオプション ズームレベル 0 7 18 地図のタイプ zoom: 14, center: latlng, mapTypeId: ROADMAP SATELLITE HYBRID TERRAIN URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 20
  21. 21. jQueryによるオープンデータの取得 • サーバーからデータを取得するには、jQueryのajaxメソッドを利用します。 $.ajax({ url : データが置かれているURL dataType : データのフォーマット ※今回はXMLを利用 }) .done(function(取得したデータ) { // データの取得に成功したときの処理 ※引数としてデータを受け取る }) .fail(function() { // データの取得に失敗したときの処理 }); URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 21
  22. 22. 鯖江市トイレ情報(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> URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 22
  23. 23. 鯖江市のトイレ情報を取得する 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>要素に対して1件ずつ処理 }); をする。$(this)は、現在処理中の1件分の要素 を表す。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 23
  24. 24. トイレがある場所にマーカーを表示する 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で開く }); } URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 24
  25. 25. URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 25

×