Jump To VB.NET

전체 글

[HTML 5] 20. File API

2011. 6. 30. 09:33

안녕하세요?

이번엔 HTML 5 의 File API 를 살펴보려 합니다.

이젠 Web Application 으로 사용자 PC 의 파일을 건드릴 수 있습니다. File API 로 요... 이젠 훨씬 더 많은 일들을 할 수 있겠죠?
엄청나다고 생각하지 않으신가요?

19-1. File API Interface

File interface
FileReader interface

File interface 를 사용하면 File 의 File Name 이나 Size 등 기본적인 정보에 접근 할 수 있습니다.
File Reader interface 는 File 의 내용을 읽을 수 있는 기능을 제공합니다.

아... 갑자기 걱정하시는 분들이 계시겠죠?
그럼. 보안은? 이라고...
File interface 는 Browser 가 막 건드릴 수있는 것이 아니라 File 선택 Form 이나 Drag & Drop 을 통해서 사용자가 직접 선택한 File에 한정되므로 안심해도 좋을 것입니다.

19-2. File interface

File interface 가 가지고 있는 속성과 함수는 다음과 같습니다.

Attribute/Method	설명
name	File 이름
type	File 의 MIME Type(알수 없을때는 null)
urn	File 의 범용 식별자
size	File Size
slice(start, length)	시작위치와 끝 위치를 지정하여 파일의 내용을 잘라내 새로운 Blob객체를 만드는 함수

위 사항들은 아래 예제에서 사용법을 확인하실 수 있을 것입니다.

19-3. FileReader interface

FileReader interface 는 비동기적인 상황에서 사용을 하는데요.
다음은 FileReader interface 가 가지고 있는 속성과 함수들입니다.

Attribute/Method	설명
readAsBinaryString(fileBlob)	File 내용을 읽어 Binary 문자열로 저장
readAsText(fileBlob, encoding)	File 내용을 읽어 들여 문자열로 저장, 두번째 인수는 File 의 문자 encodeing 을 지정할 수 있음(기본값 : UTF-8)
readAsDataURL(file)	File 내용을 읽어 dataURL 형식의 문자열로 저장
result	읽어들인 File 내용
error	error 발생시의 error 정보
onload	읽어들이기에 성공 했을 때 호출하는 event handler. load event 에 대응
onprogress	읽어들이기의 진행 상황을 얻을 수있는 event handler. progress event 에 대응
onerror	읽어들이기 error 시에 호출되는 event handler. error event 에 대응.

19-4. Error

다음은 FileReader 가 동작하는 중에 발생하는 Error 에 대한 상수값들입니다.

상수	Code	설명
NOT_FOUND_ERR	1	읽을 File 을 찾지 못할때
SECURITY_ERR	2	Web Application 이 Access 하기에 안전하지 못한 File일 때 File 에 너무 많은 읽기 호출이 있을 때 사용자의 선택한 이후에 File 에 변경이 있을 때 인 상황에서 사용할 수 있습니다.
ABORT_ERR	3	예를 들어 abort() 함수 호출과 같은 것으로 인해 읽기가 중지되었을 때
NOT_READABLE_ERR	4	File 접근 권한 문제와 같은 것으로 인해 File 을 읽지 못할때
ENCODING_ERR	5	동기적, 비동기적으로 readAsText() 함수를 사용할 때는 사용할 수없습니다. DataURL FH 로 표현될 수 있는 File 이나 Blob 을 구현한 제한된 곳의 DataURL 에 대한 URL 길이 제한에 걸렸을 때

19-5. 사용법

File interface 는 다음과 같이 사용할 수있습니다. File Name 과 File Size 를 조회합니다.

var file = document.getElementById("file").files[0];

document.getElementById("fileName").textContent = file.name;
document.getElementById("fileSize").textContent = "(" + file.size + "byte)";

다음은 FileReader 를 생성하여 사용하는 방법입니다.

var reader = new FileReader();

19-6. 예제

이젠 위 내용들을 바탕으로 예제를 살펴보겠습니다.
아래 예제는 File interface 와 FileReader interface 를 사용하여 File 을 선택하여 File 의 이름과 Size 를 표시하고, File 의 내용을 읽어 TextBox 에 표시합니다.

