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

1. HTML5
2011.11.16
CC BY-SA(@sa2da)

3. @ sa 2 d a

5. O’Reilly
W here2.0 2010
@sa2da

6. @IT 2011.8
@sa2da

7. ⽇日

8. ⽇日

9. http://www.w3.org/TR/
geolocation-API/

10. JavaScript ← Location

11. Safari
#import <CoreLocation/CoreLocation.h> GeoLocationAPI
coreLocationFramework
OS

12. navigator.geolocation.getCurr
entPosition(successCallback,
errorCallback);

13. navigator.geolocation.getCurr
entPosition(successCallback,
errorCallback);
function errorCallback(error)
function successCallback(position)

14. navigator.geolocation.getCurr
entPosition(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

15. navigator.geolocation.getCurr
entPosition(successCallback,
errorCallback);
function errorCallback(error)
error.code: 1 PERMISSION_DENIED
2 POSITION_UNAVAILABLE
3 TIMEOUT

16. navigator.geolocation.*****();
getCurrentPosition();
!
watchPosition();
!
clearWatch();
!watchPosition()
watchID = navigator.geolocation.watchPosition();
1
navigator.geolocation.clearWatch(watchID);

17. ⽇日

18. <script type="text/javascript"
src="http://maps.googleapis.com/
maps/api/js?sensor=true"></script>
※V3API API OK

19. <div id="map_canvas"></div>
※ CSS
html, body {
height: 100%;
}
#map_canvas {
height: 100%;
}

20. <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>

21. <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 doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn't 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>

22. ⽇日

24. Safari
#import <CoreLocation/CoreLocation.h> GeoLocationAPI
coreLocationFramework
OS
GPS IP Wi-Fi

26. GPS m 1km
IP 5km
Wi-Fi 10m 300m
100m 5km

27. GPS
GPS/Wi-Fi
IP
Wi-Fi
Wi-Fi
GPS/Wi-Fi

28. 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

29. position.coords.latitude:
position.coords.longitude:
position.coords.accuracy: m
× accuracy
accuracy

30. 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
GPS

32. Safari
#import <CoreLocation/CoreLocation.h> GeoLocationAPI
coreLocationFramework
OS
GPS IP Wi-Fi

33. × getCurrentPosition()
watchPosition()

35. watchPosition()
clearWatch()

37. ON/OFF
GPS ON/OFF
Wi-Fi ON/OFF
JavaScript ON/OFF

38. ON/OFF
GPS ON/OFF
※iPhone
Wi-Fi ON/OFF
JavaScript ON/OFF

39. ⽇日

42. ⽇日

43. ⾒見見

46. SEO

48. http://miniapps.co.uk/
geometer/

49. ⽇日

50. 35.76643787028846
139.63561688507
10cm

51. 20(+/-)n
byte
35.60970, 139.74828
pinpoint

54. Zone: quhNzoV

57. Level:0 Level:25

58. ⾕谷
⾕谷

61. ⽤用 ⾮非 ⽤用
⽤用
⼆二
⽤用 ⽤用 ⽤用
⼈人⽤用 ⽤用 ⽣生
⽤用
⽤用
⽤用 ⼊入
⼊入 ⽤用

62. CC CC N
BY-SA BY-SA
N
CC N
BY-SA
N
⼆二 ⼆二 ⽤用
⼀一
⾃自 ⽣生 ⽬目

63. ⽇日

66. UNTIC.JP

67. U
N
T

68. http://gmaps-samples-v3.googlecode.com/svn/trunk/
styledmaps/wizard/index.html

69. <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');
}

70. <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>

71. <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);

73. ⼩小

75. ⾦金金

81. ⽥田