머드초보의 블로그

네이트에서 cyworld가 opensocial에 참가한다는 글을 보았는데요.
8월중에 api를 공개했네요. opensocial 표준으로 작성된 것으로 보이구요. 아직은 0.8인데, 0.9를 지원할 예정인 듯 합니다.

facebook 같은 경우에는 flash를 위한 라이브러리를 제공하는데요. 여긴 제공하지 않아서 javascript라이브러리를 이용해서 개발해야합니다. ExternalInterface를 이용하면 데이터를 받을 수 있고, 요청할 수 있습니다^^

개발자등록하기
http://devsquare.nate.com/ 여기가 데브스퀘어! 네이트앱스토어 관련 사이트입니다.
여기에 가시면 '개발자 등록하기' 버튼이 있습니다. 대충 작성하고(?) 등록하면 되는데, 사진이 필수부분입니다-_-

테스트하기
http://devsquare.nate.com/appstore/javascript 여기에 가면 아주 간단한 '자신의 프로필 가져오기', '일촌 목록가져오기' 등등의 javascript 라이브러리 사용법이 있어요. 여기에서 아무코드나 긁어다가 좌측상단에 프로필정보에 보면 앱스등록 버튼이 있어요. 그걸 클릭하고, sandbox라는 메뉴가 있는데요. 거기가 테스트존같은 겁니다.
거기에 소스를 붙여넣으면 결과가 아래에 나와요 ^^

플래시 넣기
플래시는 gadgets.flash.embedFlash함수를 이용해서 삽입합니다.
[code]gadgets.flash.embedFlash("swf주소",
    "divFlash",
    "10",
    {
        id:"flashOpenSocialTest",
        width: 200,
        height: 300,
        wmode: "transparent",
        allowScriptAccess: "always"
    }
);[/code]

일촌목록을 가져오는 예제와 플래시 연동하는 소스
module소스
[code]<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="플래시테스트">
        <Require feature="opensocial-0.8" />
        <Require feature="flash" />
    </ModulePrefs>
    <Content type="html">
        <![CDATA[
            <script type="text/javascript">
                function thisMovie(movieName) {
                    if(navigator.appName.indexOf("Microsoft") != -1) {
                        return window[movieName];
                    } else {
                        return document[movieName];
                    }
                };
               
                function request() {
                    var idspec = opensocial.newIdSpec({ "userId" : "OWNER" , "groupId" : "FRIENDS"});
                    var req = opensocial.newDataRequest();
                    var opt_params = {};      
                    opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
                    req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.OWNER), "get_owner");
                    req.add(req.newFetchPeopleRequest(idspec, opt_params), "get_friends");
                    req.send(response);
                };

                function response(dataResponse) {
                   
                    var owner = dataResponse.get('get_owner').getData();
                    var friends = dataResponse.get('get_friends').getData();
                   
                   
                    var ownerId = owner.getDisplayName();
                   
                    var myFriends = [];

                    friends.each(function(person) {
                        myFriends.push({name: person.getDisplayName()});
                    });
                    thisMovie("flashOpenSocialTest").responseData(ownerId, myFriends);
                };
               
                function init() {
                    gadgets.flash.embedFlash("http://localhost/OpenSocialTest-debug/OpenSocialTest.swf",
                        "divFlash",
                        "10",
                        {
                            id:"flashOpenSocialTest",
                            width: 200,
                            height: 300,
                            wmode: "transparent",
                            allowScriptAccess: "always"
                        }
                    );
                }

                gadgets.util.registerOnLoadHandler(init);
            </script>

            <div id="divFlash"></div>

     ]]>
   </Content>
 </Module>[/code]
코드중 주의해야할 것은...-_- <Require feature="flash" />가 없으면 안됨 ㄷㄷ 2시간동안 고생했음 ㄷㄷ
그리고, allowScriptAccess: "always"로 해야함 ㄷㄷ
아 또, 디폴트로는 20개만 가져오게 되어있는데요. 옵션을 줘서 100으로 바꿔주시면 100명가져올 수 있어요.
opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
옵션에 대한 자세한 내용은 aproxacs님 블로그에! http://www.aproxacs.com/203
플렉스코드
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    width="200" height="300"
    applicationComplete="applicationCompleteHandler()">
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function applicationCompleteHandler():void
            {
                Security.allowDomain("*");
                if (ExternalInterface.available)
                {
                    ExternalInterface.call("request");
                    ExternalInterface.addCallback("responseData", responseData);
                }
            }
           
            private function responseData(ownerId:String, friends:Array):void
            {
                list.dataProvider = friends;           
            }
        ]]>
    </mx:Script>
    <mx:Label text="일촌목록" />
    <mx:List id="list" width="100%" height="100%" labelField="name"/>
