Chapter14 위치 정보 & 모바일

Chapter14위치 정보& 모바일 HTML5 Programming

Contents Chapter14 1. 위치 정보 2. 모바일

위치 정보 Chapter14 • 위치 정보 • 지도 애플리케이션들은 현재 자신의 위치나 주변 가게의 정보들을 확인할 수 있고 또한 초행길이라도 이제는 스마트폰 하나만 있으면 얼마든지 찾아갈 수 있음 • 구글맵, 네이버지도, 다음 지도 등과 같이 지도와 관련된 다양한 애플리케이션들이 존재함

위치 정보 Chapter14 • 위치 정보 • 스마트폰은GPS가 내장되어 있으므로 정확한 위치 정보를 파악할 수 있기 때문에 유용하게 사용 가능함 • 데스크톱 경우에는 GPS가 내장되어 있지 않으므로 정확한 위치를 파악하기는 힘듬 • 브라우저 지원 현황

위치 정보 Chapter14 • 위치 정보 • 위치 정보는 개인 정보이기 때문에 사용자의 허가가 없으면 정상동작하지않음 • 데스크톱의 웹 브라우저나 스마트폰에서 위치 정보를 사용하고자 한다면 사용 허가를 위한 알림창이 생성됨

현재 위치 Chapter14 • 현재 위치 • 현재 위치 정보를 얻기 위해서는 navigator 객체의 getCurrentPosition() 메서드를사용 • getCurrentPosition() 메서드는3개의 값을 인수로 갖음 • 첫 번째 인수는 위치 정보를 성공적으로 얻었을 경우에 호출되는 콜백 함수를 지정

현재 위치 Chapter14 • 현재 위치 • getCurrentPosition() 메서드를 사용하여 구할 수 있는 위치 정보

현재 위치 Chapter14 • 현재 위치

현재 위치 Chapter14 • 현재 위치 • 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: varoptions={enableHighAccuracy:true, timeout:1000, 12: maximumAge:6000}; 13: navigator.geolocation.geCurrentPosition(MyPosition, ErrorCall, options); 14: } 15: } 16: 17: function MyPosition(position) 18: { 19: varlat = position.coords.latitude; 20: varlng = position.coords.longitude; 21: 22: alert("위도 : " + lat + "<br> 경도 : " + lng); 23: }

프로그램 14-1 Chapter14 25: function ErrorCall(error) 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 • 현재 위치 추적

지도 서비스 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: varlatlng = new google.maps.LatLng(37.5010226, 127.0396037); 14: 15: varoptions = { 16: zoom: 12, 17: center: latlng, 18: mapTypeId: google.maps.MapTypeId.ROADMAP 19: }; 20: 21: varmap = 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기반의 안드로이드브라우저, 아이폰 사파리 브라우저를 사용하고 있음

모바일 Chapter14 • 모바일과HTML5 • 스마트폰은 다양한 애플리케이션을 설치함으로써 여러 가지 유용한 기능들을 사용할 수 있음 • 안드로이드와IOS, 심비안 등의 모바일OS들이 서로 호환이 되지 않으므로 하나의 애플리케이션이라도 각각의 OS에 맞게 따로 개발을 해야만 함 • 모든 모바일에서동작하는 애플리케이션을 만들기 위해서는 많은 시간과 개발 인력이 필요할 수밖에 없으며 서로 다른 OS를 사용하고 있는 모바일 간의 데이터 공유도 힘들 수밖에 없음

모바일 Chapter14 • 모바일과HTML5 • 웹 표준을 지향하는 HTML5을 이용하여 개발한다면 OS 별로 애플리케이션을 따로 개발해야 하는 문제를 해결할 수 있음

모바일 Chapter14 • 모바일과HTML5 • 스트래티지애널리틱스 시장 조사 기관에서는 앞으로 HTML5를 지원하는 단말기의 수가 비약적으로 증가할 것이라고 예상하고 있음

웹 앱 개발 Chapter14 • 웹 앱개발 • 네이티브앱(Native App) • 일반적으로 모바일에서 사용하는 애플리케이션 • 각 모바일OS마다 다른 언어로 개발을 해야 함 • 디바이스의 모든 기능을 활용할 수 있으며 실행 속도도 빠름 • 웹 앱(Web App) • 웹 기술로 만든 애플리케이션 • HTML, 자바스크립트, CSS 등을 사용하여 개발을 하면 그 어떤 OS의 모바일에서도 사용이 가능 • 디바이스의 카메라 등의 일부 기능을 이용할 수 없음

JQTouch라이브러리 Chapter14 • JQTouch라이브러리 적용 • JQTouch라이브러리 다운로드 • JQTouch라이브러리 참조 • UI 스타일 지정 • JQTouch객체 생성 • 웹 페이지 화면 구성

JQTouch라이브러리 Chapter14 • JQTouch라이브러리 다운로드 • JQTouch홈페이지(http://www.jqtouch.com/)에 접속하여 라이브러리를 다운

JQTouch라이브러리 Chapter14 • JQTouch라이브러리 참조 • JQuery라이브러리를 참조해야 하는 이유는 JQTouch라이브러리가 JQuery기반으로 작성 되었기 때문 • JQuery라이브러리는 http://docs.jquery.com/Downloading_jQuery 에서 다운받을 수 있음 • 최신 버전에는 JQTouch가 Zepto라이브러리와 통합되어 릴리즈되었음

JQTouch라이브러리 Chapter14 • Zepto라이브러리 참조 • src폴더의 lib 폴더 안에 보면 zepto.js 파일과 zepto.min.js 파일이 있음 • zepto.js 파일은 풀 버전 라이브러리이므로 개발 시 주로 사용하고 zepto.min.js 파일은 최소화 버전 라이브러리이므로 실제 릴리즈 배포 시 사용 • JQTouch라이브러리 참조

JQTouch라이브러리 Chapter14 • UI 스타일 지정 • 웹 페이지 스타일을 위한 css파일은 themes 폴더의 css폴더에 위치

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: varjQT = 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>

Chapter14 위치 정보 & 모바일