SlideShare ist ein Scribd-Unternehmen logo
1 von 62
Downloaden Sie, um offline zu lesen
OSMを使ったスマホ&Web
      開発入門
      Taro Matsuzawa aka. btm
      Georepublic Japan
      @smellman / id:smellman




13年2月25日月曜日
はじめに
         この資料はハンズオンとして利用できるように作成
         をしています。snippetも公開していますので、必要
         に応じてコピペしてください。

         https://hackpad.com/OSMJa-handon-gc49hgxnw3g
         コードはいつかgithubにアップします

         https://github.com/smellman



13年2月25日月曜日
アジェンダ


         自己紹介

         Ruby on Rails+Leaflet.js
         Android+osmdroid




13年2月25日月曜日
自己紹介

         もじら組元組長

         Firefox Hacks Rebooted、Firefox 3 Hacks(オライリ
         ー・ジャパン)著者の一人

         日本UNIXユーザ会幹事

         破滅



13年2月25日月曜日
職歴(正社員)

         株式会社アーツテック
              プログラマ&インフラ
         株式会社KBMJ(現:株式会社アピリッツ)
              プログラマ&インフラ
              オープンソースECパッケージ エレコマ担当
               OSCでもブース出してるよ!



13年2月25日月曜日
現在


         地理情報系エンジニア見習い

              レベルとしてはたまねぎ剣士みたい