</mx:Application>[/code]
얘도 Security.allowDomain("*")로 해야함-_-
소스는 간단합니다. 애플리케이션 로딩이 완료되면 일촌목록을 요청하는 request함수를 호출하고, 호출이 완료된 response함수에서 해당 플래시에 responseData를 호출해 데이터를 받으면 됩니다.
강현구녀석.....여전히 일등이군-_-

스프링에 예전부터 관심만 계속 가져왔었는데, 스프링에 대한 국비지원 무료강의가 있다고 해서 신청했습니다. 박찬욱님 블로그를 구독하고 있었는데, 강의를 모집한다는 글을 보자마자 신청^^

예전에 KSUG 세미나할 때 참석했을 때 박찬욱님이 JDBC강의를 했던 것으로 기억합니다.
http://mudchobo.tomeii.com/tt/342
그 당시에 jdbc templete을 만드는 것이 였는데, 화면이 휙휙 지나가! 이런 느낌을 받았는데요. 무슨무슨 패턴들이 나오면서 막 지나가면서 이해를 못했던 강의를 들었던 것 같습니다.
정말 다행인 것은 이번 스프링강의 때 이와 비슷한 내용을 한다는 것! 저도 꼭 만들어보고 싶었거든요-_- 아직 디자인 패턴도 잘 모르고 해서-_- 이번 기회에 디자인패턴을 좀 공부해야겠습니다.
이야기는 삼천포로 빠졌군요.

어쨌든, 첫시간인데요. 사실 전 java쪽 일을 하고 있지 않은데요-_- 그래도 Spring에 대한 기본적인 과정에 대해서 꼭 배우고 싶었습니다(미래는 어떻게 될지 모르니까요!)
이날 강의에서 배운것들^^

1. JUnit
우선 개발할 때 거의 안 쓰는 JUnit을 배웠는데, 이거 정말 유용하군요. 예전에는 JUnit같은 것 귀찮게 왜하지 그랬는데, 오늘 하는 것 보니까 이유가 있네요-_- 테스트를 작성해놓고, 나중에 리팩토링을 해도 제대로 돌아가는지 확인을 할 때 매우 유용하군요. 젠장 난 헛살았어.....

2. 초보자들이 IoC / DI 이해하기에 만족할만한 예제
저같은 허접도 이해할 수 있도록 쉬운 예제와 쉬운 설명으로 강의를 해주셨습니다. 이 피자스토어 예제는 제가 예전에 Head First Design Patterns 팩토리패턴에서 본 예제와 비슷하네요. 그걸 스프링에 맞게 수정하셨어요^^ 후....디자인패턴 공부해야겠다.......-_-

3. 그 외에 여러 팁
역시 단축키를 써야해요. 그래야 누가 뒤에서 코딩하는 것을 지켜볼 때 자랑할 수 있어요............

저랑 갑으로 알고 있는데, 강의를 너무 잘하심^^ 저도 분발해야겠습니다-_- 덕분에 스프링에 대해서 조금 더 다가가는 계기가 되었네요.

오 이런게 있는줄 몰랐군요-_-(역시 무식하면 몸이 고생합니다!) 이걸로 요청한 데이터와 응답받은 데이터를 쉽게 확인할 수 있겠죠^^
더욱 놀라운 것은 무료라는 것!(물건 팔러온 것 같군요) 하지만 영어.....OTL.....요즘은 유명하지 않은 프로그램도 한글판이 있고 그러던데...와이어샤크도 한글패치를....-_-

우선 설치를 해봅시다!
http://www.wireshark.org/download.html
저는 64bit여서 64비트용으로 받았네요^^

설치를 하면 되는데요. 설치를 하다보면 Install WinPcap을 설치할 것인지 물어보는데요.
저는 뭐 부가적으로 설치하는건가...이런식으로 끼워팔면 안돼! 당당히 Install체크를 해제했는데, 꼭 필요한 것입니다-_- 체크하고 설치하세요-_-
설치가 완료되면 실행해봅시다.

실행하면 DashBoard같은 것이 나오는데, Capture부분에 어떤 걸 캡쳐시작할 것인지 선택할 수 있는데, 자신의 랜카드는 백방 첫번째로 나오는 것 같습니다-_- 제 회사컴도 그렇고, 제 놋북도 그렇고-_-
암튼, 첫번째꺼 클릭하면 캡쳐가 시작됩니다. 웹서핑을 시작하면 미친듯이 로그가 올라가요-_-

