Enviar pesquisa
Carregar
LODチャレンジデー オープンデータを利用したサンプルアプリ
•
Transferir como PPTX, PDF
•
3 gostaram
•
2,562 visualizações
Monaca
Seguir
Tecnologia
Negócios
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 25
Baixar agora
Recomendados
位置情報のシミュレート(と偽造チェックイン)
位置情報のシミュレート(と偽造チェックイン)
孝文 田村
「神戸から日本のバスロケを立て直す」 神戸市Urban Innovation KOBE @Gov Tech Summit in 東京
「神戸から日本のバスロケを立て直す」 神戸市Urban Innovation KOBE @Gov Tech Summit in 東京
Kohei Ota
Yolp30分クッキング 2012北海道
Yolp30分クッキング 2012北海道
Yahoo!デベロッパーネットワーク
YOLP 30分クッキング
YOLP 30分クッキング
Yahoo!デベロッパーネットワーク
YOLP とスマートフォン向け 地図SDKのご紹介
YOLP とスマートフォン向け 地図SDKのご紹介
Yahoo!デベロッパーネットワーク
geohexで作るロケーションヒートマップ
geohexで作るロケーションヒートマップ
Mitsukuni Sato
データ提供パートナーのリソースを利用したクラウド環境でのLODアプリケーション開発
データ提供パートナーのリソースを利用したクラウド環境でのLODアプリケーション開発
Yusuke Komiyama
Dev for Citizen Manual
Dev for Citizen Manual
テスト データ
Recomendados
位置情報のシミュレート(と偽造チェックイン)
位置情報のシミュレート(と偽造チェックイン)
孝文 田村
「神戸から日本のバスロケを立て直す」 神戸市Urban Innovation KOBE @Gov Tech Summit in 東京
「神戸から日本のバスロケを立て直す」 神戸市Urban Innovation KOBE @Gov Tech Summit in 東京
Kohei Ota
Yolp30分クッキング 2012北海道
Yolp30分クッキング 2012北海道
Yahoo!デベロッパーネットワーク
YOLP 30分クッキング
YOLP 30分クッキング
Yahoo!デベロッパーネットワーク
YOLP とスマートフォン向け 地図SDKのご紹介
YOLP とスマートフォン向け 地図SDKのご紹介
Yahoo!デベロッパーネットワーク
geohexで作るロケーションヒートマップ
geohexで作るロケーションヒートマップ
Mitsukuni Sato
データ提供パートナーのリソースを利用したクラウド環境でのLODアプリケーション開発
データ提供パートナーのリソースを利用したクラウド環境でのLODアプリケーション開発
Yusuke Komiyama
Dev for Citizen Manual
Dev for Citizen Manual
テスト データ
SappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudio
Mizumoto Atsushi
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
Hidetaka Okamoto
Google Maps APIを使って、自分好みの地図を作ろう 先生:川村 健一
Google Maps APIを使って、自分好みの地図を作ろう 先生:川村 健一
schoowebcampus
Azureお助けサービス概要
Azureお助けサービス概要
Keiji Kamebuchi
AppPot製品概要
AppPot製品概要
Ryohei Sogo
20150209 甲府-web新世紀2
20150209 甲府-web新世紀2
Taisuke Fukuno
Gdg geo2
Gdg geo2
Kentaro Ishimaru
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
Monaca
Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。
Eiichi Tsuru
APEX Workshop III 日本語版
APEX Workshop III 日本語版
Nakakoshi Yuji
Geo x html5 on MapsAPI three minutes cooking
Geo x html5 on MapsAPI three minutes cooking
Kentaro Ishimaru
Mulvery@沖縄Ruby会議02
Mulvery@沖縄Ruby会議02
Daichi Teruya
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
MasashiOtsuka1
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
Agile Japan 2013 サテライト<長野>事例研究講演資料
Agile Japan 2013 サテライト<長野>事例研究講演資料
株式会社ガリレオ(開発グループ)
関西企業UXランキング
関西企業UXランキング
Rod Izumi
ShareWay 使用説明書
ShareWay 使用説明書
Satoki Ogiso
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
Microsoft
島田商業 12班 掛川市
島田商業 12班 掛川市
Shigeru Suzuki
オープンデータ/Linked Open Data お手軽可視化ツールの紹介~SPARQLでマッシュアップ~
オープンデータ/Linked Open Data お手軽可視化ツールの紹介~SPARQLでマッシュアップ~
uedayou
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
Monaca
展示会出展を成功させるたった一つのこと
展示会出展を成功させるたった一つのこと
Monaca
Mais conteúdo relacionado
Semelhante a LODチャレンジデー オープンデータを利用したサンプルアプリ
SappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudio
Mizumoto Atsushi
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
Hidetaka Okamoto
Google Maps APIを使って、自分好みの地図を作ろう 先生:川村 健一
Google Maps APIを使って、自分好みの地図を作ろう 先生:川村 健一
schoowebcampus
Azureお助けサービス概要
Azureお助けサービス概要
Keiji Kamebuchi
AppPot製品概要
AppPot製品概要
Ryohei Sogo
20150209 甲府-web新世紀2
20150209 甲府-web新世紀2
Taisuke Fukuno
Gdg geo2
Gdg geo2
Kentaro Ishimaru
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
Monaca
Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。
Eiichi Tsuru
APEX Workshop III 日本語版
APEX Workshop III 日本語版
Nakakoshi Yuji
Geo x html5 on MapsAPI three minutes cooking
Geo x html5 on MapsAPI three minutes cooking
Kentaro Ishimaru
Mulvery@沖縄Ruby会議02
Mulvery@沖縄Ruby会議02
Daichi Teruya
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
MasashiOtsuka1
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
Agile Japan 2013 サテライト<長野>事例研究講演資料
Agile Japan 2013 サテライト<長野>事例研究講演資料
株式会社ガリレオ(開発グループ)
関西企業UXランキング
関西企業UXランキング
Rod Izumi
ShareWay 使用説明書
ShareWay 使用説明書
Satoki Ogiso
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
Microsoft
島田商業 12班 掛川市
島田商業 12班 掛川市
Shigeru Suzuki
オープンデータ/Linked Open Data お手軽可視化ツールの紹介~SPARQLでマッシュアップ~
オープンデータ/Linked Open Data お手軽可視化ツールの紹介~SPARQLでマッシュアップ~
uedayou
Semelhante a LODチャレンジデー オープンデータを利用したサンプルアプリ
(20)
SappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudio
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
Google Maps APIを使って、自分好みの地図を作ろう 先生:川村 健一
Google Maps APIを使って、自分好みの地図を作ろう 先生:川村 健一
Azureお助けサービス概要
Azureお助けサービス概要
AppPot製品概要
AppPot製品概要
20150209 甲府-web新世紀2
20150209 甲府-web新世紀2
Gdg geo2
Gdg geo2
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。
APEX Workshop III 日本語版
APEX Workshop III 日本語版
Geo x html5 on MapsAPI three minutes cooking
Geo x html5 on MapsAPI three minutes cooking
Mulvery@沖縄Ruby会議02
Mulvery@沖縄Ruby会議02
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Agile Japan 2013 サテライト<長野>事例研究講演資料
Agile Japan 2013 サテライト<長野>事例研究講演資料
関西企業UXランキング
関西企業UXランキング
ShareWay 使用説明書
ShareWay 使用説明書
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
島田商業 12班 掛川市
島田商業 12班 掛川市
オープンデータ/Linked Open Data お手軽可視化ツールの紹介~SPARQLでマッシュアップ~
オープンデータ/Linked Open Data お手軽可視化ツールの紹介~SPARQLでマッシュアップ~
Mais de Monaca
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
Monaca
展示会出展を成功させるたった一つのこと
展示会出展を成功させるたった一つのこと
Monaca
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
Monaca
LT「料金プラン改定後のMonacaについて」
LT「料金プラン改定後のMonacaについて」
Monaca
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイント
Monaca
US Meetup Tour
US Meetup Tour
Monaca
New things about Cordova 4.0
New things about Cordova 4.0
Monaca
Cordova and PhoneGap Insights
Cordova and PhoneGap Insights
Monaca
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Monaca
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Monaca
How to make Twitter app with PhoneGap/Cordova
How to make Twitter app with PhoneGap/Cordova
Monaca
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Monaca
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
Monaca
第6回LODチャレンジデー Monaca紹介資料
第6回LODチャレンジデー Monaca紹介資料
Monaca
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Monaca
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
Monaca
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
Monaca
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
Monaca
Mais de Monaca
(20)
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
展示会出展を成功させるたった一つのこと
展示会出展を成功させるたった一つのこと
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
LT「料金プラン改定後のMonacaについて」
LT「料金プラン改定後のMonacaについて」
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイント
US Meetup Tour
US Meetup Tour
New things about Cordova 4.0
New things about Cordova 4.0
Cordova and PhoneGap Insights
Cordova and PhoneGap Insights
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
How to make Twitter app with PhoneGap/Cordova
How to make Twitter app with PhoneGap/Cordova
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
第6回LODチャレンジデー Monaca紹介資料
第6回LODチャレンジデー Monaca紹介資料
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
Último
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Último
(10)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LODチャレンジデー オープンデータを利用したサンプルアプリ
1.
第6回LODチャレンジデー モバイルアプリ開発コース アシアル株式会社 URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 1
2.
今回作成するアプリ URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 2
3.
機能一覧 本アプリは、以下の機能を持ちます。 【機能】 • Googleマップと鯖江市のオープンデー タを読み込み、市内のトイレの位置を マーカーで示す。 • トイレのマーカーをタップすると、吹 き出しに詳細情報を表示する。 URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 3
4.
開発環境のセットアップ URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 4
5.
Monacaのアカウント登録 • http://monaca.mobi にアクセス – ここをクリックして、 アカウントを作成 アカウント作成に進んでください。 URL :
http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 5
6.
アカウント情報入力 • アカウント情報入力 – メール受信可能なアドレスを登録して下さい。 URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 6
7.
アカウント仮登録完了 • アカウント仮登録完了 – 一度ダッシュボードという画面に遷移しますが、先程のメールアドレスに確認のメールが届 きます。 URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 7
8.
メールアドレスの確認 • メールアドレスの確認 – 確認メールを受け取りURLにアクセスし、必要事項を入力することで登録完了です。 URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 8
9.
アカウント登録完了 • アカウント登録完了 – – 登録が完了し、ログイン済み状態になります。 以後、ユーザー名とパスワードを入力することでMonacaを利用できます。 URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 9
10.
プロジェクトの作成 1. PCブラウザにてMonacaにロ グインします。ダッシュ ボード(左図)が表示され ます。 2. 「新しいプロジェクト」ボ タンをクリックします。 URL
: http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 10
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.
サンプルプロジェクトのインポート② 下記のとおり情報を入力します。 プロジェクト名:鯖江市トイレ情報 説明:任意 入力が完了したら、「プロジェクトを作成する」をク リックしてください。 プロジェクトを作成したら IDEを起動します URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 12
13.
jQueryプラグインの有効化 • ファイルツリーのpluginsフォルダを右 クリックし、「プラグイン設定」を選択 してください。 • プラグイン設定ダイアログで「jQuery」 をチェックし、「保存する」をクリック してください。 URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 13
14.
Monacaデバッガーのインストール • Google PlayまたはApp Storeで、「monaca」で検索してください。 アイコンはこちらです。 URL
: http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 14
15.
Monacaデバッガーの起動 Monacaデバッガーを起動すると、左のログイン画面が表示 されます。 1. メールアドレスとパスワードを入力してください 2. ログインボタンをタップしてください 正しければ、プロジェクト一覧画面が表示されます。 URL
: http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 15
16.
Monacaデバッガーの使い方 ① プロジェクト更新 実行 • Monacaデバッガーにログインすると、登録されて いるすべてのプロジェクトが表示されます。 • 作成したプロジェクトが見えない場合は、右上の 「更新」ボタンをタップしてください。 • アプリを実行すると、サーバー上のファイルをダ ウンロードします。 URL :
http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 16
17.
Monacaデバッガーの使い方 ② サブメニュー(抜粋) 更新 プロジェクト 一覧に戻る スクリーン ショットを撮る アプリログ JavaScriptのエラーログやデバッグログを表示し ます。
ネットワークインストール(Androidのみ) Monacaでビルドしたアプリを、直接端末にインス トールできます。 同期データの削除 CSSや画像などを変更しても反映されない場合は、 この操作を行います。 サブメニュー にアクセス URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. | 17
18.
サンプルアプリの解説 URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 18
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.
【参考】地図のオプション ズームレベル 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.
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.
鯖江市トイレ情報(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.
鯖江市のトイレ情報を取得する 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.
トイレがある場所にマーカーを表示する 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.
URL : http://www.asial.co.jp/
│ Copyright © 2013 Asial Corporation. All Rights Reserved. | 25
Baixar agora