Chapter14 위치 정보 & 모바일 HTML5 Programming
Contents Chapter14 1. 위치 정보 2. 모바일 위치 정보 & 모바일
위치 정보 Chapter14 위치 정보 지도 애플리케이션들은 현재 자신의 위치나 주변 가게의 정보들을 확인할 수 있고 또한 초행길이라도 이제는 스마트폰 하나만 있으면 얼마든지 찾아갈 수 있음 구글 맵, 네이버 지도, 다음 지도 등과 같이 지도와 관련된 다양한 애플리케이션들이 존재함 위치 정보 & 모바일
위치 정보 위치 정보 스마트폰은 GPS가 내장되어 있으므로 정확한 위치 정보를 파악할 수 있기 때문에 유용하게 사용 가능함 Chapter14 위치 정보 스마트폰은 GPS가 내장되어 있으므로 정확한 위치 정보를 파악할 수 있기 때문에 유용하게 사용 가능함 데스크톱 경우에는 GPS가 내장되어 있지 않으므로 정확한 위치를 파악하기는 힘듬 브라우저 지원 현황 위치 정보 & 모바일
위치 정보 위치 정보 위치 정보는 개인 정보이기 때문에 사용자의 허가가 없으면 정상동작하지 않음 Chapter14 위치 정보 위치 정보는 개인 정보이기 때문에 사용자의 허가가 없으면 정상동작하지 않음 데스크톱의 웹 브라우저나 스마트폰에서 위치 정보를 사용하고자 한다면 사용 허가를 위한 알림창이 생성됨 위치 정보 & 모바일
현재 위치 Chapter14 현재 위치 현재 위치 정보를 얻기 위해서는 navigator 객체의 getCurrentPosition() 메서드를 사용 getCurrentPosition() 메서드는 3개의 값을 인수로 갖음 첫 번째 인수는 위치 정보를 성공적으로 얻었을 경우에 호출되는 콜백 함수를 지정 위치 정보 & 모바일
현재 위치 현재 위치 getCurrentPosition() 메서드를 사용하여 구할 수 있는 위치 정보 Chapter14 위치 정보 & 모바일
현재 위치 Chapter14 현재 위치 위치 정보 & 모바일
현재 위치 Chapter14 현재 위치 getCurrentPosition() 메서드의 두 번째 인수는 위치 정보를 얻는 데 실패하였을 경우에 호출되는 콜백 함수를 지정 에러 정보와 관련된 속성 에러 정보 값 위치 정보 & 모바일
현재 위치 현재 위치 getCurrentPosition() 메서드의 세 번째 인수는 위치 정보를 얻기 위한 옵션을 지정 Chapter14 현재 위치 getCurrentPosition() 메서드의 세 번째 인수는 위치 정보를 얻기 위한 옵션을 지정 위치 정보 & 모바일
프로그램 14-1 Chapter14 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"> 05: <title> 위치 정보 </title> 06: <script type="text/javascript"> 07: window.onload = function() 08: { 09: if(navigator.geolocation) 10: { 11: var options={enableHighAccuracy:true, timeout:1000, 12: maximumAge:6000}; 13: navigator.geolocation.geCurrentPosition(MyPosition, ErrorCall, options); 14: } 15: } 16: 17: function MyPosition(position) 18: { 19: var lat = position.coords.latitude; 20: var lng = position.coords.longitude; 21: 22: alert("위도 : " + lat + "<br> 경도 : " + lng); 23: } 위치 정보 & 모바일
프로그램 14-1 Chapter14 25: function ErrorCall(error) 26: { 26: { 27: switch(error.code) 28: { 29: case error.TIMEOUT: 30: alert("시간 제한을 초과했습니다."); 31: break; 32: case error.POSITION_UNAVAILABLE: 33: alert("현재 위치를 구할 수 없습니다."); 34: break; 35: case error.PERMISSION_DENIED: 36: alert("위치를 구할 수 있는 권한이 없습니다."); 37: break; 38: case error.UNKNOWN_ERROR: 39: alert("알 수 없는 에러가 발생하였습니다."); 40: break; 41: default : 42: alert (error.message); 43: } 44: } 45: </script> 46: </head> 47: <body> 48: </body> 49: </html> 위치 정보 & 모바일
프로그램 14-1 Chapter14 위치 정보 & 모바일
현재 위치 Chapter14 현재 위치 추적 현재 자신의 위치가 표시되고 이동함에 따라 계속 현재 위치가 변하는 것은 watchPosition() 메서드를 사용하여 나타낼 수 있음 현재 위치의 추적은 clearPosition() 메서드를 호출할 때까지 계속 실행 위치 정보 & 모바일
현재 위치 Chapter14 현재 위치 추적 위치 정보 & 모바일
지도 서비스 지도 서비스 현재 위치 정보를 정보를 텍스트가 아닌 지도로 나타내려면 지도 서비스를 위한 API를 사용 Chapter14 지도 서비스 현재 위치 정보를 정보를 텍스트가 아닌 지도로 나타내려면 지도 서비스를 위한 API를 사용 구글 Maps (https://developers.google.com/maps/?hl=ko) Bing Maps (http://www.microsoft.com/maps/developers/web.aspx) 네이버 지도 (http://dev.naver.com/openapi/apis/map) 다음 지도 (http://dna.daum.net/apis/maps) 위치 정보 & 모바일
프로그램 14-2 Chapter14 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"> 05: <title> 지도 </title> 06: <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 07: <script type="text/javascript" 08: src="https://maps.google.com/maps/api/js?sensor=false"> 09: </script> 10: <script type="text/javascript"> 11: window.onload = function() 12: { 13: var latlng = new google.maps.LatLng(37.5010226, 127.0396037); 14: 15: var options = { 16: zoom: 12, 17: center: latlng, 18: mapTypeId: google.maps.MapTypeId.ROADMAP 19: }; 20: 21: var map = 22: new google.maps.Map(document.getElementById("map"), options); 23: } 24: </script> 25: </head> 26: <body> 27: <div id="map" style="width: 500px; height: 500px"></div> 28: </body> 29: </html> 위치 정보 & 모바일
프로그램 14-2 Chapter14 위치 정보 & 모바일
모바일 Chapter14 모바일과 HTML5 대부분의 모바일이 HTML5 지원이 잘 되고 있는 오페라 브라우저와 WebKit 기반의 안드로이드 브라우저, 아이폰 사파리 브라우저를 사용하고 있음 위치 정보 & 모바일
모바일 모바일과 HTML5 스마트폰은 다양한 애플리케이션을 설치함으로써 여러 가지 유용한 기능들을 사용할 수 있음 Chapter14 모바일과 HTML5 스마트폰은 다양한 애플리케이션을 설치함으로써 여러 가지 유용한 기능들을 사용할 수 있음 안드로이드와 IOS, 심비안 등의 모바일 OS들이 서로 호환이 되지 않으므로 하나의 애플리케이션이라도 각각의 OS에 맞게 따로 개발을 해야만 함 모든 모바일에서 동작하는 애플리케이션을 만들기 위해서는 많은 시간과 개발 인력이 필요할 수밖에 없으며 서로 다른 OS를 사용하고 있는 모바일 간의 데이터 공유도 힘들 수밖에 없음 위치 정보 & 모바일
모바일 Chapter14 모바일과 HTML5 웹 표준을 지향하는 HTML5을 이용하여 개발한다면 OS 별로 애플리케이션을 따로 개발해야 하는 문제를 해결할 수 있음 위치 정보 & 모바일
모바일 Chapter14 모바일과 HTML5 스트래티지 애널리틱스 시장 조사 기관에서는 앞으로 HTML5를 지원하는 단말기의 수가 비약적으로 증가할 것이라고 예상하고 있음 위치 정보 & 모바일
웹 앱 개발 웹 앱 개발 네이티브 앱(Native App) 일반적으로 모바일에서 사용하는 애플리케이션 Chapter14 웹 앱 개발 네이티브 앱(Native App) 일반적으로 모바일에서 사용하는 애플리케이션 각 모바일 OS마다 다른 언어로 개발을 해야 함 디바이스의 모든 기능을 활용할 수 있으며 실행 속도도 빠름 웹 앱(Web App) 웹 기술로 만든 애플리케이션 HTML, 자바스크립트, CSS 등을 사용하여 개발을 하면 그 어떤 OS의 모바일에서도 사용이 가능 디바이스의 카메라 등의 일부 기능을 이용할 수 없음 위치 정보 & 모바일
JQTouch 라이브러리 JQTouch 라이브러리 적용 JQTouch 라이브러리 다운로드 JQTouch 라이브러리 참조 Chapter14 JQTouch 라이브러리 적용 JQTouch 라이브러리 다운로드 JQTouch 라이브러리 참조 UI 스타일 지정 JQTouch 객체 생성 웹 페이지 화면 구성 위치 정보 & 모바일
JQTouch 라이브러리 JQTouch 라이브러리 다운로드 Chapter14 JQTouch 라이브러리 다운로드 JQTouch 홈페이지(http://www.jqtouch.com/)에 접속하여 라이브러리를 다운 위치 정보 & 모바일
JQTouch 라이브러리 JQTouch 라이브러리 참조 Chapter14 JQTouch 라이브러리 참조 JQuery 라이브러리를 참조해야 하는 이유는 JQTouch 라이브러리가 JQuery 기반으로 작성 되었기 때문 JQuery 라이브러리는 http://docs.jquery.com/Downloading_jQuery 에서 다운받을 수 있음 최신 버전에는 JQTouch가 Zepto 라이브러리와 통합되어 릴리즈되었음 위치 정보 & 모바일
JQTouch 라이브러리 Zepto 라이브러리 참조 Chapter14 Zepto 라이브러리 참조 src 폴더의 lib 폴더 안에 보면 zepto.js 파일과 zepto.min.js 파일이 있음 zepto.js 파일은 풀 버전 라이브러리이므로 개발 시 주로 사용하고 zepto.min.js 파일은 최소화 버전 라이브러리이므로 실제 릴리즈 배포 시 사용 JQTouch 라이브러리 참조 위치 정보 & 모바일
JQTouch 라이브러리 UI 스타일 지정 웹 페이지 스타일을 위한 css파일은 themes 폴더의 css 폴더에 위치 Chapter14 UI 스타일 지정 웹 페이지 스타일을 위한 css파일은 themes 폴더의 css 폴더에 위치 위치 정보 & 모바일
JQTouch 라이브러리 JQTouch 객체 생성 Chapter14 JQTouch 객체 생성 객체 생성 시에는 JQTouch의 초기화 함수인 $.JQTouch() 메서드를 사용 위치 정보 & 모바일
프로그램 14-3 Chapter14 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"> 05: <title> jQTouch </title> 06: <script src="./jqtouch/src/lib/zepto.min.js" type="text/javascript"></script> 07: <script src="./jqtouch/src/jqtouch.min.js“ type="application/x-javascript"></script> 08: 09: <link rel="stylesheet" href="./jqtouch/themes/css/jqtouch.css“ title="jQTouch"> 10: 11: <script type="text/javascript"> 12: var jQT = new $.jQTouch({ 13: icon: ‘jqtouch.png’, 14: addGlossToIcon: false, 15: startupScreen: ‘jqt_startup.png’, 16: statusBar: ‘black-translucent’, 17: themeSelectionSelector: ‘#jqt #themes ul’, 18: preloadImages: [] 19: }); 20: </script> 21: </head> 22: <body> 23: <div id="home"> 24: <div class="toolbar"><h1>Mobile OS</h1></div> 위치 정보 & 모바일
프로그램 14-3 Chapter14 25: <ul class="rounded"> 26: <li><a href="#google">안드로이드</a></li> 27: <li><a href="#apple">IOS</a></li> 28: <li><a href="#rim">블랙베리</a></li> 29: <li><a href="#ms">윈도우 모바일</a></li> 30: <li><a href="#samsung">바다</a></li> 31: </ul> 32: </div> 33: </body> 34: </html> 위치 정보 & 모바일