이런 게 있으면 가장 궁금했던 알송가사는 어떻게 전송되는지 확인해봅시다-_-
알송으로 노래를 아무거나 하나 듣습니다. 그럼 뭔가 패킷을 주고 받았습니다.
알송가사 웹서비스가 있군요. SOAP으로 주고 받는 듯 합니다. 전송할 때 strCheckSum, strVersion, strMACAddress, strIPAddress값을 넘기네요. strCheckSum으로 해당 MP3파일에 대한 유니크한 값을 전송해서 해당 파일에 대해 가사가 등록되었는지 확인 후 넘겨주는 듯합니다.

가사가 있으니 응답패킷을 살펴보니 이렇네요.
[00:00.59]Is this the real life~~~~ 이런식으로 넘어오네요.

이런 soap을 이용한 webservice로 통신을 하는줄 몰랐네요.
암튼, 매우 유용한 패킷분석기네요^^

htmlText에서 <a>태그를 사용할 수 있는데요. 이것에 마우스오버 시 다른 css로 바꾸는 a:link, a:hover, a:active 스타일을 적용할 수 있습니다.
근데, 그냥 css에 때려박으니까 안되더라구요. 검색하니까 바로 나오네요^^

우선 StyleLabel.as
[code]
package
{
    import flash.text.StyleSheet;
   
    import mx.controls.Label;
   
    public class StyleLabel extends Label
    {
        public function StyleLabel()
        {
            super();
        }
       
        override protected function createChildren():void
        {
            super.createChildren();
           
            var styleSheet:StyleSheet = new StyleSheet();
            styleSheet.setStyle("a:link", {color:"#004F99", textDecoration:"none"});
            styleSheet.setStyle("a:hover", {color:"#004F99", textDecoration:"underline"});
            styleSheet.setStyle("a:active", {textDecoration:"none"});
            textField.styleSheet = styleSheet;   
        }
    }
}
[/code]
textField에 styleSheet라는 것이 있는데, StyleSheet를 생성해서 a:link, a:hover, a:active를 스타일설정해서 textField에 있는 styleSheet에 넣어주면 끝!

[code]<local:StyleLabel id="styleLabel">
        <local:htmlText>
            <![CDATA[<a href="http://www.naver.com">네이년</a>]]>
        </local:htmlText>
    </local:StyleLabel>[/code]
htmlText를 사용하는 컴포넌트 Label이나 Text, TextArea에서 됩니다.

예전에 시간을 달리는 소녀를 우연찮게 봤는데, 참 재미있더군요. 그런데 이번에 그 감독이 만든 후속 애니메이션이 나왔다고 영화가 좋다에서 봤습니다^^ 호소다 마모루감독의 썸머워즈^^
음...애니메이션을 영화관에서 본 것은 처음인 것 같군요. 그래도 전 돈이 아깝지 않을 정도로 재미있게 본 것 같네요^^

우선 줄거리는 매우 간단합니다. 현재 일본은 오즈라는 시스템을 통해서 모든 것을 다 하게 되는데요. 이 오즈라는 가상세계가 어떤 인공지능에 의해서 해킹당하게 됩니다. 그래서 혼란에 빠진 오즈를 구하는 것이 주 스토리입니다.

음....그냥 대충 스토리를 봐선 왠지 뻔한 스토리같지 않나 라는 생각이 들지도 모르겠지만, 영화를 보게되면 생각이 조금 달라질 겁니다^^ 그 가상세계를 표현한 것도 재미있구요. 아바타들이 이 가상세계에서 싸우기도 하고~ 또, 사용자의 계정을 걸고, 고스톱(?)까지 치게되는.....-_-

제가 IT쪽에서 일을 해서 그런지 이런 종류의 스토리를 참 좋아해요. 그리고, 애니메이션의 이런 그림체를 상당히 좋아하구요. 하지만 더욱 좋았던 것은 기존 애니메이션에서 볼 수 없는 화려한 애니메이션효과입니다!^^ 가상세계에서 격투신(?)이 있는데, 매우 화려하고 스케일하게 잘 표현했어요^^

내용은 뻔한 내용이지만, 이런 뻔한 내용을 가지고, 정말 재미있게 가상세계를 만든 것이 최고라고 느껴지네요. 일본 애니메이션의 상상력의 끝은 어디일까요^^