<!DOCTYPE html>
    <head>
        <title>HTML5 File API Test</title>
        <meta charset="utf-8" />
    </head>
    <script>
        function readFile() {
            var file = document.getElementById("file").files[0];

            document.getElementById("fileName").textContent = file.name;
            document.getElementById("fileSize").textContent = "(" + file.size + "byte)";

            var reader = new FileReader();

            reader.onload = function() {
                var display = document.getElementById("content");
                display.textContent = reader.result;
            };

            reader.onerror = function(evt) {
                alert(evt.target.error.code);
            };

            var encodingList = document.getElementById("encoding");
            var encoding = encodingList.options[encodingList.selectedIndex].value;

            reader.readAsText(file, encoding);

        };
    </script>
    <body>
        <h1>HTML5 File API 테스트</h1>
        <select id="encoding">
            <option>UTF-8</option>
        </select>
        <button onclick="readFile()">읽기</button><br />
        <div>
            <span id="fileName">File Name</span>
            <span id="fileSize">File Size</span>
        </div>
        <textarea id="content" readonly style="width:600px; height:400px;"></textarea>
    </body>
</html>

(발췌: 혁명을 꿈꾸다 HTML5 & API 입문)

위 파일은 저장할 때 UTF-8 방식으로 저장해 주십시요. 읽을 때 Encoding 을 UTF-8 로 읽겠다고 했으니 말이죠...

Web Page 를 실행시키고 위 파일을 다시 읽어봤습니다.

저작자표시 비영리 변경금지 (새창열림)

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 2. HTML4 vs HTML5 (1) - 동영상 (0)	2011.07.15
[HTML 5] 1. HTML 5 개요 - 동영상 (0)	2011.07.15
[HTML 5] 19. SVG (0)	2011.06.29
[HTML 5] 18. Geolocation API (0)	2011.06.27
[HTML 5] 17. Web Socket (1)	2011.06.25

[HTML 5] 19. SVG

2011. 6. 29. 08:59

안녕하셔요? 이번엔 SVG 를 살펴보려합니다.

SVG. Scalable Vector Graphics 의 약자로 XML 을 기반으로 한 Drawing 표준을 이야기합니다.
SVG 는 HTML 5 가 논의되기 이전부터 사용되던 기술로 HTML 5 페이지 상에 선, 곡선, Path, 도형 등을 Vector 로 표현할 수 있다는 Canvas 와는 조금 다른 점이 있습니다.
Canvas 와는 다르게 Pixel 단위의 이미지밖에 표현할 수 없는 Web Page 에서 interactive 한 animation 이나 Vector graphic 을 SVG를 이용하여 표현할 수 있습니다. Silverlight 나 Flash 를 떠올려 보시면 좋겠죠...

SVG 가 표현할 수 있는 효과들을 간단히 살펴보면

기본 도형(예: 원, 다각형)
기타 image 형식 (예: PNG)
Bezier Pass, Curve
Text
Transparency
Transformation(회전, 기울이기, 확대/축소)
Gradient
Animation

뭐... Canvas 에서도 SVG 를 읽어 표현할 수있다고 하는데 직접 관련이 있는 것은 아닙니다.

그럼 Canvas 와 SVG 와의 차이점을 알아보도록 하죠.

	Canvas	SVG
이미지 처리방식	Bitmap	Vector
DOM	존재하지 않음(DOM Control 불가)	존재함(Script 로 Control 가능)
외부 이미지 편집	Bitmap image 편집 용이	Vector image 편집 용이
성능	높은 해상도의 이미지를 사용하면 성능 저하	이미지가 복잡해질수록 Markup 이 복잡해져 성능이 저하
Animation	Animation API 가 없으므로 Script 의 Timer 를 사용	높은 수준의 Animation 을 지원
Cross Browsing	모든 Web Browser 에서 지원하지 않음	모든 Browser 에서 지원되는 Drawing 표준
외부 이미지로 저장	jpg, png 등으로 저장 가능	불가
적합한 서비스	Graph 구현, Game	Graph 구현, 매우 세밀한 해상도를 지원하는 UI 및 Application
적합하지 않은 서비스	Standalone Application UI	Game

이런 SVG 의 장점은 다음과 같은 것들을 들 수 있습니다.

접근성	image 를 접근 가능하게 만들기 위해 설계되었습니다.
파일크기	bitmap image 보다 작습니다.
크기 조절에도 깨지지 않음	Vector graphic 의 특징.
Script 조작 가능	JavaScript 와 DOM 으로 접근 가능.
Animation	SGV 언어 Core 자체에 animate 기능이 내장되어 있습니다.

18-1. 사용법과 예제
XML 을 기반으로하기 때문에 기본적으로는 XHTML 에서만 사용할 수 있습니다만 HTML 상에서도 표현이 가능합니다.

