[UI 연구] 미래에 UI

UI 연구 2010. 10. 28. 12:50

저작자표시 비영리 변경금지
Posted by LocalUser::::::
,

ActionScript 3.0 으로 브라우저 종류 알아내기

Flash Dev/AS3.0 2009. 3. 30. 22:22

Flash Player가 Cross OS, Cross Browser가 된다고 한다지만 유독 한글 입력 문제에 있어서 만큼은 제대로 되지 않는 경우가 있다. 가령 MS Windows 환경에서 Explorer외에 Firefox, Safari, Chrome, Opera 등에서 SWF를 브라우저에 Embed할 때 wmode를 transparent로 지정하면 TextField에 한글입력이 되지 않는다.(2009년 3월 25일 현재)

본인은 스타플(http://starpl.com)의 별지도에 댓글 달기 기능을 추가하면서 사용자의 OS, Browser를 판별하여 한글입력이 되지 않는 Browser의 경우 “*한글 입력이 되지 않아요!”라는 문구를 넣어야 했다.


위처럼 IE 경우엔 한글입력이 잘되므로 문구가 필요없다.


그러나 FireFox의 경우에는 한글입력이 되지 않아서 문구가 들어간다. 저 문구를 누르면 문제에 대한 안내페이지로 이동하게 되어 있다.

불행히도 ActionScript 3.0 라이브러리에서는 사용자가 어떤 브라우져를 이용하는지 알 수 있는 API를 제공하지 않고 있다. 그럴만도 한 것이 SWF는 브라우저에 Embed되어 작동되는 것 외에도 Flash Player 자체에서도 동작하기 때문일 것이다. (참고로 flash.system.Capabilities의 os 속성을 이용해 운영체제의 상세정보는 얻어올 수 있다.)

다행히도 사용자의 Browser정보를 알 수 있는 방법은 있다. 그것은 JavaScript 를 이용하는 것이다. JavaScript를 이용해만 쉽게 Browser 종류, 버전, OS 종류등을 얻어올 수 있다.

관련정보를 검색해본 끝에 Browser 종류, 버전, OS 종류를 범용적으로 사용할 수 있는 Javascript 코드를 발견했다. 아래 링크를 참고하자.

Browser detect : http://www.quirksmode.org/js/detect.html

사용자는 Javascript코드내에서 단지 아래처럼 사용하면 그만이다.

  • Browser name: BrowserDetect.browser
  • Browser version: BrowserDetect.version
  • OS name: BrowserDetect.OS

너무 편하다. 그럼 이것을 어떻게 ActionScript 3.0 에서 사용할 수 있다는 것인가? 결과적으로 flash.external.ExternalInterface를 이용하면 된다. ExternalInterface의 call()메소드를 이용해 JavaScript 코드를 호출하면 된다. 여기서 두가지 선택을 하게 된다.

  1. 위의 BrowserDetect를 js 파일로 만들어 HTML에 포함해서 ActionScript 3.0에서 ExternalInterface로 호출
  2. 위의 BrowserDetect를 커스터마이징한 JavaScript 코드를 ActionScript 3.0에 삽입해서 ExternalInterface로 호출

첫번째 방법은 ExternalInterface를 학습한 사람이라면 쉽게 접근할 수 있을 것이다. 하지만 AS3 코드와  JavaScript 코드가 둘로 나뉘어 관리하기가 힘들어지는 단점이 있다. 그래서 하나의 AS3에서 관리할 수 있는  두번째 방법으로 문제를 해결하고자 한다.

view source
print?
001.package com.starpl.utils
002.{
003.    import flash.external.ExternalInterface;
004.  
005.    /**
006.     * Browser detect
007.     * @author Yongho Ji
008.     * @since 2009.03.24
009.     * @see http://www.quirksmode.org/js/detect.html
010.     */
011.    public class BrowserDetectUtil
012.    {
013.        /**
014.         * Here we define javascript functions which will be inserted into the DOM
015.         */
016.        private static const DATA_OS:String =
017.                "var dataOS = [" +
018.                    "{" +
019.                        "string: navigator.platform," +
020.                        "subString: \"Win\"," +
021.                        "identity: \"Windows\"" +
022.                    "}," +
023.                    "{" +
024.                        "string: navigator.platform," +
025.                        "subString: \"Mac\"," +
026.                        "identity: \"Mac\"" +
027.                    "}," +
028.                    "{" +
029.                        "string: navigator.userAgent," +
030.                        "subString: \"iPhone\"," +
031.                        "identity: \"iPhone/iPod\"" +
032.                    "}," +
033.                    "{" +
034.                        "string: navigator.platform," +
035.                        "subString: \"Linux\"," +
036.                        "identity: \"Linux\"" +
037.                    "}" +
038.                "];";
039.  
040.        private static const DATA_BROWSER:String =
041.                "var dataBrowser = [" +
042.                        "{" +
043.                            "string: navigator.userAgent," +
044.                            "subString: \"Chrome\"," +
045.                            "identity: \"Chrome\"" +
046.                        "}," +
047.                        "{" +
048.                            "string: navigator.userAgent," +
049.                            "subString: \"OmniWeb\"," +
050.                            "versionSearch: \"OmniWeb/\"," +
051.                            "identity: \"OmniWeb\"" +
052.                        "}," +
053.                        "{" +
054.                            "string: navigator.vendor," +
055.                            "subString: \"Apple\"," +
056.                            "identity: \"Safari\"," +
057.                            "versionSearch: \"Version\"" +
058.                        "}," +
059.                        "{" +
060.                            "prop: window.opera," +
061.                            "identity: \"Opera\"" +
062.                        "}," +
063.                        "{" +
064.                            "string: navigator.vendor," +
065.                            "subString: \"iCab\"," +
066.                            "identity: \"iCab\"" +
067.                        "}," +
068.                        "{" +
069.                            "string: navigator.vendor," +
070.                            "subString: \"KDE\"," +
071.                            "identity: \"Konqueror\"" +
072.                        "}," +
073.                        "{" +
074.                            "string: navigator.userAgent," +
075.                            "subString: \"Firefox\"," +
076.                            "identity: \"Firefox\"" +
077.                        "}," +
078.                        "{" +
079.                            "string: navigator.vendor," +
080.                            "subString: \"Camino\"," +
081.                            "identity: \"Camino\"" +
082.                        "}," +
083.                        "{" +
084.                            "string: navigator.userAgent," +
085.                            "subString: \"Netscape\"," +
086.                            "identity: \"Netscape\"" +
087.                        "}," +
088.                        "{" +
089.                            "string: navigator.userAgent," +
090.                            "subString: \"MSIE\"," +
091.                            "identity: \"Explorer\"," +
092.                            "versionSearch: \"MSIE\"" +
093.                        "}," +
094.                        "{" +
095.                            "string: navigator.userAgent," +
096.                            "subString: \"Gecko\"," +
097.                            "identity: \"Mozilla\"," +
098.                            "versionSearch: \"rv\"" +
099.                        "}," +
100.                        "{" +
101.                            "string: navigator.userAgent," +
102.                            "subString: \"Mozilla\"," +
103.                            "identity: \"Netscape\"," +
104.                            "versionSearch: \"Mozilla\"" +
105.                        "}" +
106.                    "];";       
107.  
108.        private static const FUNCTION_SEARCH_BROWSER:String =
109.            "document.insertScript = function ()" +
110.            "{" +
111.                "if (document.searchBrowser==null)" +
112.                "{" +
113.                    "searchBrowser = function ()" +
114.                    "{" +
115.                        DATA_BROWSER +
116.                        "var browser = null;" +
117.                        "for (var i=0;i<dataBrowser.length;i++)  " +
118.                        "{" +
119.                            "var dataString = dataBrowser[i].string;" +
120.                            "var dataProp = dataBrowser[i].prop;" +
121.                            "if (dataString) " +
122.                            "{" +
123.                                "if (dataString.indexOf(dataBrowser[i].subString) != -1)" +
124.                                "{" +
125.                                    "browser = dataBrowser[i].identity;" +
126.                                    "break;" +
127.                                "}" +
128.                            "}" +
129.                            "else if (dataProp)" +
130.                            "{" +
131.                                "browser = dataBrowser[i].identity;" +
132.                                "break;" +
133.                            "}" +
134.                        "}" +
135.                        "if( browser == null )" +
136.                        "{" +
137.                            "browser = \"An unknown browser\";" +
138.                        "}" +
139.                        "return browser;" +
140.                    "}" +
141.                "}" +
142.            "}";
143.  
144.        private static const FUNCTION_SEARCH_BROWSER_VERSION:String =
145.            "document.insertScript = function ()" +
146.            "{" +
147.                "if (document.searchBrowserVersion==null)" +
148.                "{" +
149.                    "searchBrowserVersion = function () " +
150.                    "{" +
151.                        DATA_BROWSER +
152.                        "var browser;" +
153.                        "for (var i=0;i<dataBrowser.length;i++)  " +
154.                        "{" +
155.                            "var browserString = dataBrowser[i].string;" +
156.                            "var browserProp = dataBrowser[i].prop;" +
157.                            "if (browserString) " +
158.                            "{" +
159.                                "if (browserString.indexOf(dataBrowser[i].subString) != -1)" +
160.                                "{" +
161.                                    "browser = dataBrowser[i];" +
162.                                    "break;" +
163.                                "}" +
164.                            "}" +
165.                            "else if (browserProp)" +
166.                            "{" +
167.                                "browser = dataBrowser[i];" +
168.                                "break;" +
169.                            "}" +
170.                        "}" +
171.                        "var versionSearchString = browser.versionSearch || browser.identity;" +
172.                        "var index;" +
173.                        "var version;" +
174.                        "version = navigator.appVersion;" +
175.                        "index = version.indexOf(versionSearchString);" +
176.                        "if (index != -1) " +
177.                        "{" +
178.                            "return parseFloat(version.substring(index+versionSearchString.length+1));" +
179.                        "}" +
180.                        "version = navigator.userAgent;" +
181.                        "index = version.indexOf(versionSearchString);" +
182.                        "if (index != -1) " +
183.                        "{" +
184.                            "return parseFloat(version.substring(index+versionSearchString.length+1));" +
185.                        "}" +
186.                        "return \"an unknown version\";" +
187.                    "}"+
188.                "}"+
189.            "}";    
190.  
191.        private static const FUNCTION_SEARCH_OS:String =
192.            "document.insertScript = function ()" +
193.            "{" +
194.                "if (document.searchOS==null)" +
195.                "{" +
196.                    "searchOS = function ()" +
197.                    "{" +
198.                        DATA_OS +
199.                        "var os = null;" +
200.                        "for (var i=0;i<dataOS.length;i++)   " +
201.                        "{" +
202.                            "var dataString = dataOS[i].string;" +
203.                            "var dataProp = dataOS[i].prop;" +
204.                            "if (dataString) " +
205.                            "{" +
206.                                "if (dataString.indexOf(dataOS[i].subString) != -1)" +
207.                                "{" +
208.                                    "os = dataOS[i].identity;" +
209.                                    "break;" +
210.                                "}" +
211.                            "}" +
212.                            "else if (dataProp)" +
213.                            "{" +
214.                                "os = dataOS[i].identity;" +
215.                                "break;" +
216.                            "}" +
217.                        "}" +
218.                        "if( os == null )" +
219.                        "{" +
220.                            "os = \"An unknown OS\";" +
221.                        "}" +
222.                        "return os;" +
223.                    "}"+
224.                "}"+
225.            "}";    
226.  
227.        private static var initFlag:Boolean = false;
228.        private static var _browserVersion:String = null;
229.        private static var _browser:String = null;
230.        private static var _os:String = null;
231.  
232.        private static function insertScript():void
233.        {
234.            if( initFlag ) return;
235.            if (! ExternalInterface.available)
236.            {
237.                throw new Error("ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
238.            }
239.  
240.            initFlag = true;
241.            ExternalInterface.call( FUNCTION_SEARCH_BROWSER );
242.            ExternalInterface.call( FUNCTION_SEARCH_BROWSER_VERSION );
243.            ExternalInterface.call( FUNCTION_SEARCH_OS );
244.        }
245.  
246.        /**
247.         * browser name
248.         */
249.        public static function get browser():String
250.        {
251.            if( _browser ) return _browser;
252.            insertScript();
253.            _browser = ExternalInterface.call( "searchBrowser" );
254.            return _browser;
255.        }
256.  
257.        /**
258.         * browser version
259.         */
260.        public static function get browserVersion():String
261.        {
262.            if( _browserVersion ) return _browserVersion;
263.            insertScript();
264.            _browserVersion = ExternalInterface.call( "searchBrowserVersion" );
265.            return _browserVersion;
266.        }
267.  
268.        /**
269.         * OS name
270.         */
271.        public static function get OS():String
272.        {
273.            if( _os ) return _os;
274.            insertScript();
275.            _os = ExternalInterface.call( "searchOS" );
276.            return _os;
277.        }
278.  
279.    }
280.}

 

사용법은 매우 간단하다.

  • Browser name: BrowserDetectUtil.browser
  • Browser version: BrowserDetectUtil.version
  • OS name: BrowserDetectUtil.OS

ExternalInterface를 활용하면 매우 무궁무진하게 확장이 가능해진다.

단, ExternalInterface를 사용할 수 있는 조건을 잘 고려해야한다. 첫번째로 ExternalInterface를 지원하는 Flash Player 버전을 확인한다. 둘째로 SWF를 Embed할때 allowScriptAccess속성과 allowNetworking 속성을 체크한다. 두번째의 경우 본인 블로그에 있는 “위젯도 마음대로 못다는 네이버 블로그” 글을 보면 되겠다.

 

참고글

글쓴이 : 지돌스타(http://jidolstar.com/blog/archives/1036)

저작자표시 비영리 변경금지
Posted by LocalUser::::::
,

한메일 아이폰/아이팟터치 개편!

iT기기 리뷰 및 설치/아이팟터치 2009. 3. 10. 16:05

작년 초, 아이폰 국내 출시 소식에 발맞추어 한메일에서는 아이폰과 아이팟 터치에 최적화된 페이지(Web apps)를 오픈한 바 있습니다.

그리고 1년 여 시간이 흐른 지금, 아직까지도 아이폰의 한국 출시는 요원하지만 아이팟 터치는 어느덧 수십 만대나 팔려 이제 주위에서 종종 볼 수 있는 기기가 됐습니다. 최근 Daum 모바일에서는 tv팟과 지도 어플리케이션을 공개해 뜨거운 반응을 얻고 있는 중이기도 하고요.

이에 한메일에서도 '한메일 Express' 사용자들을 위해 제공되어 오던 웹 메일 페이지를 전면 개편했습니다.

디자인팀의 수고로 새 옷을 갈아입은 게 일단 가장 큰 변화입니다만, 그 밖에도 많은 변화가 있었습니다.
중요한 사항만 요약하면 아래와 같습니다.

- 이제 모든 한메일 이용자가 쉽게 접근할 수 있습니다
  (m.mail.daum.net 또는 mail.daum.net/m 입력)
- 디자인이 크게 개편되었습니다!
- 한메일 Express > 환경설정의 '첫 화면 설정' 값이 한메일 아이폰에서도 반영됩니다
- 메일 목록 상단의 편지함 이름을 클릭하면 해당 편지함이 새로고침됩니다
- 전체 선택, 취소가 좀 더 직관적으로 변경되었습니다
- 안읽은 메일만 보기, 별표시만 보기, 나에게 보낸 메일만 보기 기능이 편지함 목록에 추가되었습니다
- 원본 메일에서 지정한 너비대로 본문을 표시하며, 지정되지 않은 경우 가로 해상도에 자동으로 맞춥니다
- 바탕화면 등록용 아이콘이 변경되었습니다
- 로그인 페이지도 최적화되었습니다

이제 모바일 기기에서 한메일을 이용하려면,
어디서든 m.mail.daum.net 이나 mail.daum.net/m 을 입력하세요.

앞으로도 더 많은 모바일 기기에 최적화 대응할 수 있도록 더 노력하겠습니다.

- 한메일/모바일 기획 이동준:ldjok






저작자표시 비영리 변경금지
Posted by LocalUser::::::
,

OTP(One Time Password)로 인터넷뱅킹 인증변경...

카테고리 없음 2009. 3. 3. 01:33

출처: http://moonhawk.tistory.com

얼마전부터 인터넷뱅킹 로그인시 계속 이상한(?) 팝업창이 떴었는데 그동안 무시하다가, 우연히 이번주부터 일정금액 이상 거래(1,000만원)시 인증방식을 변경해야 한다는 것을 알았습니다 -_-;
신분증을 가지고 가까운 국민은행 지점에 갔더니 조그마한 OTP 기계를 하나 주네요.

 

국민은행 홈피에서 이미지 펌

구형 USB메모리보다 좀 더 크고, 좀 더 두껍게 생겼습니다. ^^ 핸드폰이나 열쇠고리에 달 수 있도록 고리가 있습니다.
인터넷뱅킹시 기존의 보안카드 대신, 왼쪽의 버튼을 누르면 6자리의 난수가 생성되는데 이 숫자를 입력하는 것으로 거래방식이 변경되었네요.
소감은...
1. 보안카드 찾아서 입력하지 않아도 되니까 쪼금 더 편한 것 같습니다.
2. 주렁주렁 달고 다닐게 하나 더 늘었네요.
3. 배터리 교환이 안되고 수명이 다되면 재발급받아야 한답니다 (쀍!!!)
4. 난수가 어떻게 생성되고 은행에서는 어떻게 맞는 번호라는걸 인식할까요?(통신하는 것도 아닐텐데)
5. 왠지 해킹이 가능할 것 같습니다 -_-;

* 알고보니 OTP 안해도 'SMS 거래통보서비스' 라는걸 이용하면 기존의 보안카드 방식도 가능하다고 합니다. -_-;; 괜히 바꿨나...
저작자표시 비영리 변경금지
Posted by LocalUser::::::
,

아이팟 터치 2세대 - 처음 사용할때....

iT기기 리뷰 및 설치/아이팟터치 2009. 2. 15. 17:11

아이팟 터처 2세대를 주문하고 받아 봤을때
아이팟 터치 1세대에 비해서 확 줄어든 두깨가 눈에 띄었다.
정말 얇은 iT기기 이다.
터치를 한마디로 표현하면 스마트PC에 가까운
스마트 디스플레이 기기라 말할수 있다
대표적인 기능으로는 무선공유기가 있는 곳에서
언제든지 인터넷을 할수가 있고,
엑셀,파워포인트, PDF등등 여러 파일을 뷰어로 볼수가 있고,
음악, 동영상, 사진을 감상할 수 있고,
제일 좋은건 아주 다양한 무료, 유료 어플을 무선인터넷이 사용 가능하면
에플스토어롤 통해 다운받아 사용할 수 있는것이다.

우선 터치를 사용하려면 iTuens를 사용해야되고
iTuens를 사용할려면 회원가입을 해야한다.
회원가입할때 회원가입 마지막 부분에 카드 선택하는 부분이 있는데
대부분에 사용자는 카드번호를 입력해야지만 가입이 되는줄 알고있지만
카드 선택부분 오른쪽 끝을 보면 none 이라고 선택이있다
이것을 선택하면 카드번호를 입력을 안해도 가입이 된다.


저작자표시 비영리 변경금지
Posted by LocalUser::::::
,

icover사의 아이팟터치 2G 신형케이스 <비추천>

iT기기 리뷰 및 설치/아이팟터치 2009. 1. 11. 16:53
ㅡㅡ;
구입해서 실제로 보니
크롭 도금이라서 기스 안난다고 한거 같은데...
제가 구입해서 바로 포장 뜯어서 보니 기스가 난거로 왔네요.... ㅡㅡ;
제품에서 나는 냄새로 별로고.... 완젼 비추네요....
 
저작자표시 비영리 변경금지
Posted by LocalUser::::::
,

티스토리툴바