7. html5 api

1. Drag and Drop

2. application cache

3. web storage

4. web worker

5. geolocation

•1999년에이미마이크로소프트사의인터넷익스플로러에서에서구현했던기능.

•HTML5에서 API를이용하여구현하고있기때문에다른애플리케이션과데이터를주고받기쉬워졌고그만큼애플리케이션개발이쉬워졌다.

•페이지안에서콘텐츠이동, 페이지사이, 페이지와다른프로그램사이에도드래그가능

•드래그대상, 드롭대상, 이동할콘텐츠정보등필요

•웹환경에서는지금까지전용 API는제공되지않고유사구현을위해복잡한자바스크립트이벤트(mouse 관련이벤트를직접구현함)를다루어야했다

http://html5demos.com/drag

http://slides.html5rocks.com/

http://html5demos.com/drag

데이터유형

데이터유형을나타내는데임의로데이터유형을정의해서사용할수도있지만

MIME 문자열을이용할수도있다.

다른애플리케이션과데이터를주고받을수있다.

예) 메일에파일을첨부할때시스템에있는파일을손쉽게메일로드래그해서

첨부할수있다.

•text/plain 또는 text : 단순문자열

•text/uri-list : 사이트주소(URL). 주소가하나일경우간단하게 URL이라고쓰기도

한다.

•file : 다른애플리케이션에파일을드래그앤드롭할때사용한다.



5Do it! HTML5+CSS3

IE의임시인터넷파일

한번접속했었던사이트의이미지,미디어복사본저장

애플리케이션캐시와비슷한개념

오프라인사용이불가능

6Do it! HTML5+CSS3

웹에접속할수없는상황에서도애플리케이션실행되어야.

오프라인브라우징 : 오프라인상태에서도사용자가사이트를둘러볼수있다.

속도 : 캐시된리소스들이로컬에있기때문에좀더빠르게로딩할수있다.

서버로딩줄임 : 리소스변경이있을경우에만서버에서리소스를다운로드하면

된다.

<장점>

애플리케이션캐시

manifest 파일

자바스크립트 UI

캐시해야할리소스를나열한텍스트파일

캐시한파일을실행하고업데이트할수있도록 프로그래밍된인터페이스

8Do it! HTML5+CSS3

CACHE MANIFEST

# VERSION 10

NETWORK:

http://robertnyman.com/html5/offline/offline.html

CACHE:

offline.html

base.css

FALLBACK:

online.css offline.css

<manifest 파일>

9Do it! HTML5+CSS3

CACHE MANIFEST

# VERSION 10

NETWORK:


CACHE:

offline.html

base.css

FALLBACK:


<manifest 파일>

온라인일때액세스할파일

10Do it! HTML5+CSS3

CACHE MANIFEST

# VERSION 10

NETWORK:


CACHE:

offline.html

base.css

FALLBACK:


오프라인일때액세스할파일

<manifest 파일>

11Do it! HTML5+CSS3

CACHE MANIFEST

# VERSION 10

NETWORK:


CACHE:

offline.html

base.css

FALLBACK:


<manifest 파일>

지정한파일이없을경우사용할파일

12Do it! HTML5+CSS3

<html manifest=“offline.manifest”>

• 애플리케이션캐시가만들어지면페이지가한번로딩된후로는리소스가자동으로

캐시에저장됨.

• manifest 파일이수정되었을경우에만서버로부터파일을가져옴.

• (IE 임시인터넷파일은사이트에접속할때마다임시인터넷파일을갱신함)

서버에서 MIME 타입을추가해야함

13Do it! HTML5+CSS3

캐시자동업데이트

•manifest 파일을수정하면애플리케이션캐시를자동으로업데이트한다

•manifest 파일에는여러리소스파일이나열되어있는데리소스파일이

수정된것은 manifest 파일과는상관이없으므로리소스파일이

수정됐다고해서애플리케이션캐시가자동업데이트되지는않는다.

•이전버전과비교해봐서 manifest 파일의내용이달라진게없다면이

경우에도애플리케이션캐시는자동업데이트되지않는다.

•manifest 파일의수정날짜를바꾸는것역시도업데이트로취급하지

않는다.

•애플리케이션캐시를자동업데이트하려면반드시 manifest 파일의

내용을수정해야한다.


CACHE MANIFEST

# VERSION 10

CACHE:

offline.html

base.css

FALLBACK:


offline.manifest

.connectivity {

color: #fff;

background: green; padding:

10px;

}

.connectivity {

color: #fff;

background: red; padding: 30px;

}

online.css

offline.css



오프라인에서접속하면캐시에있는내용, 즉 manifest 파일에서지정한offline.css 파일의내용을읽어오게되어, 그안에서지정한대로주황색의가로줄을표시한다.


“클라이언트에데이터를저장한다”

'키/ 값' 쌍으로데이터를저장하고키를기반으로데이터를조회한다.

영원히저장할수있는공간과임시로저장할수있는공간을따로두고있어서필요에맞게선택할수있다.

17Do it! HTML5+CSS3

•같은사이트에서둘이상의탭을열면둘이상의트랜잭션을추적하기어렵다.