SVG 문서는 SVG Element, SVG Attribute, CSS 로 구성됩니다.
SVG 는 XHTML 문서 자체에 인라인으로 들어가거나 별도의 SVG 파일로 작성된 후 object 나 img Element 로 HTML 이나 XHTML 문서와 링크되어 삽입됟 수 있는데 어느 방식이든 모든 SVG 의 Root Element 는 SVG 입니다.

SVG 를 Web Page 에 넣는 방법은 두가지가 있습니다.
1. SVG 파일을 img 나 Object Tag 에 삽입하는 방법.
2. Web Page 에 직접 삽입하는 방법.

먼저 Tag 에 SVG 파일을 삽입하는 방법입니다.

<!DOCTYPE html>
<head>
    <title>SVG Test</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML5 SVG Circle</h2>
    <img src="SVG_Test.svg" alt="Test SVG" />
    <object type="image/svg+xml" data="SVG_Test.svg" width="300px" height="300px">
        <p>사용하시는 Browser 는 이 그림을 표시하는 기능이 없습니다.
        <a href="http://www.adobe.com/svg/viewer/install/main.html">SVG 플러그인</a>을 설치해보셔요.</P>
    </object>
</body>
</html>

SVG_Test.svg

이 방법의 특징은 모든 Web Browser 에서 지원을 하는 방법이라는 것입니다.
반면 아래의 직접 SVG를 입력하는 방법은 ie, chrome 을 제외한 Browser 는 지원하지 않습니다.

다음은 Web Page 에 직접 SVG 를 입력하는 방법입니다.

<!DOCTYPE html>
<head>
    <title>SVG Test</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML5 SVG Circle</h2>
    <svg id="svgelem" height="600" xmlns="http://www.w3.org/2000/svg">
        <circle id="redcircle" cx="150" cy="150" r="150" fill="cyan" />
        <rect id="redrect" x="100" y="100" width="300" height="100" fill="red" />
        <line x1="0" y1="0" x2="200" y2="400" style="stroke:blue;stroke-width:2"/>
        <ellipse cx="150" cy="350" rx="100" ry="50" fill="brown" />
        <polygon points="20,10 300,20, 170,50" fill="green" />
        <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="pink" />
        <defs>
            <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
            <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
        </defs>
        <ellipse cx="200" cy="250" rx="100" ry="50" style="fill:url(#gradient)" />
    </svg>
</body>
</html>

그럼 이번엔 Animation 기능을 넣어 볼까요?

<!DOCTYPE html>
<head>
    <title>SVG Test</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML5 SVG Animation Test</h2>
    <img src="SVG_Animate_Test.svg" alt="Test SVG" />
    <object type="image/svg+xml" data="SVG_Animate_Test.svg">
        <p>사용하시는 Browser 는 이 그림을 표시하는 기능이 없습니다.
        <a href="http://www.adobe.com/svg/viewer/install/main.html">SVG 플러그인</a>을 설치해보셔요.</P>
    </object>
</body>
</html>

SVG_Animate_Test.svg

(발췌 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS)

아래 Capture image 는 위 코드를 실행한 결과 입니다. Animation 기능이 동작하네요...(두 도형이 점차로 커졌다가 작아지는 것을 반복하는 예제입니다.)

위 SVG 코드들을 작성하다보니 초기 WPF 코드를 작성하는 기분이 들었습니다. 손으로 노가다 해가면서 돌려보고, 수정하고, 돌려보고...

그래서 SVG Editor 를 몇가지 찾아 보았습니다.

