Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5        2011.11.16    CC BY-SA(@sa2da)
@ sa 2 d a
O’ReillyW here2.0 2010            @sa2da
@IT 2011.8             @sa2da
⽇日
⽇日
http://www.w3.org/TR/  geolocation-API/
JavaScript ← Location
Safari#import <CoreLocation/CoreLocation.h>   GeoLocationAPI                coreLocationFramework           OS
navigator.geolocation.getCurrentPosition(successCallback,       errorCallback);
navigator.geolocation.getCurrentPosition(successCallback,       errorCallback);function errorCallback(error)function succe...
navigator.geolocation.getCurrentPosition(successCallback,       errorCallback);function successCallback(position)  coordin...
navigator.geolocation.getCurrentPosition(successCallback,       errorCallback);function errorCallback(error)     error.cod...
navigator.geolocation.*****(); getCurrentPosition();   ! watchPosition();   ! clearWatch();   !watchPosition()watchID = na...
⽇日
<script type="text/javascript"        src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>※V3API   API      ...
<div id="map_canvas"></div>        ※   CSS        html, body {          height: 100%;        }        #map_canvas {       ...
<script type="text/javascript">  var map;  function initialize() {    var myOptions = {       zoom: 6,       mapTypeId: go...
<script type="text/javascript">  var map;  function initialize() {    var myOptions = {       zoom: 6,       mapTypeId: go...
⽇日
Safari#import <CoreLocation/CoreLocation.h>    GeoLocationAPI                coreLocationFramework           OSGPS        ...
GPS      m 1km IP      5kmWi-Fi   10m 300m         100m 5km
GPS        GPS/Wi-Fi IPWi-Fi        Wi-Fi        GPS/Wi-Fi
position.coords.latitude:position.coords.longitude:position.coords.altitude:     mposition.coords.accuracy:            mpo...
position.coords.latitude:position.coords.longitude:position.coords.accuracy:                    m                         ...
position.coords.latitude:position.coords.longitude:position.coords.altitude:     mposition.coords.accuracy:            mpo...
Safari#import <CoreLocation/CoreLocation.h>    GeoLocationAPI                coreLocationFramework           OSGPS        ...
×   getCurrentPosition()    watchPosition()
watchPosition()clearWatch()
ON/OFFGPS ON/OFFWi-Fi   ON/OFFJavaScript ON/OFF
ON/OFFGPS ON/OFF     ※iPhoneWi-Fi   ON/OFFJavaScript ON/OFF
⽇日
⽇日
⾒見見
SEO
http://miniapps.co.uk/geometer/
⽇日
35.76643787028846139.63561688507       10cm
20(+/-)n byte           35.60970, 139.74828                                 pinpoint
Zone: quhNzoV
Level:0   Level:25
⾕谷⾕谷
⽤用   ⾮非   ⽤用                         ⽤用                              ⼆二⽤用   ⽤用        ⽤用          ⼈人⽤用      ⽤用            ...
CC                           CC           N     BY-SA                        BY-SA                                        ...
⽇日
UNTIC.JP
UNT
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
<script src="http://geohex.net/gm.js" type="text/javascript" content="text/html;charset=utf-8"></script>function initializ...
<style type="text/css">    @-webkit-keyframes mycolor {$ 0%$ {                right:100%;$ $ }$ 100%$ {                rig...
<script src="http://geohex.net/hex_v3.01_core.js" type="text/javascript" content="text/html;charset=utf-8"></script><scrip...
⼩小
⾦金金
⽥田
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
Upcoming SlideShare
Loading in …5
×

HTML5勉強会#23_GeoHex

12,096 views

Published on

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

Published in: Technology
  • Be the first to comment

HTML5勉強会#23_GeoHex

  1. 1. HTML5 2011.11.16 CC BY-SA(@sa2da)
  2. 2. @ sa 2 d a
  3. 3. O’ReillyW here2.0 2010 @sa2da
  4. 4. @IT 2011.8 @sa2da
  5. 5. ⽇日
  6. 6. ⽇日
  7. 7. http://www.w3.org/TR/ geolocation-API/
  8. 8. JavaScript ← Location
  9. 9. Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OS
  10. 10. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
  11. 11. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function errorCallback(error)function successCallback(position)
  12. 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. 13. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function errorCallback(error) error.code: 1 PERMISSION_DENIED 2 POSITION_UNAVAILABLE 3 TIMEOUT
  14. 14. navigator.geolocation.*****(); getCurrentPosition(); ! watchPosition(); ! clearWatch(); !watchPosition()watchID = navigator.geolocation.watchPosition(); 1navigator.geolocation.clearWatch(watchID);
  15. 15. ⽇日
  16. 16. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>※V3API API OK
  17. 17. <div id="map_canvas"></div> ※ CSS html, body { height: 100%; } #map_canvas { height: 100%; }
  18. 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. 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. 20. ⽇日
  21. 21. Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OSGPS IP Wi-Fi
  22. 22. GPS m 1km IP 5kmWi-Fi 10m 300m 100m 5km
  23. 23. GPS GPS/Wi-Fi IPWi-Fi Wi-Fi GPS/Wi-Fi
  24. 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. 25. position.coords.latitude:position.coords.longitude:position.coords.accuracy: m × accuracy accuracy
  26. 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. 27. Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OSGPS IP Wi-Fi
  28. 28. × getCurrentPosition() watchPosition()
  29. 29. watchPosition()clearWatch()
  30. 30. ON/OFFGPS ON/OFFWi-Fi ON/OFFJavaScript ON/OFF
  31. 31. ON/OFFGPS ON/OFF ※iPhoneWi-Fi ON/OFFJavaScript ON/OFF
  32. 32. ⽇日
  33. 33. ⽇日
  34. 34. ⾒見見
  35. 35. SEO
  36. 36. http://miniapps.co.uk/geometer/
  37. 37. ⽇日
  38. 38. 35.76643787028846139.63561688507 10cm
  39. 39. 20(+/-)n byte 35.60970, 139.74828 pinpoint
  40. 40. Zone: quhNzoV
  41. 41. Level:0 Level:25
  42. 42. ⾕谷⾕谷
  43. 43. ⽤用 ⾮非 ⽤用 ⽤用 ⼆二⽤用 ⽤用 ⽤用 ⼈人⽤用 ⽤用 ⽣生⽤用 ⽤用⽤用 ⼊入⼊入 ⽤用
  44. 44. CC CC N BY-SA BY-SA N CC N BY-SA N⼆二 ⼆二 ⽤用 ⼀一 ⾃自 ⽣生 ⽬目
  45. 45. ⽇日
  46. 46. UNTIC.JP
  47. 47. UNT
  48. 48. http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
  49. 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. 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. 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. 52. ⼩小
  53. 53. ⾦金金
  54. 54. ⽥田

×