•보안문제를일으키기쉽다.

•하나의사이트에서저장할수있는최대쿠키수는 20 개이다. 그리고하나의

사이트에서저장할수있는최대쿠키크기는 4KB 로제한되어있다.

브라우저쿠키(cookie)의단점

18Do it! HTML5+CSS3

•쿠키와마찬가지로웹스토리지의데이터들도웹사이트를서핑하고난후,

브라우저탭을닫고난후, 또는브라우저를빠져나오고난후에저장된다.

•쿠키와다른점은웹스토리지의데이터들은사용자가일부러보내지않는한웹

서버로전송되지않는다는것이다. (경량모바일에적당)

•텍스트뿐만아니라객체정보를저장할수있다.

•쿠키는만료일자가있지만웹스토리지의경우에는만료일자가없다.

•두가지스토리지모두도메인당 5MB 정도의데이터를저장할수있다.

웹스토리지

세션스토리지

로컬스토리지

세션스토리지

세션동안의데이터를기억하고있다.

탭(또는창)을닫으면데이터가삭제된다.

seesionStorage라는객체를이용해저장하고검색한다.

로컬스토리지

세션이끝나도계속기억하고있다.

탭(또는창)을닫았다열어도데이터남아있다.

localStorage라는객체를이용해저장하고검색한다.

http://caniuse.com

http://caniuse.com/

sessionStorage.setItem(key, value);

저장

var item = sessionStorage.getItem(key);

검색

ex) sessionStorage.setItem(1, ‘이것은예제문장입니다’);

ex) var item=sessionStorage.getItem(1);

alert(item);

localStorage.setItem(key, value);

var item = localStorage.getItem(key);

sessionStorage.removeItem(key);

삭제

sessionStroage.clear();

모두삭제

localStorage.removeItem(key);

localStroage.clear();

속성 설명

storageArea 스토리지유형(세션인지 로컬인지) 표시

key 변경된키

oldValue 키의이전값

newValue 키의새로운값

url 키가변경된페이지의 URL

<body>

<h2>세션스토리지(Session Storage)</h2>

<input type="text" name="" value="" id="first”>

<button onclick="javascript:savetheSession();">저장!</button>

<div id="displaysession">비어있음</div>

<h2>로컬스토리지(Local Storage)</h2>

<input type="text" name="" value="" id="second”>

<button onClick="jascript:savetheLocal();">저장!</button>

<div id="displaylocal">비어있음</div>

</div>

</body>

28Do it! HTML5+CSS3

window.onload = function(){

gettheSession(); //세션스토리지데이터가져오기

gettheLocal(); //로컬스토리지데이터가져오기

};

결과보기

storage.html

storage.html

storage.html

storage.html

29Do it! HTML5+CSS3

기존웹페이지는단일쓰레드모드

오래걸리는스크립트를수행하면기다려야한다.

다른 UI 작업을할수없다.

But, 웹워커를사용하면

웹페이지에서도멀티쓰레드가능

오래걸리는쓰레드를실행하는동안, 백그라운드쓰레드에서스크립트실행

http://caniuse.com

http://caniuse.com/

31Do it! HTML5+CSS3

시간이오래걸리는작업이라면워커에게부탁해!

예) 복잡한수학적계산작업, 리소스에대한액세스작업

UI 쓰레드에방해를받지않고계속수행해야하는작업

32Do it! HTML5+CSS3

①워커만들기

②워커에메시지보내기

③다른작업을함

③워커에서메시지받음

④워커실행

⑤실행이끝나면메시지보내기

…..

⑥워커로부터메시지받음

웹워커를실행하지않은파일 웹워커를실행한파일

html5-ppt/DAY4-API/woker_test1.html

html5-ppt/DAY4-API/woker_test2.html

<body>

<p>

<label for="worker-start-value">

<strong>Start value</strong>

</label><br>

<input type="text" id="worker-start-value" value="0">

</p>

<p>

<input id="start-worker" type="button" value="Start Worker">

<input id="stop-worker" type="button" value="Stop Worker">

</p>

<h3>Web Worker results:</h3>

<p id="worker-results"> (not started yet)</p>

</body>

35Do it! HTML5+CSS3

웹워커는 Worker 객체를통해실행된다.

워커를만들려면워커쓰레드를실행할스크립트파일의경로지정

<script>

var worker;

function createWorker () {

worker = new Worker("worker.js");

}

36Do it! HTML5+CSS3

워커에메시지를보낼때는 postMessage 메서드를호출

document.getElementById("start-worker").onclick = function ()