inkscape (http://inkscape.org/)

Sketsa SVG Editor (http://www.kiyut.com/products/sketsa/index.html)

SVGDeveloper (http://www.perfectsvg.com/)

제가 보기엔 SVGDeveloper 가 매력적이네요...
SVG 에 관심이 있으신 분들께서는 위 Editor 를 다운받아서 설치해보시고 테스트 해보셔도 좋을 듯합니다.

SVG 는 Silverlight 이나 Flash 같은 Vector Graphic 을 사용하는 플러그인을 사용하지않고도 HTML 만으로? Vector Graphic 을 구현할 수 있는 환경을 만들어 준다는 장점이 있습니다. 하지만 SVG 를 작성하고, SVG 요소들을 DOM 조작을 통해 화려하고 interactive 한 Web 을 구현할 수 있을 것입니다. 하지만 이런 DOM 을 통한 Control 은 Memory 소모가 심하고 성능문제를 유발할 수도 있을 것입니다. 더우기 Canvas 를 통해 구현할 수있는 것까지(단순 이미지 동적생성같은...) SVG 를 사용할 필요는 없을 것입니다. Canvas 와 SVG 간의 특징을 잘 알고 적재적소에 사용할수 있도록 많은 연구가 필요할 것입니다.

그럼 이만 SVG 에 대한 살펴보기를 마치겠습니다.

위의 내용들은
웹표준 가이드 HTML5 CSS3
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.

행복한 고수되십시요...

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

저작자표시 비영리 변경금지 (새창열림)

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 1. HTML 5 개요 - 동영상 (0)	2011.07.15
[HTML 5] 20. File API (2)	2011.06.30
[HTML 5] 18. Geolocation API (0)	2011.06.27
[HTML 5] 17. Web Socket (1)	2011.06.25
[HTML 5] 16. Web Worker (0)	2011.06.23

[HTML 5] 18. Geolocation API

2011. 6. 27. 07:53

안녕하십니까?

이번엔 Geolocation API 를 살펴보겠습니다.

Geolocation API 는 HTML 5 에 새롭게 추가된 사용자의 위치정보를 얻기위한 JavaScript API 입니다.
여러분들도 잘 아시겠지만 이젠 위치정보를 기반한 서비스가 우리 생활 곳곳에 퍼져있으며 많은 서비스들이 위치정보와 연동하여 사용자들에게 UX 의 편리함을 줄 것입니다.

Geolocation API 는 세개의 Method 로 이루어진 API 입니다.

그 전 먼저 알아야 할 점은 현재의 위치정보가 Network 정보로 부터 추측한 것인지 GPS 로 부터 얻은 것인지에 관한 자세한 내용은 알 수 없다는 것입니다. 단지 GPS 가 내장된 Smartphone 과 같은 Device 에서는 GPS 기능을 활용할 수있고 일반 PC 에서는 WiFi 같은 정보를 이용해서 현재 정보를 알아 낼 수 있습니다.
Geolocation 은 위치정보에 대한 정보를 GPS, WiFi IP Address, GSM/CDMA 망을 사용하는 휴대전화의 IDs 등에서 얻어옵니다. 다만 PC 에서는 한정된 정보만 제공하여 이용이 불가능한 경우가 있고 특히 Mobile Browser 에서 유용한 API 라고 할 수있습니다.

17-1. 사용법
Geolocation API 와 관련된 함수는 모두 window.navigator 객체에 정의되어 있습니다.
다음 Method를 사용하여 위치정보를 얻어 올수 있습니다.

현재 위치를 한번만 얻기 위한 함수입니다.

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

다음 함수를 이용하여 위치정보를 계속 확인합니다.

var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);

성공시 호출되는 successCallback 함수에 전달되는 위치정보에는 다음과 같은 정보들이 포함됩니다.

위치정보 속성	coords 속성	설명
coords	latitude	위도
	longitude	경도
	altitude	표고
	accuracy	위도, 경도의 오차 (단위와 오차)
	altitudeAccuracy	표고의 오차 (단위와 오차)
	heading	Device 의 진행 방향. 북쪽을 기준으로 한 시계방향의 각도로 나타냄
	speed	Device 의 진행 속도(미터/초). (이용할 수 없을 때는 null)
timestamp		위치정보를 얻은 시각(1970년 1월 1일 부터의 milisecond)

Error 발생시 호출되는 errorCallback 함수에 전달되는 객체에 담겨져 있는 속성과 상수들입니다.

속성/상수	설명
code	Error Code
UNKNOWN_ERROR	알수 없는 Error (Error code 값 : 0)
PERMISSION_DENIED	권한 없음 Error (Error code 값 : 1)
POSITION_UNAVAILABLE	위치정보를 얻을 수 없음 (Error code 값 : 2)
TIMEOUT	시간제한 초과 (Error code 값 : 3)
message	Error Message

위치정보를 조회시 입력하는 세번째 Parameter 인 option 에 지정할 수 있는 것들은 다음과 같습니다.

속성/상수	설명
enableHighAccuracy	정확도가 높은 위치 정보를 요청
timeout	위치 정보 확인에 시간제한을 설정. 시간제한을 초과하면 TIMEOUT error 발생
maximumAge	위치정보의 유효기간을 설정. 0 을 지정하면 항상 새로운 위치정보를 요청함

option 의 사용법은 아래와 같습니다.
내용을 보면 위치정보의 유효기간은 0 으로 항상 새로운 위치정보를 가져오며, 정확도 높은 위치정보를 요청합니다. 그리고 timeout 은 3초로 설정하고 있습니다.

navigator.geolocation.getCurrentPosition(successCallback, errorCallback,

{maximumAge: 0, enableHighAccuracy: true, timeout: 3000 }

);

17-2. Bing Map 사용하기
예제로 Bing Map 을 사용해 보려합니다.
Bing Map 을 사용하기위해서 사전에 사용자 등록을 하고 사용 Key 를 받아야 하는데요. 간단히 Key 를 받는 과정을 보도록 하겠습니다.

Site 주소는 http://www.microsoft.com/maps/developers/web.aspx 입니다.

Get Account 를 클릭합니다.
Capture 가 안되었지만 Windows Live ID Passport 인증을 한번 묻습니다.
여러분들 모두 MSN Live Messenger 사용하시죠? 입력하시고 Login 이 완료되면 다음 화면으로 넘어갑니다.

새롭게 받을 거니까요...
New User 쪽의 Create 를 클릭합니다.

* 표시가 되어 있는 란에 간단하게 입력합니다.

조금 기다리시면 Account ID 가 생성이 됩니다. 그럼 "Create or view Keys" 를 Click 합니다.

* 표시가 되어 있는 란에 간단히 입력하시고요... "Submit" 버튼을 Click 합니다.
또 잠시 기다립니다.

아랫쪽에 보시면 짜자잔.. Key 가 생성이 되었군요.
이 생성된 Key 를 다음에 진행될 Geolocation 예제 소스에 Key 를 입력하는 곳에 입력해 주십시요.

17-3. 예제.

예제를 살펴보겠습니다.
이 예제는 제 PC 에서 동작할 것입니다. 이전에 설명드렸듯이 PC 에서 진행하는 경우 아주 제한적입니다. 주로 서울시 시청이 많이 찍히는데요. 그 옆동네가 찍히기도 합니다. ^^;

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    margin: 0;
    height: 100%;
    background-color: #404040;
}
#map {
     position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 600px;
    margin-left: -400px;
    margin-top: -300px;
}
</style>