13年2月25日月曜日
OSMでお仕事

         伊豆大島ジオパーク・データミュージアム

              http://oshima-gdm.jp
              Localwiki(http://localwiki.org)をカスタマイズ

                標準のCloudmadeではなくOpenStreetMapを採用

         伊豆大島でマッピングパーティーも開催



13年2月25日月曜日
WebでOpenStreetMap




13年2月25日月曜日
Webで使う場合

         WebでOpenStreetMapを組み込む場合は2つのライブ
         ラリが代表的

              OpenLayers.js
              Leaflet.js




13年2月25日月曜日
OpenLayers.js


         2006年に初回リリース

         タイルの設定がほとんど    ってる

         でかい!(740KB)




13年2月25日月曜日
Leaflet.js
         割と最近

         タイルの設定を自分で記述する

         openstreetmap.orgで採用

              OpenLayers.jsから入れかえしたみたい

         軽量(28KB)



13年2月25日月曜日
今回はLeaflet.jsを


         Leaflet.jsの方がシンプルに使える

         案件で使ったことがあるから




13年2月25日月曜日
RoR+Leaflet.js


         今回はgem 'leaflet-rails'は使わない

              よくわからないけどエラーになる

              よくわからないけどFolkがありすぎ




13年2月25日月曜日
必要なもの

         ruby(1.9.3推奨)

              http://www.ruby-lang.org/ja/downloads/
         leaflet.js 0.5.1
              http://leafletjs.com/download.html




13年2月25日月曜日
Railsのインストール



         $	 gem	 install	 rails




13年2月25日月曜日
アプリ作成


         $	 rails	 new	 mapapp
         $	 cd	 mapapp/




13年2月25日月曜日
起動確認



         $	 bundle	 exec	 rails	 s




13年2月25日月曜日
haml

         $	 emacs	 Gemfile
         ...
         gem	 'haml'
         gem	 'haml-rails'
         $	 bundle	 install


13年2月25日月曜日
haml
         $	 mv	 app/views/layouts/application.html.erb	 app/views/layouts/
         application.html.haml
         $	 emacs	 app/views/layouts/application.html.haml
         !!!
         %html
         	 	 %head
         	 	 	 	 %title	 Mapapp
         	 	 	 	 =	 stylesheet_link_tag	 "application",	 :media	 =>	 "all"
         	 	 	 	 =	 javascript_include_tag	 "application"
         	 	 	 	 =	 csrf_meta_tags
         %body
         	 	 =	 yield




13年2月25日月曜日
scaffold
         $	 bundle	 exec	 rails	 generate	 
         scaffold	 map	 title:string	 
         latitude:float	 longitude:float


         $	 bundle	 exec	 rake	 db:migrate



13年2月25日月曜日
after scaffold




13年2月25日月曜日
after scaffold




13年2月25日月曜日
after scaffold




13年2月25日月曜日
after scaffold




13年2月25日月曜日
after scaffold




13年2月25日月曜日
地図を追加しよう

         座標を直接入力するとかダサいし馬鹿にされる

         編集画面で地図で選択できるとクールじゃね

         詳細画面で地図が出てくるとクールじゃね

         一覧画面でポイントの一覧が出てくるとクルーじゃね




13年2月25日月曜日
leaflet.jsを導入
         $	 cp	 ~/Downloads/Leaflet/dist/leaflet.js	 vendor/
         assets/javascripts/
         $	 cp	 ~/Downloads/Leaflet/dist/leaflet.css	 vendor/
         assets/stylesheets/
         $	 cp	 ~/Downloads/Leaflet/dist/leaflet.ie.css	 
         vendor/assets/stylesheets/
         $	 mkdir	 vendor/assets/images
         $	 cp	 ~/Downloads/Leaflet/dist/images/*	 vendor/
         assets/images/
         $	 bundle	 exec	 rails	 s


13年2月25日月曜日
application.js
         $	 emacs	 app/assets/javascripts/
         application.js
         ...
         //=	 require	 jquery
         //=	 require	 jquery_ujs
         //=	 require	 leaflet
         //=	 require_tree	 .

13年2月25日月曜日
application.css
         $	 emacs	 app/assets/stylesheets/
         application.css
         ...
         	 *=	 require_self
         	 *=	 require	 leaflet
         	 *=	 require_tree	 .
         	 */

13年2月25日月曜日
application.html.haml
         $	 emacs	 app/views/layouts/application.html.haml
         ...
         	 	 	 	 %title	 Mapapp
         	 	 	 	 =	 stylesheet_link_tag	 "application",	 :media	 =>	 "all"
         	 	 	 	 /[if	 lte	 IE	 8]
         	 	 	 	 	 	 =	 stylesheet_link_tag	 "leaflet.ie"
         	 	 	 	 =	 javascript_include_tag	 "application"
         	 	 	 	 =	 csrf_meta_tags
         ...




13年2月25日月曜日
取り込み確認




13年2月25日月曜日
地図表示
         $	 emacs	 app/views/maps/_form.html.haml
         ...
         %div#map
         :css
         	 	 #map	 {	 height:	 400px;	 }
         :javascript
         	 	 L.Icon.Default.imagePath	 =	 "/assets";
         	 	 var	 map	 =	 L.map('map').setView([35.64483,	 139.40881],	 17);
         	 	 var	 osmUrl	 =	 "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
         	 	 var	 osmAttrib	 =	 "Map	 data	 ©	 OpenStreetMap	 contributors";
         	 	 L.tileLayer(osmUrl,	 {
         	 	 	 	 attribution:	 osmAttrib,
         	 	 	 	 maxZoom:	 20,
         	 	 }).addTo(map);


13年2月25日月曜日
edit




13年2月25日月曜日
クリック→座標セット
         $	 emacs	 app/views/maps/_form.html.haml
         ...(続き)
         	 	 var	 marker	 =	 L.marker([35.64483,	 
         139.40881]).addTo(map);
         	 	 map.on("click",	 function(e)	 {
         	 	 	 	 marker.setLatLng(e.latlng);
         	 	 	 	 $("#map_latitude").val(e.latlng.lat);
         	 	 	 	 $("#map_longitude").val(e.latlng.lng);
         	 	 });


13年2月25日月曜日
edit




13年2月25日月曜日
デフォルト座標
         $	 emacs	 app/views/maps/_form.html.haml
         ...
         :javascript
         	 	 L.Icon.Default.imagePath	 =	 "/assets";
         	 	 var	 lat	 =	 $("#map_latitude").val()?	 $("#map_latitude").val()	 :	 35.64483;
         	 	 var	 lng	 =	 $("#map_longitude").val()?	 $("#map_longitude").val()	 :	 139.40881;
         	 	 var	 map	 =	 L.map('map').setView([lat,	 lng],	 17);
         	 	 var	 osmUrl	 =	 "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";


         ...


         	 	 }).addTo(map);
         	 	 var	 marker	 =	 L.marker([lat,	 lng]).addTo(map);
         	 	 map.on("click",	 function(e)	 {
         ...



13年2月25日月曜日
edit




13年2月25日月曜日
show
         $	 emacs	 app/views/maps/show.html.haml
         ...
         %div#map
         :css
         	 	 #map	 {	 height:	 400px;	 }
         :javascript
         	 	 L.Icon.Default.imagePath	 =	 "/assets";
         	 	 var	 lat	 =	 #{@map.latitude}
         	 	 var	 lng	 =	 #{@map.longitude}
         	 	 var	 map	 =	 L.map('map').setView([lat,	 lng],	 17);
         	 	 var	 osmUrl	 =	 "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
         	 	 var	 osmAttrib	 =	 "Map	 data	 ©	 OpenStreetMap	 contributors";
         	 	 L.tileLayer(osmUrl,	 {
         	 	 	 	 attribution:	 osmAttrib,
         	 	 	 	 maxZoom:	 20,
         	 	 }).addTo(map);
         	 	 var	 marker	 =	 L.marker([lat,	 lng]).addTo(map);



13年2月25日月曜日
show




13年2月25日月曜日
index
         $	 emacs	 app/views/maps/index.html.haml
         ...
         	 	 L.Icon.Default.imagePath	 =	 "/assets";
         	 	 var	 lat	 =	 35.64483;
         	 	 var	 lng	 =	 139.40881;
         	 	 var	 map	 =	 L.map('map').setView([lat,	 lng],	 17);
         	 	 var	 osmUrl	 =	 "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
         	 	 var	 osmAttrib	 =	 "Map	 data	 ©	 OpenStreetMap	 contributors";
         	 	 L.tileLayer(osmUrl,	 {
         	 	 	 	 attribution:	 osmAttrib,
         	 	 	 	 maxZoom:	 20,
         	 	 }).addTo(map);



13年2月25日月曜日
index
         $	 emacs	 app/views/maps/index.html.haml
         ...
         	 	 $.ajax({
         	 	 	 	 type:	 "GET",
         	 	 	 	 url:	 "/maps.json",
         	 	 	 	 dataType:	 "json",
         	 	 	 	 success:	 function(maps)	 {
         	 	 	 	 	 	 for(var	 i	 =	 0;	 i	 <	 maps.length;	 i++)	 {
         	 	 	 	 	 	 	 	 var	 m	 =	 maps[i];
         	 	 	 	 	 	 	 	 var	 marker	 =	 L.marker([m.latitude,	 m.longitude]).addTo(map);
         	 	 	 	 	 	 	 	 marker.bindPopup(m.title);
         	 	 	 	 	 	 }
         	 	 	 	 }
         	 	 });



13年2月25日月曜日
index




13年2月25日月曜日
応用例(localwikiから取得)




13年2月25日月曜日
AndroidでOSM




13年2月25日月曜日
Android向けFramework


         Mapsforge
              オフライン向け

         osmdroid




13年2月25日月曜日
今回はosmdroidを採用

         MapViewっぽく使えるらしい

              僕はMapView使ったことないけど

         時間がなかった

              調査開始時刻 2013/02/22 AM2:48




13年2月25日月曜日
作るアプリ

         適当な場所マーカーを置く

         マーカーをタップしたらなんか出る

              想像力がないです

              普通だったらjsonからゲットしてくればいいと思う
              よ



13年2月25日月曜日
アプリの作成


         Eclipseでアプリを作成

              今回はOSMSampleという名前で




13年2月25日月曜日
13年2月25日月曜日
jarをゲット

         osmdroid-android-3.0.8.jar
              http://code.google.com/p/osmdroid/downloads/list
         slf4j-android-1.5.8.jar
              http://www.slf4j.org/android/
         libs以下にコピーしてプロパティでjarを追加




13年2月25日月曜日
13年2月25日月曜日
13年2月25日月曜日
13年2月25日月曜日
AndroidManifest.xml
         <uses-permission	 
         android:name="android.permission.ACCESS_COARSE_LOCATION"/>	 
         <uses-permission	 
         android:name="android.permission.ACCESS_FINE_LOCATION"/>
         <uses-permission	 
         android:name="android.permission.ACCESS_WIFI_STATE"	 />
         <uses-permission	 
         android:name="android.permission.ACCESS_NETWORK_STATE"	 />
         <uses-permission	 android:name="android.permission.INTERNET"	 />
         <uses-permission	 
         android:name="android.permission.WRITE_EXTERNAL_STORAGE"	 />
         <uses-feature	 android:name="android.hardware.location.network"	 />
         <uses-feature	 android:name="android.hardware.location.gps"	 />
         <uses-feature	 android:name="android.hardware.wifi"	 />

13年2月25日月曜日
MainActivity.java(1)
         import	 org.osmdroid.util.GeoPoint;
         import	 org.osmdroid.views.MapView;
         ...
         public	 class	 MainActivity	 extends	 Activity	 {


         	           private	 MapView	 mapView;
         	 
         	           @Override
         	           protected	 void	 onCreate(Bundle	 savedInstanceState)	 {
         	           	 	 super.onCreate(savedInstanceState);
         	 	 	 	 	 	 	 	 this.mapView	 =	 new	 MapView(this,	 256);
         	 	 	 	 	 	 	 	 this.mapView.setClickable(true);
         	 	 	 	 	 	 	 	 this.mapView.setBuiltInZoomControls(true);
         	 	 	 	 	 	 	 	 this.mapView.getController().setZoom(17);
         	 	 	 	 	 	 	 	 this.mapView.getController().setCenter(new	 GeoPoint(35.64483,	 139.40881));	 
         	 	 	 	 	 	 	 	 setContentView(mapView);
         	 	 	 	 }



13年2月25日月曜日
MainActivity.java(2)
         import	 org.osmdroid.DefaultResourceProxyImpl;
         import	 org.osmdroid.ResourceProxy;
         import	 org.osmdroid.views.overlay.ItemizedIconOverlay;
         import	 org.osmdroid.views.overlay.OverlayItem;
         ...
         	 	 	 	 private	 ItemizedIconOverlay<OverlayItem>	 myLocationOverlay;
         ...	 onCreate
         	 	 	 	 	 	 	 	 GeoPoint	 overlayPoint	 =	 new	 GeoPoint(35.64483,	 139.40881);
         	 	 	 	 	 	 	 	 ArrayList<OverlayItem>	 overlays	 =	 new	 ArrayList<OverlayItem>();
         	 	 	 	 	 	 	 	 overlays.add(new	 OverlayItem("明星大学",	 "OSCの会場だよ",	 overlayPoint));
         	 	 	 	 	 	 	 	 ResourceProxy	 resourceProxy	 =	 new	 
         DefaultResourceProxyImpl(getApplicationContext());
         	 	 	 	 	 	 	 	 this.myLocationOverlay	 =	 new	 ItemizedIconOverlay<OverlayItem>(overlays,	 null,	 
         resourceProxy);
         	 	 	 	 	 	 	 	 this.mapView.getOverlays().add(this.myLocationOverlay);
         	 	 	 	 	 	 	 	 this.mapView.invalidate();




13年2月25日月曜日
MainActivity.java(3)
         	    @SuppressLint("ShowToast")
         	  public	 boolean	 onSingleTapUpHelper(int	 i,	 
         OverlayItem	 item)	 {
         	    	  StringBuffer	 bf	 =	 new	 StringBuffer();
         	    	  bf.append("Tap:	 ").append(item.mTitle)
         	 	 	 	 	 	 	 .append(":").append(item.mDescription);
         	  	  Toast.makeText(getApplicationContext(),	 
         bf.toString(),	 Toast.LENGTH_LONG).show();
         	    	  return	 true;
         	    }


13年2月25日月曜日
MainActivity.java(4)
         	 	 	 	 	 	 	 OnItemGestureListener<OverlayItem>	 gesture	 =	 new	 
         ItemizedIconOverlay.OnItemGestureListener<OverlayItem>()	 {
         	    	    	    @Override
         	    	    	    public	 boolean	 onItemLongPress(int	 arg0,	 OverlayItem	 arg1)	 {
         	    	    	    	      return	 true;
         	    	    	    }
         	    	    	    @Override
         	    	    	    public	 boolean	 onItemSingleTapUp(int	 arg0,	 OverlayItem	 arg1)	 
         {
         	    	    	    	      return	 onSingleTapUpHelper(arg0,	 arg1);
         	    	    	    }	 	 	 	 	 	 	 	 	 
         	    	    };
         	 	 	 	 	 	 	 	 this.myLocationOverlay	 =	 new	 
         ItemizedIconOverlay<OverlayItem>(overlays,	 gesture,	 resourceProxy);



13年2月25日月曜日
13年2月25日月曜日
osmdroidの注意点

         配布サイトのwikiの情報が古すぎる

              当てにしてはいけない

         情報を調べるコツは "osmdroid tutorial"とかで検索

              それでもバージョン依存の話があるので注意




13年2月25日月曜日
おまけ: iOSでOSM




13年2月25日月曜日
route-me


         古くからあるiOS向けSlippy Map

         機能はかなり充実してる

         iOSでOSM使うならこのライブラリで決まり




13年2月25日月曜日

Weitere ähnliche Inhalte

Was ist angesagt?

[よくわかるクラウドデータベース] CassandraからAmazon DynamoDBへの移行事例
[よくわかるクラウドデータベース] CassandraからAmazon DynamoDBへの移行事例[よくわかるクラウドデータベース] CassandraからAmazon DynamoDBへの移行事例
[よくわかるクラウドデータベース] CassandraからAmazon DynamoDBへの移行事例
Amazon Web Services Japan
 
AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05
AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05
AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05
都元ダイスケ Miyamoto
 

Was ist angesagt? (20)

MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...
MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...
MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...
 
Azure DevOpsとセキュリティ
Azure DevOpsとセキュリティAzure DevOpsとセキュリティ
Azure DevOpsとセキュリティ
 
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみようドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
 
[Cloud OnAir] BigQuery の仕組みからベストプラクティスまでのご紹介 2018年9月6日 放送
[Cloud OnAir] BigQuery の仕組みからベストプラクティスまでのご紹介 2018年9月6日 放送[Cloud OnAir] BigQuery の仕組みからベストプラクティスまでのご紹介 2018年9月6日 放送
[Cloud OnAir] BigQuery の仕組みからベストプラクティスまでのご紹介 2018年9月6日 放送
 
Google Cloud ベストプラクティス:Google BigQuery 編 - 01 : BigQuery とは?
Google Cloud ベストプラクティス:Google BigQuery 編 - 01 : BigQuery とは?Google Cloud ベストプラクティス:Google BigQuery 編 - 01 : BigQuery とは?
Google Cloud ベストプラクティス:Google BigQuery 編 - 01 : BigQuery とは?
 
[よくわかるクラウドデータベース] CassandraからAmazon DynamoDBへの移行事例
[よくわかるクラウドデータベース] CassandraからAmazon DynamoDBへの移行事例[よくわかるクラウドデータベース] CassandraからAmazon DynamoDBへの移行事例
[よくわかるクラウドデータベース] CassandraからAmazon DynamoDBへの移行事例
 
Google Cloud Dataflow を理解する - #bq_sushi
Google Cloud Dataflow を理解する - #bq_sushiGoogle Cloud Dataflow を理解する - #bq_sushi
Google Cloud Dataflow を理解する - #bq_sushi
 
NTTデータ流 Hadoop活用のすすめ ~インフラ構築・運用の勘所~
NTTデータ流 Hadoop活用のすすめ ~インフラ構築・運用の勘所~NTTデータ流 Hadoop活用のすすめ ~インフラ構築・運用の勘所~
NTTデータ流 Hadoop活用のすすめ ~インフラ構築・運用の勘所~
 
PostgreSQL 15 開発最新情報
PostgreSQL 15 開発最新情報PostgreSQL 15 開発最新情報
PostgreSQL 15 開発最新情報
 
例外設計における大罪
例外設計における大罪例外設計における大罪
例外設計における大罪
 
20190424 AWS Black Belt Online Seminar Amazon Aurora MySQL
20190424 AWS Black Belt Online Seminar Amazon Aurora MySQL20190424 AWS Black Belt Online Seminar Amazon Aurora MySQL
20190424 AWS Black Belt Online Seminar Amazon Aurora MySQL
 
BlazorにSwaggerを導入してみよう
BlazorにSwaggerを導入してみようBlazorにSwaggerを導入してみよう
BlazorにSwaggerを導入してみよう
 
AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05
AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05
AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05
 
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティスAWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
 
20190806 AWS Black Belt Online Seminar AWS Glue
20190806 AWS Black Belt Online Seminar AWS Glue20190806 AWS Black Belt Online Seminar AWS Glue
20190806 AWS Black Belt Online Seminar AWS Glue
 
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
 
事例から見る規模別クラウド・データベースの選び方 (Oracle Database) (Oracle Cloudウェビナーシリーズ: 2021年6月30日)
事例から見る規模別クラウド・データベースの選び方 (Oracle Database) (Oracle Cloudウェビナーシリーズ: 2021年6月30日)事例から見る規模別クラウド・データベースの選び方 (Oracle Database) (Oracle Cloudウェビナーシリーズ: 2021年6月30日)
事例から見る規模別クラウド・データベースの選び方 (Oracle Database) (Oracle Cloudウェビナーシリーズ: 2021年6月30日)
 
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
 
HDFS vs. MapR Filesystem
HDFS vs. MapR FilesystemHDFS vs. MapR Filesystem
HDFS vs. MapR Filesystem
 
AWS Black Belt Tech シリーズ 2015 - Amazon Redshift
AWS Black Belt Tech シリーズ 2015 - Amazon RedshiftAWS Black Belt Tech シリーズ 2015 - Amazon Redshift
AWS Black Belt Tech シリーズ 2015 - Amazon Redshift
 

Ähnlich wie OSMを使ったスマホ&Web開発入門

Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶSinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶ
Hiroshi Oyamada
 
USP 友の会 LT 資料 20130413
USP 友の会 LT 資料 20130413USP 友の会 LT 資料 20130413
USP 友の会 LT 資料 20130413
博文 斉藤
 
Scala2.10.x bytecode problems in Android
Scala2.10.x bytecode problems in AndroidScala2.10.x bytecode problems in Android
Scala2.10.x bytecode problems in Android
Taisuke Oe
 
Sugarcubeをはじめよう
SugarcubeをはじめようSugarcubeをはじめよう
Sugarcubeをはじめよう
Eihiro Saishu
 
ScalaでAndroidアプリ開発
ScalaでAndroidアプリ開発ScalaでAndroidアプリ開発
ScalaでAndroidアプリ開発
papamitra
 
Webサイト・フロントエンドの高速化とgrunt.jsについて
Webサイト・フロントエンドの高速化とgrunt.jsについてWebサイト・フロントエンドの高速化とgrunt.jsについて
Webサイト・フロントエンドの高速化とgrunt.jsについて
Tomo Fujita
 
大(中)規模Java script開発について
大(中)規模Java script開発について大(中)規模Java script開発について
大(中)規模Java script開発について
Yuki Tanaka
 

Ähnlich wie OSMを使ったスマホ&Web開発入門 (20)

SparqlEPCUが提供するlod開発プラットフォーム
SparqlEPCUが提供するlod開発プラットフォームSparqlEPCUが提供するlod開発プラットフォーム
SparqlEPCUが提供するlod開発プラットフォーム
 
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザインスマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
 
Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶSinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶ
 
USP 友の会 LT 資料 20130413
USP 友の会 LT 資料 20130413USP 友の会 LT 資料 20130413
USP 友の会 LT 資料 20130413
 
Scala2.10.x bytecode problems in Android
Scala2.10.x bytecode problems in AndroidScala2.10.x bytecode problems in Android
Scala2.10.x bytecode problems in Android
 
Sugarcubeをはじめよう
SugarcubeをはじめようSugarcubeをはじめよう
Sugarcubeをはじめよう
 
Gdg geo2
Gdg geo2Gdg geo2
Gdg geo2
 
three.js はじめましょ
three.js はじめましょthree.js はじめましょ
three.js はじめましょ
 
Express Web Application Framework
Express Web Application FrameworkExpress Web Application Framework
Express Web Application Framework
 
ScalaでAndroidアプリ開発
ScalaでAndroidアプリ開発ScalaでAndroidアプリ開発
ScalaでAndroidアプリ開発
 
Webサイト・フロントエンドの高速化とgrunt.jsについて
Webサイト・フロントエンドの高速化とgrunt.jsについてWebサイト・フロントエンドの高速化とgrunt.jsについて
Webサイト・フロントエンドの高速化とgrunt.jsについて
 
Rが苦手な人にもRを使って頂くために~RcommanderとRook~
Rが苦手な人にもRを使って頂くために~RcommanderとRook~Rが苦手な人にもRを使って頂くために~RcommanderとRook~
Rが苦手な人にもRを使って頂くために~RcommanderとRook~
 
Koa.js_エンジニア勉強会20140328
Koa.js_エンジニア勉強会20140328 Koa.js_エンジニア勉強会20140328
Koa.js_エンジニア勉強会20140328
 
Lispとは何なのか - 同図像性がもたらす力とその利用法
Lispとは何なのか - 同図像性がもたらす力とその利用法Lispとは何なのか - 同図像性がもたらす力とその利用法
Lispとは何なのか - 同図像性がもたらす力とその利用法
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
 
20130126 OpenData and Android
20130126 OpenData and Android20130126 OpenData and Android
20130126 OpenData and Android
 
SappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudioSappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudio
 
RでつくるWebアプリ~rApache編~
RでつくるWebアプリ~rApache編~RでつくるWebアプリ~rApache編~
RでつくるWebアプリ~rApache編~
 
大(中)規模Java script開発について
大(中)規模Java script開発について大(中)規模Java script開発について
大(中)規模Java script開発について
 
JavaScriptをまじめに考えました+
JavaScriptをまじめに考えました+JavaScriptをまじめに考えました+
JavaScriptをまじめに考えました+
 

Mehr von Taro Matsuzawa

スマートフォン勉強会@関東 #11 LT 5分で語る SQLite暗号化
スマートフォン勉強会@関東 #11 LT 5分で語る SQLite暗号化スマートフォン勉強会@関東 #11 LT 5分で語る SQLite暗号化
スマートフォン勉強会@関東 #11 LT 5分で語る SQLite暗号化
Taro Matsuzawa
 
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみたスマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
Taro Matsuzawa
 
ベトナムにRoRを教えに行ったら大変なお土産をもらったでござる
ベトナムにRoRを教えに行ったら大変なお土産をもらったでござるベトナムにRoRを教えに行ったら大変なお土産をもらったでござる
ベトナムにRoRを教えに行ったら大変なお土産をもらったでござる
Taro Matsuzawa
 
Mozilla コアハッカー育成計画(PDF)
Mozilla コアハッカー育成計画(PDF)Mozilla コアハッカー育成計画(PDF)
Mozilla コアハッカー育成計画(PDF)
Taro Matsuzawa
 
Mozilla コアハッカー育成計画
Mozilla コアハッカー育成計画Mozilla コアハッカー育成計画
Mozilla コアハッカー育成計画
Taro Matsuzawa
 

Mehr von Taro Matsuzawa (16)

タイルの話
タイルの話タイルの話
タイルの話
 
地球地図を利用した地図タイルの作成 - FOSS4G TOKYO 2014 全体セッション2
地球地図を利用した地図タイルの作成 - FOSS4G TOKYO 2014 全体セッション2地球地図を利用した地図タイルの作成 - FOSS4G TOKYO 2014 全体セッション2
地球地図を利用した地図タイルの作成 - FOSS4G TOKYO 2014 全体セッション2
 
Couchbase hackaton pomo
Couchbase hackaton pomoCouchbase hackaton pomo
Couchbase hackaton pomo
 
11月のささみ: pgRoutingって何?
11月のささみ: pgRoutingって何?11月のささみ: pgRoutingって何?
11月のささみ: pgRoutingって何?
 
ゆるふわLinux-HA 〜PostgreSQL編〜
ゆるふわLinux-HA 〜PostgreSQL編〜ゆるふわLinux-HA 〜PostgreSQL編〜
ゆるふわLinux-HA 〜PostgreSQL編〜
 
AFNetworking使ってみた
AFNetworking使ってみたAFNetworking使ってみた
AFNetworking使ってみた
 
スマホ開発者も使えるWireshark
スマホ開発者も使えるWiresharkスマホ開発者も使えるWireshark
スマホ開発者も使えるWireshark
 
来年のLLeventのお知らせ @ OSC2011 Tokyo/Fall
来年のLLeventのお知らせ @ OSC2011 Tokyo/Fall来年のLLeventのお知らせ @ OSC2011 Tokyo/Fall
来年のLLeventのお知らせ @ OSC2011 Tokyo/Fall
 
スマートフォン勉強会@関東 #11 LT 5分で語る SQLite暗号化
スマートフォン勉強会@関東 #11 LT 5分で語る SQLite暗号化スマートフォン勉強会@関東 #11 LT 5分で語る SQLite暗号化
スマートフォン勉強会@関東 #11 LT 5分で語る SQLite暗号化
 
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみたスマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
 
ベトナムにRoRを教えに行ったら大変なお土産をもらったでござる
ベトナムにRoRを教えに行ったら大変なお土産をもらったでござるベトナムにRoRを教えに行ったら大変なお土産をもらったでござる
ベトナムにRoRを教えに行ったら大変なお土産をもらったでござる
 
デバッガを使おう@ブラウザ勉強会#1
デバッガを使おう@ブラウザ勉強会#1デバッガを使おう@ブラウザ勉強会#1
デバッガを使おう@ブラウザ勉強会#1
 
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
 
デコメを送る
デコメを送るデコメを送る
デコメを送る
 
Mozilla コアハッカー育成計画(PDF)
Mozilla コアハッカー育成計画(PDF)Mozilla コアハッカー育成計画(PDF)
Mozilla コアハッカー育成計画(PDF)
 
Mozilla コアハッカー育成計画
Mozilla コアハッカー育成計画Mozilla コアハッカー育成計画
Mozilla コアハッカー育成計画
 

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 

OSMを使ったスマホ&Web開発入門

  • 1. OSMを使ったスマホ&Web 開発入門 Taro Matsuzawa aka. btm Georepublic Japan @smellman / id:smellman 13年2月25日月曜日
  • 2. はじめに この資料はハンズオンとして利用できるように作成 をしています。snippetも公開していますので、必要 に応じてコピペしてください。 https://hackpad.com/OSMJa-handon-gc49hgxnw3g コードはいつかgithubにアップします https://github.com/smellman 13年2月25日月曜日
  • 3. アジェンダ 自己紹介 Ruby on Rails+Leaflet.js Android+osmdroid 13年2月25日月曜日
  • 4. 自己紹介 もじら組元組長 Firefox Hacks Rebooted、Firefox 3 Hacks(オライリ ー・ジャパン)著者の一人 日本UNIXユーザ会幹事 破滅 13年2月25日月曜日
  • 5. 職歴(正社員) 株式会社アーツテック プログラマ&インフラ 株式会社KBMJ(現:株式会社アピリッツ) プログラマ&インフラ オープンソースECパッケージ エレコマ担当 OSCでもブース出してるよ! 13年2月25日月曜日
  • 6. 現在 地理情報系エンジニア見習い レベルとしてはたまねぎ剣士みたい 13年2月25日月曜日
  • 7. OSMでお仕事 伊豆大島ジオパーク・データミュージアム http://oshima-gdm.jp Localwiki(http://localwiki.org)をカスタマイズ 標準のCloudmadeではなくOpenStreetMapを採用 伊豆大島でマッピングパーティーも開催 13年2月25日月曜日
  • 9. Webで使う場合 WebでOpenStreetMapを組み込む場合は2つのライブ ラリが代表的 OpenLayers.js Leaflet.js 13年2月25日月曜日
  • 10. OpenLayers.js 2006年に初回リリース タイルの設定がほとんど ってる でかい!(740KB) 13年2月25日月曜日
  • 11. Leaflet.js 割と最近 タイルの設定を自分で記述する openstreetmap.orgで採用 OpenLayers.jsから入れかえしたみたい 軽量(28KB) 13年2月25日月曜日
  • 12. 今回はLeaflet.jsを Leaflet.jsの方がシンプルに使える 案件で使ったことがあるから 13年2月25日月曜日
  • 13. RoR+Leaflet.js 今回はgem 'leaflet-rails'は使わない よくわからないけどエラーになる よくわからないけどFolkがありすぎ 13年2月25日月曜日
  • 14. 必要なもの ruby(1.9.3推奨) http://www.ruby-lang.org/ja/downloads/ leaflet.js 0.5.1 http://leafletjs.com/download.html 13年2月25日月曜日
  • 15. Railsのインストール $ gem install rails 13年2月25日月曜日
  • 16. アプリ作成 $ rails new mapapp $ cd mapapp/ 13年2月25日月曜日
  • 17. 起動確認 $ bundle exec rails s 13年2月25日月曜日
  • 18. haml $ emacs Gemfile ... gem 'haml' gem 'haml-rails' $ bundle install 13年2月25日月曜日
  • 19. haml $ mv app/views/layouts/application.html.erb app/views/layouts/ application.html.haml $ emacs app/views/layouts/application.html.haml !!! %html %head %title Mapapp = stylesheet_link_tag "application", :media => "all" = javascript_include_tag "application" = csrf_meta_tags %body = yield 13年2月25日月曜日
  • 20. scaffold $ bundle exec rails generate scaffold map title:string latitude:float longitude:float $ bundle exec rake db:migrate 13年2月25日月曜日
  • 26. 地図を追加しよう 座標を直接入力するとかダサいし馬鹿にされる 編集画面で地図で選択できるとクールじゃね 詳細画面で地図が出てくるとクールじゃね 一覧画面でポイントの一覧が出てくるとクルーじゃね 13年2月25日月曜日
  • 27. leaflet.jsを導入 $ cp ~/Downloads/Leaflet/dist/leaflet.js vendor/ assets/javascripts/ $ cp ~/Downloads/Leaflet/dist/leaflet.css vendor/ assets/stylesheets/ $ cp ~/Downloads/Leaflet/dist/leaflet.ie.css vendor/assets/stylesheets/ $ mkdir vendor/assets/images $ cp ~/Downloads/Leaflet/dist/images/* vendor/ assets/images/ $ bundle exec rails s 13年2月25日月曜日
  • 28. application.js $ emacs app/assets/javascripts/ application.js ... //= require jquery //= require jquery_ujs //= require leaflet //= require_tree . 13年2月25日月曜日
  • 29. application.css $ emacs app/assets/stylesheets/ application.css ... *= require_self *= require leaflet *= require_tree . */ 13年2月25日月曜日
  • 30. application.html.haml $ emacs app/views/layouts/application.html.haml ... %title Mapapp = stylesheet_link_tag "application", :media => "all" /[if lte IE 8] = stylesheet_link_tag "leaflet.ie" = javascript_include_tag "application" = csrf_meta_tags ... 13年2月25日月曜日
  • 32. 地図表示 $ emacs app/views/maps/_form.html.haml ... %div#map :css #map { height: 400px; } :javascript L.Icon.Default.imagePath = "/assets"; var map = L.map('map').setView([35.64483, 139.40881], 17); var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; var osmAttrib = "Map data © OpenStreetMap contributors"; L.tileLayer(osmUrl, { attribution: osmAttrib, maxZoom: 20, }).addTo(map); 13年2月25日月曜日
  • 34. クリック→座標セット $ emacs app/views/maps/_form.html.haml ...(続き) var marker = L.marker([35.64483, 139.40881]).addTo(map); map.on("click", function(e) { marker.setLatLng(e.latlng); $("#map_latitude").val(e.latlng.lat); $("#map_longitude").val(e.latlng.lng); }); 13年2月25日月曜日
  • 36. デフォルト座標 $ emacs app/views/maps/_form.html.haml ... :javascript L.Icon.Default.imagePath = "/assets"; var lat = $("#map_latitude").val()? $("#map_latitude").val() : 35.64483; var lng = $("#map_longitude").val()? $("#map_longitude").val() : 139.40881; var map = L.map('map').setView([lat, lng], 17); var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; ... }).addTo(map); var marker = L.marker([lat, lng]).addTo(map); map.on("click", function(e) { ... 13年2月25日月曜日
  • 38. show $ emacs app/views/maps/show.html.haml ... %div#map :css #map { height: 400px; } :javascript L.Icon.Default.imagePath = "/assets"; var lat = #{@map.latitude} var lng = #{@map.longitude} var map = L.map('map').setView([lat, lng], 17); var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; var osmAttrib = "Map data © OpenStreetMap contributors"; L.tileLayer(osmUrl, { attribution: osmAttrib, maxZoom: 20, }).addTo(map); var marker = L.marker([lat, lng]).addTo(map); 13年2月25日月曜日
  • 40. index $ emacs app/views/maps/index.html.haml ... L.Icon.Default.imagePath = "/assets"; var lat = 35.64483; var lng = 139.40881; var map = L.map('map').setView([lat, lng], 17); var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; var osmAttrib = "Map data © OpenStreetMap contributors"; L.tileLayer(osmUrl, { attribution: osmAttrib, maxZoom: 20, }).addTo(map); 13年2月25日月曜日
  • 41. index $ emacs app/views/maps/index.html.haml ... $.ajax({ type: "GET", url: "/maps.json", dataType: "json", success: function(maps) { for(var i = 0; i < maps.length; i++) { var m = maps[i]; var marker = L.marker([m.latitude, m.longitude]).addTo(map); marker.bindPopup(m.title); } } }); 13年2月25日月曜日
  • 45. Android向けFramework Mapsforge オフライン向け osmdroid 13年2月25日月曜日
  • 46. 今回はosmdroidを採用 MapViewっぽく使えるらしい 僕はMapView使ったことないけど 時間がなかった 調査開始時刻 2013/02/22 AM2:48 13年2月25日月曜日
  • 47. 作るアプリ 適当な場所マーカーを置く マーカーをタップしたらなんか出る 想像力がないです 普通だったらjsonからゲットしてくればいいと思う よ 13年2月25日月曜日
  • 48. アプリの作成 Eclipseでアプリを作成 今回はOSMSampleという名前で 13年2月25日月曜日
  • 50. jarをゲット osmdroid-android-3.0.8.jar http://code.google.com/p/osmdroid/downloads/list slf4j-android-1.5.8.jar http://www.slf4j.org/android/ libs以下にコピーしてプロパティでjarを追加 13年2月25日月曜日
  • 54. AndroidManifest.xml <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-feature android:name="android.hardware.location.network" /> <uses-feature android:name="android.hardware.location.gps" /> <uses-feature android:name="android.hardware.wifi" /> 13年2月25日月曜日
  • 55. MainActivity.java(1) import org.osmdroid.util.GeoPoint; import org.osmdroid.views.MapView; ... public class MainActivity extends Activity { private MapView mapView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.mapView = new MapView(this, 256); this.mapView.setClickable(true); this.mapView.setBuiltInZoomControls(true); this.mapView.getController().setZoom(17); this.mapView.getController().setCenter(new GeoPoint(35.64483, 139.40881)); setContentView(mapView); } 13年2月25日月曜日
  • 56. MainActivity.java(2) import org.osmdroid.DefaultResourceProxyImpl; import org.osmdroid.ResourceProxy; import org.osmdroid.views.overlay.ItemizedIconOverlay; import org.osmdroid.views.overlay.OverlayItem; ... private ItemizedIconOverlay<OverlayItem> myLocationOverlay; ... onCreate GeoPoint overlayPoint = new GeoPoint(35.64483, 139.40881); ArrayList<OverlayItem> overlays = new ArrayList<OverlayItem>(); overlays.add(new OverlayItem("明星大学", "OSCの会場だよ", overlayPoint)); ResourceProxy resourceProxy = new DefaultResourceProxyImpl(getApplicationContext()); this.myLocationOverlay = new ItemizedIconOverlay<OverlayItem>(overlays, null, resourceProxy); this.mapView.getOverlays().add(this.myLocationOverlay); this.mapView.invalidate(); 13年2月25日月曜日
  • 57. MainActivity.java(3) @SuppressLint("ShowToast") public boolean onSingleTapUpHelper(int i, OverlayItem item) { StringBuffer bf = new StringBuffer(); bf.append("Tap: ").append(item.mTitle) .append(":").append(item.mDescription); Toast.makeText(getApplicationContext(), bf.toString(), Toast.LENGTH_LONG).show(); return true; } 13年2月25日月曜日
  • 58. MainActivity.java(4) OnItemGestureListener<OverlayItem> gesture = new ItemizedIconOverlay.OnItemGestureListener<OverlayItem>() { @Override public boolean onItemLongPress(int arg0, OverlayItem arg1) { return true; } @Override public boolean onItemSingleTapUp(int arg0, OverlayItem arg1) { return onSingleTapUpHelper(arg0, arg1); } }; this.myLocationOverlay = new ItemizedIconOverlay<OverlayItem>(overlays, gesture, resourceProxy); 13年2月25日月曜日
  • 60. osmdroidの注意点 配布サイトのwikiの情報が古すぎる 当てにしてはいけない 情報を調べるコツは "osmdroid tutorial"とかで検索 それでもバージョン依存の話があるので注意 13年2月25日月曜日
  • 62. route-me 古くからあるiOS向けSlippy Map 機能はかなり充実してる iOSでOSM使うならこのライブラリで決まり 13年2月25日月曜日