{

createWorker();

worker.postMessage(document.getElementById("worker-

start-value").value);

}

37Do it! HTML5+CSS3

•워커에서 onmessage 이벤트핸들러로받는다.

•워커에서실행할파일(worker.js) 파일의맨처음에서

onmessage를이용해크리에이터에서보낸이벤트를받는다.

(worker.js 파일)

onmessage = function (event) {

var i=event.data;

for (n=1000001; i<n; i++) {

postMessage(i);

};

};

38Do it! HTML5+CSS3

워커에서필요한작업을모두마치면워커에서크리에이터로

결과값을보내야한다.

postMessage 메서드를사용합니다.

(worker.js 파일)

onmessage = function (event) {

var i=event.data;

for (n=1000001; i<n; i++) {

postMessage(i);

};

};

39Do it! HTML5+CSS3

크리에이터에서 onmessage 이벤트핸들러를사용한다.

worker.onmessage = function (event) {

document.getElementById("worker-results").innerHTML =

event.data;

};

40Do it! HTML5+CSS3

워커에서런타임오류가발생하면 onerror 이벤트핸들러가호출된다.

worker.onerror = function (event) {

document.getElementById("worker-results").innerHTML = "An

error occurred";

};

41Do it! HTML5+CSS3

워커를중간에종료하려면(“stop worker” 버튼을누르면) 워커의terminate 메서드를호출한다.

워커쓰레드는작업을종료하지않은상태에서멈춘다.

document.getElementById("stop-worker").onclick = function () {

if (worker) {

worker.terminate();

}};

42Do it! HTML5+CSS3

현재위치에대한위도, 경도같은위치정보를얻을수있다.

HTML 5 는위치정보와관련한 Geolocation 스펙을포함하고있다(엄밀히 말하자면이스펙은 HTML Working Group 과분리되어있는 Geolocation Working Group에의해표준화가진행되고있다고한다)

http://www.w3.org/2008/geolocation/

http://caniuse.com

그리고아래는 http://diveintohtml5.org/geolocation.html 에서발췌한브라우저지원현황이다아래표를보면아이폰이나안드로이드와같은모바일환경에서도Geolocation을지원한다고나와있다Geolocation 자체가장치의위치정보를이용하는것이기에모바일장치의지원은더자연스럽다(참고: 오페라 10.6 이후지원됨)

http://caniuse.com/

http://diveintohtml5.org/geolocation.html

http://cfile22.uf.tistory.com/original/14092F1B4C5FA1DC1527BF



위치정보는사용자동의가있어야한다웹응용프로그램이나의정보를이렇게쉽게얻어갈수있는것인가?

만일그렇다면굉장한사회적(?) 문제가될것이다따라서사용자의위치정보는반드시사용자의허가를받아서수집할수있도록되어있다

브라우저에서 Geolotion API를이용해서위치정보를액세스하려고하면,

아래보는바와같이사전동의를구하게된다.(파이어폭스 예)

만일동의를하지않게되면나의위치정보를웹응용프로그램이알수없게되는것이다

45Do it! HTML5+CSS3

①지오로케이션서비스를사용할수있는브라우저인지체크

if (navigator.gelocation) {

/* 지오로케이션 API 소스작성 */

}

else {

alert("이브라우저에서는지오로케이션서비스를사용할수없습니다.");

}

②현재위치확인 – getCurrentPosition 메서드

③현재위치계속확인 – watchPosition 메서드

지오로케이션 API는 window.navigator 객체의자식객체인 geolocation 객체를통해실행된다.

사용자의현재위치를알아내려면 getCurrentPoition 메서드호출.

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition, onError);

navigator.geolocation.watchPosition(showPosition);

} else {

onError();

}

function showPosition(position) { .... }

function onError() { ... }

사용자위치의변화를계속해서추적하려면 watchPosition 메서드이용

업데이트되는위치정보를일정하게호출하도록설정한다.

정확한값이반환되지않을경우오류호출.

var watchID =

navigator.geoloacation.watchPosition(function(position) {

do_something(position.coords.latitude,position.coords.longitude);

});

48Do it! HTML5+CSS3

사용자위치설명 – position 객체이용

timestamp : 위치를가져온시간

coords : nsIDOMGeoPositionCoords 객체를이용해좌표표시

latitude 사용자위치의위도

longitude 사용자위치의경도

altitude 사용자위치의표고. 표고를지원하지않는장비에서는 0

accuracy 위치정보의오차

altitudeAccuracy 표고정보의오차. 표고를지원하지않는장비에서는 0

heading 사용자의진행방향

speed 사용자가움직이는속도. m/s로표시

nsIDOMGeoPositionCoords 객체의속성

address : 나라나시, 거리등주소를표시하는nsIDOMGeoPositionAddress

객체

getCurrentPositio 메서드나 watchPosition 메서드를호출하는동안다음과같이오류콜백을실행할수있습니다.

function errorCallback(PositionError error);

필드 설명

code 다음의에러코드중하나

UNKNOWN_ERROR인터페이스에 있는 다른 오류 코드로는 정의할 수 없는 오류로

인해위치인식프로세스가실패했을때. (상수값 0)

PERMISSION_DENIED애플리케이션이 지오로케이션 API를 사용할 권한이 없어서 위

치인식프로세스가실패했을때. (상수값 1)

POSITION_UNAVAILABLE위치 인식 프로세스에 사용된 하나 이상의 위치 제공자가 내부

오류를유발하여프로세스가실패했을때. (상수값 2)

TIMEOUT새로운 Position 객체를 성공적으로 가져오기 전에 지정한 최대

시간이모드흘렀을때. (상수값 3)

message로그와 디버깅을 위해 사람이 읽을 수 있는 오류 메시지를 표시

함.

7. html5 api

Documents