<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">

    var _map;

    function GetMap() {
        // Create a Bing map
        _map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "이곳에 Key를 넣습니다." });
        // Get the current position from the browser
        if (!navigator.geolocation)
            alert("This browser doesn't support geolocation");
        else
            navigator.geolocation.getCurrentPosition(onPositionReady, onError, { maximumAge: 0, timeout: 30000, enableHighAccuracy: true });
    };

    function onPositionReady(position) {
        // Apply the position to the map
        var location = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);
        _map.setView({ zoom: 18, center: location });
        // Add a pushpin to the map representing the current location
        var pin = new Microsoft.Maps.Pushpin(location);
        _map.entities.push(pin);
    }

    function onError(err) {
        switch (err.code) {
            case 0:
                alert("Unknown error");
                break;
            case 1:
                alert("The user said no!");
                break;
            case 2:
                alert("Location data unavailable");
                break;
            case 3:
                alert("Location request timed out");
                break;
        }

    }
</script>
</head>
<body onload="GetMap();">
<div id="map" />
</body>
</html>

(참조 : http://www.wintellect.com/CS/blogs/jprosise/archive/2011/03/27/making-web-apps-sizzle-with-bing-maps-and-html5-s-geolocation-api.aspx)

위 소스를 각 Browser 에서 실행시키면 먼저 사용자의 위치정보를 공유하겠느냐 라는 메세지 창을 띄워 Geolocation 사용에 대한 동의를 구한 후 화면을 띄우게 됩니다.

같은 Page를 띄우긴 했지만 다른곳이 나오죠? ㅋㅋ
PC 에서는 신경쓰지 마셔요...

Google Map 의 경우는 Bing Map 보다는 Key 를 입력할 필요없이 Test 가 가능하기때문에 조금은 쉬우리라 생각합니다. 구현방법은 약간 차이가 나겠지만요...

간단하게라도 살펴보시니 어떠십니까? Geolocation 을 여러분의 Site 에 적용하고 싶은 생각이 드시나요?

회사 Web Site 에 살짜기? 몰래 올려서 테스트 해보시면 하루가 즐겁지 않을까효~~?

위의 내용들은
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.

행복한 고수되십시요.

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

저작자표시 비영리 변경금지 (새창열림)

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 20. File API (2)	2011.06.30
[HTML 5] 19. SVG (0)	2011.06.29
[HTML 5] 17. Web Socket (1)	2011.06.25
[HTML 5] 16. Web Worker (0)	2011.06.23
[HTML 5] 15. Web SQL Database (0)	2011.06.21

PREV 1 ···97 98 99 100 101 102 103 ···200 NEXT

Jump To VB.NET

전체 글

[HTML 5] 20. File API

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 19. SVG

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 18. Geolocation API

'Web > HTML 5' 카테고리의 다른 글

+ Recent posts

티스토리툴바