• Save
HTML5勉強会#23_GeoHex
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5勉強会#23_GeoHex

  • 10,873 views
Uploaded on

HTML5勉強会#23で使用した資料です。

HTML5勉強会#23で使用した資料です。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,873
On Slideshare
5,402
From Embeds
5,471
Number of Embeds
13

Actions

Shares
Downloads
0
Comments
0
Likes
16

Embeds 5,471

http://www.atmarkit.co.jp 4,688
http://d.hatena.ne.jp 650
http://infout.tumblr.com 80
http://a0.twimg.com 13
http://webcache.googleusercontent.com 12
http://us-w1.rockmelt.com 8
https://twitter.com 7
http://aitcms-w.atmarkit.co.jp 5
http://preview.itmedia.co.jp 3
http://paper.li 2
http://twitter.com 1
http://flavors.me 1
http://safe.tumblr.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 2011.11.16 CC BY-SA(@sa2da)
  • 2. @ sa 2 d a
  • 3. O’ReillyW here2.0 2010 @sa2da
  • 4. @IT 2011.8 @sa2da
  • 5. ⽇日
  • 6. ⽇日
  • 7. http://www.w3.org/TR/ geolocation-API/
  • 8. JavaScript ← Location
  • 9. Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OS
  • 10. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
  • 11. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function errorCallback(error)function successCallback(position)
  • 12. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function successCallback(position) coordinates position.coords.latitude: position.coords.longitude: position.coords.altitude: m position.coords.accuracy: m position.coords.altitudeAccuracy: m position.coords.heading: position.coords.speed: m/s ※HTML
  • 13. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function errorCallback(error) error.code: 1 PERMISSION_DENIED 2 POSITION_UNAVAILABLE 3 TIMEOUT
  • 14. navigator.geolocation.*****(); getCurrentPosition(); ! watchPosition(); ! clearWatch(); !watchPosition()watchID = navigator.geolocation.watchPosition(); 1navigator.geolocation.clearWatch(watchID);
  • 15. ⽇日
  • 16. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>※V3API API OK
  • 17. <div id="map_canvas"></div> ※ CSS html, body { height: 100%; } #map_canvas { height: 100%; }
  • 18. <script type="text/javascript"> var map; function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(map_canvas), myOptions); geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(successCallback, errorCallback); } function successCallback(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(pos); } function errorCallback(){ } } google.maps.event.addDomListener(window, load, initialize);</script>
  • 19. <script type="text/javascript"> var map; function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(map_canvas), myOptions); // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.InfoWindow({ map: map, position: pos, content: Location found using HTML5. }); map.setCenter(pos); successCallback }, function() { handleNoGeolocation(true); }); } else { errorCallback // Browser doesnt support Geolocation handleNoGeolocation(false); } } function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = Error: The Geolocation service failed.; } else { var content = Error: Your browser doesnt support geolocation.; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } google.maps.event.addDomListener(window, load, initialize);</script>
  • 20. ⽇日
  • 21. Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OSGPS IP Wi-Fi
  • 22. GPS m 1km IP 5kmWi-Fi 10m 300m 100m 5km
  • 23. GPS GPS/Wi-Fi IPWi-Fi Wi-Fi GPS/Wi-Fi
  • 24. position.coords.latitude:position.coords.longitude:position.coords.altitude: mposition.coords.accuracy: mposition.coords.altitudeAccuracy: mposition.coords.heading:position.coords.speed: m/s
  • 25. position.coords.latitude:position.coords.longitude:position.coords.accuracy: m × accuracy accuracy
  • 26. position.coords.latitude:position.coords.longitude:position.coords.altitude: mposition.coords.accuracy: mposition.coords.altitudeAccuracy: mposition.coords.heading:position.coords.speed: m/s GPS
  • 27. Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OSGPS IP Wi-Fi
  • 28. × getCurrentPosition() watchPosition()
  • 29. watchPosition()clearWatch()
  • 30. ON/OFFGPS ON/OFFWi-Fi ON/OFFJavaScript ON/OFF
  • 31. ON/OFFGPS ON/OFF ※iPhoneWi-Fi ON/OFFJavaScript ON/OFF
  • 32. ⽇日
  • 33. ⽇日
  • 34. ⾒見見
  • 35. SEO
  • 36. http://miniapps.co.uk/geometer/
  • 37. ⽇日
  • 38. 35.76643787028846139.63561688507 10cm
  • 39. 20(+/-)n byte 35.60970, 139.74828 pinpoint
  • 40. Zone: quhNzoV
  • 41. Level:0 Level:25
  • 42. ⾕谷⾕谷
  • 43. ⽤用 ⾮非 ⽤用 ⽤用 ⼆二⽤用 ⽤用 ⽤用 ⼈人⽤用 ⽤用 ⽣生⽤用 ⽤用⽤用 ⼊入⼊入 ⽤用
  • 44. CC CC N BY-SA BY-SA N CC N BY-SA N⼆二 ⼆二 ⽤用 ⼀一 ⾃自 ⽣生 ⽬目
  • 45. ⽇日
  • 46. UNTIC.JP
  • 47. UNT
  • 48. http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
  • 49. <script src="http://geohex.net/gm.js" type="text/javascript" content="text/html;charset=utf-8"></script>function initialize() { var gMapType = new google.maps.StyledMapType(stylez,    {name: "green"});  // Create a map object, and include the MapTypeId to add  // to the map type control.  var mapOptions = {    zoom: 11,    mapTypeControlOptions: {      mapTypeIds: [google.maps.MapTypeId.ROADMAP, green]    }  };  var map = new google.maps.Map(document.getElementById(map_canvas),    mapOptions);  //Associate the styled map with the MapTypeId and set it to display.  map.mapTypes.set(green, gMapType);  map.setMapTypeId(green);}
  • 50. <style type="text/css"> @-webkit-keyframes mycolor {$ 0%$ { right:100%;$ $ }$ 100%$ { right:-45%;$ $ }$ } #gradation$ {$ position: absolute;$ top:0px;$ z-index:10; width: 50%;$ height:100%; -webkit-animation-name: mycolor; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(0,204,0,0.5)));$ }</style><div id="gradation"></div>
  • 51. <script src="http://geohex.net/hex_v3.01_core.js" type="text/javascript" content="text/html;charset=utf-8"></script><script src="http://geohex.net/hex_v2_gmap3.js" type="text/javascript" content="text/html;charset=utf-8"></script>var zone = GeoHex.getZoneByLocation(position.coords.latitude,position.coords.longitude,level);var zone_center =new google.maps.LatLng(zone.lat , zone.lon );zone.drawHex(map, {linecolor:"#FF0000",fillcolor:"#FF0000",popinfo:1});map.setCenter(zone_center);
  • 52. ⼩小
  • 53. ⾦金金
  • 54. ⽥田