[Javascript] Canvas를 이용한 Coverflow인 jCoverflow를 이용한 가수별 앨범목록보기

Posted in 자바스크립트(Javascript) // Posted at 2010/06/27 10:15
한번 만들어보려고 했는데요... 그냥 우연히 Canvas를 이용한 Coverflow 라이브러리가 있을 것 같아서 검색해보니 역시 있네요.
근데 얘좀 잘못 만들어진 듯-_- Canvas를 여러개 만들어놓고 돌리고 있네요-_- Canvas 하나면 될 듯한데...




사이트
http://jcoverflow.sourceforge.net/

사용법은 파일 다운로드해서 압축풀면, coverflow.js랑 coverflow.css넣고, 
<div id="coverflowHolder">
    <div id="__cvfl-coverflow-holder" style="display:none">
        <div id="__cvfl-coverflow">
            <div id="__cvfl-coverflow-wrapper"></div>
            <div id="smallerPreview"></div>
            <div id="__cvfl-coverflow-label"></div>
        </div>
    </div>
</div>

이런 div를 html에 넣고,
Coverflow.init([리스트배열], {createLabel, onSelectCenter, refill});

이런식으로 호출해주면 되네요.
저기 리스트배열에는
[{src, labelObject}] 형식으로 src는 이미지 주소를 넣고, labelObject는 선택되었을 때 넣을 데이터를 넣으면 나중에 보여줄 때 편리하게 하는 것 같습니다.
그리고, 함수정의로 createLabel은 현재위치의 coverflow의 정보를 보여주기 위한 html을 리턴하는 함수입니다.
onSelectCenter는 선택된 것 클릭했을 때 액션이고,refill은 잘 모르겠습니다-_-

여러가지 기능이 더 있는 것 같은데, 몬가 문서정리가 하나도 안되어있는 것 같습니다.

아! 주의사항!
coverflow.js파일을 상단에 임포트하려고할 때 window.addEventListener가 undefined가 나와서, 로드가 완료된 뒤 처리하도록 바꿔야해요. 휠이 먹히도록 하는 부분인 듯 한데,
728~729줄을
window.onload = function(){
    두줄넣기
}

요렇게 처리!

이걸 응용해서만든! 가수별 앨범목록!
http://mudchobo.tomeii.com/jcoverflow/


안드로이드에서도 잘 되네요. 근데, 약간 느리고, 문제가 있긴 하지만, 일단 잘됩니다(응?)...
사용자 삽입 이미지

Tags , , , , , , ,
관련글이 없습니다.
No Comment
[로그인][오픈아이디란?]

submit

[PHP] PHP용 트위터 OAuth연동라이브러리 twitteroauth 사용법

Posted in 피에이치피(PHP) // Posted at 2010/06/26 15:21
트위터 공식API홈페이지에 가면 PHP용 OAuth라이브러리가 2개가 있는데요. 두개중에 이게 더 나은 것 같아서...

트위터 공식api홈페이지 - http://dev.twitter.com/

OAuth라는 게 2년전에 삽질했던 것이 기억나네요.
트위터도 이 방식으로 인증을 하게 되는데요. 간단하게 동작원리를 설명하면......

1. 연동할 어플리케이션을 등록합니다.
2. 등록하게 되면 Consumer key와 Consumer secret을 발급받습니다.
3. 명시된 Request Token url로 이 키를 이용해 요청하게 되면 인증 url로 가서 이 어플에서 계정접근을 허용할 것인지 묻습니다.
4. 그리고, 허용하게 된다면 Access Token url로 이동해 Access Token을 발급 받습니다.
5. 이 받게 된 AccessToken을 이용해서 해당 어플리케이션은 글쓰고, 정보를 불러올 수 있게 됩니다.

이런 일련의 과정이 있지만, LIbrary가 있으면, 이딴거 몰라도 됩니다-_- 라이브러리가 다 알아서 하니까-_-

일단 앱을 등록합니다.
http://dev.twitter.com/apps/new
application type은 browser로 하고, callback url은 access_token까지 다 받은 다음에 우리 웹사이트로 돌아오기 위한 콜백url을 지정하는 것입니다.
등록을 한 다음에, 해당 애플리케이션의 detail을 보게 되면 consumer key랑 consumer secret이 있습니다.

그리고 라이브러리를 받습니다.
http://github.com/abraham/twitteroauth/downloads
그리고 파일들을 통째로 서버에 올립니다.
그리고, config.php파일을 수정합니다.
consmuer_key랑 consumer_secret을 위에서 등록한 앱의 키값을 등록!
callback은 인증을 하고 accesstoken을 얻은 뒤, 우리 앱으로 돌아올 때 callback url을 지정합니다. 그대로 올렸다면 폴더에 callback.php가 있기 때문에 http://localhost/callback.php가 됨!

그리고, 이제 localhost/index.php를 열고, Sign in with Twitter 클릭하면...
사용자 삽입 이미지
수락하면 대충 이런 데이터를 받습니다.
사용자 삽입 이미지

소스를 보게 되면 callback.php에서 AccessToken을 요청해서 받아오게 되는데, AccessToken과 AccessTokenSecret값만 있으면 글을 쓰거나 정보를 가져올 수 있게 됩니다.
이것을 자신의 사이트에 적용을 하게 된다면 db에다가 저장해놓고 쓰게 된다면, 우리사이트의 인증만으로도 트위터에 글을 쓸 수 있게 됩니다.
인증을 취소할 경우를 대비해서 account/verify_credentials api를 요청해 인증이 살아있는지 확인을 해야합니다.
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token['oauth_token'], $access_token['oauth_token_secret']);

이렇게 connection객체만 가지고 있으면
$connection->post('statuses/update', array('status' => date(DATE_RFC822)));

이런 형태로 api를 호출해서 데이터를 가져올 수 있습니다.
Tags , , , ,
관련글이 없습니다.
No Comment
[로그인][오픈아이디란?]

submit

[유틸리티] Oracle VirtualBox 3.2.4버전에서 지원하는 MAC OSX Snow Reopard 설치 후기.

Posted in 유틸리티 활용하기 // Posted at 2010/06/19 14:41
일단 한마디로 소감을 말하자면, 엄청 느리고 그래서 VMWare에 설치하는 게 훨신 낫습니다.
VMWare는 가상화 기술을 지원해선 하는 것 같은데, 이건 그냥 소프트웨어적으로 돌리는 것 같은 느낌으로 엄청 느립니다. 그냥 켰다가 껐습니다-_- 뭐 인터넷 정도만 할만한 것 보니, 맥에서 웹사이트 브라우저 테스트 정도는 할 수 있을 것 같습니다-_-

버추얼박스 다운로드 : http://www.virtualbox.org/wiki/Downloads
이번 3.2.X버전부터 지원을 한거라 아직 안정화단계는 아닌 것 같습니다. VirtualBox는 버전이 엄청나게 빠르게 업뎃을 해서 곧 안정화하리라 믿습니다^^
아~ 게다가 예전에는 Sun VirtualBox였는데, Oracle VirtualBox로 변경되었네요.

게다가 설치할 때 엄청 어려움을 겪었습니다.
osx 이미지를 일단 구해야하는데, 3가지 종류를 구했는데, 다 부팅이 안되는 겁니다-_-
그래서 검색을 해보니, empireEFIv1085.iso를 구해서 부팅한 뒤 설치할 수 있다고 하네요.

가상머신을 만듭니다.
사용자 삽입 이미지
그러면 공식적으로 Mac OS X가 있는 것을 볼 수 있습니다. 베타때에는 Server가 안붙었는데, 뭔가 문제를 회피(?)하기 위해서 붙인 것 같습니다-_-

만들었으면 설정을 해줘야합니다.
시스템에서 EFI체크해제하고, 저장소에서는 두번째 것에 empireEFIv1085.iso파일을 삽입합니다.

그리고 부팅을 하게되면 몬가 부팅이 되는데요. 거기서 다시 맥 설치 이미지로 변경해주어야합니다.
그런다음에 설치안내에 따라서 설치해주시면 됩니다.

설치가 완료되면 다시 empireEFIv1085.iso로 부팅해서 설치한 것을 선택해주시면 됩니다.
사용자 삽입 이미지



PS. 참고로 제가 뭘 잘못한지는 모르겠지만, 그냥 부팅해도 되시는 분들도 있다고 합니다. 위 방법은 그냥 부팅했을 때 안되시는 분들은 저렇게 하면 된다는 것입니다^^
PS. VMWare7에 설치하실 분들은 여기를 참고~ http://mudchobo.tomeii.com/tt/468


Tags , , , , , ,
관련글이 없습니다.
2 Comments
  1. t3RRa

    얼마전에 Sun사가 Oracle사에 매각되었습니다. VirtualBox 자체도 Sun에서 먼저 개발한게 아니라 개발한 회사를 사들여서 자사의 브랜드를 입힌거였지요. :)

    2010/06/22 18:02 Reply Edit/Del
[로그인][오픈아이디란?]

submit

[HTML5/Javascript] Python용 pywebsocket과 구글크롬을 이용한 WebSocket 연결

Posted in HTML5 // Posted at 2010/06/06 19:45
HTML5에서 WebSocket이라는 것을 지원하는데, 보면 그냥 우리가 일반적으로 쓰는 TCP형태의 소켓이 아니라 http와 같이 ws라는 프로토콜을 이용해서 통신하는 것 같습니다.

일단 pywebsocket사이트입니다.
http://code.google.com/p/pywebsocket/
이곳에서 0.5버전이 있는데, 그것을 받습니다.

설치하고 삽질해보려면 python이 필요합니다.
http://www.python.org/download/
파이썬을 잘 몰라서 그런데, 왜 버전이 두개로 나눠져있죠?-_- 2.6.5랑 3.1.2로 2.x버전과 3.x버전이 나눠서 그것도 2.x대 버전이 지속적으로 업데이트를 하고 있어요... 궁금하네.
일단 저는 2.6.5를 설치했습니다.
그리고 파이썬을 path에 잡아줍니다. 어디서든 실행해야하거든요.
Windows7기준으로 제어판 -> 시스템 -> 고급시스템설정 -> 환경변수에 있는 path에 python실행 경로를 추가하면 됩니다.

설치는 readme파일에 나온 것 처럼 그냥 build하고 install하면 된다는....
python setup.py build
하면 module파일들이 생성되고,
python setup.py install
하면 파이썬에 모듈을 설치하는 듯.

아...일단 이 모듈을 아파치와 연동해서 사용하는 방법이 있구요. 혼자서 테스트하며 띄울 수 있는 방법이 있네요. 일단 그냥 테스트해볼꺼니까 standalone모드로...

src/mod_pywebsocket폴더에 가면 standalone.py파일이 있는데, 실행하면 됩니다.
python standalon.py -w ../example/
상위에 있는 example폴더를 소켓에 올리는데, 파일 네이밍으로 소켓url을 정하게 되는 것 같습니다(?).
example에 echo_wsh.py파일이 있는데, ws://localhost/echo 로 요청하면 되더라구요.
거기에 있는 echo_client.py는 뭐하는 놈인지 모르겠네요ㅠㅠ
어쨌든 이제 브라우저코드를....


<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR">
        <title>WebSocket Echo</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script>
            var ws;
            $(document).ready(function(){
                if ("WebSocket" in window){
                    ws = new WebSocket("ws://localhost/echo");
                    ws.onopen = function(){
                        ws.send("message to send");
                    }
                    ws.onmessage = function(e){
                        $("#result").append(e.data + "<br />");
                    }
                    ws.onclose = function(){
                        // close
                    }
                }
                
                $("#btnConfirm").click(function(){
                    if (!ws)
                        return;
                    ws.send($("#textMessage").val());
                });
                $("#textMessage").keyup(function(e){
                    if (e.keyCode == 13){
                        if (!ws)
                            return;
                        ws.send($(this).val());
                        $(this).val("");
                    }
                });
            });
        </script>
      </head>
    <body>
        <input type="text" id="textMessage" />
        <input type="button" id="btnConfirm" value="전송"/>
        <div id="result"></div>
      </body>
</html>

쉬운 코딩은 역시 jquery...
WebSocket을 만들고, send로 보내고, onmessage이벤트로 수신받습니다. 아직 크롬에서 밖에 안됨-_-

예제 사이트도 있습니다.
http://code.google.com/p/websocket-sample/
다른 건 안보고 채팅예제만 좀 봤는데, tcp소켓처럼 하는 방식은 아니더군요.
보니까 서버에 파일을 하나 생성해서 한쪽에서 메세지를 던지면 파일에 쓰고, 다른 한쪽은 계속 그 파일을 주시하다가 변경되었으면 그걸 이용해서 연결된 쪽에 메세지를 전달하는 형태로 구현이 되어있습니다.


Tags , , , ,
관련글이 없습니다.
4 Comments
  1. 나그네

    따라하다가 잘 몰라서 그러는데요..
    "파이썬을 path에 잡아줍니다"는 만약 파이썬 2.5를 깔았다면 C:\Python25\python.exe 를 Path로 잡아주라는 말씀이시져?


    두 번째로
    "python setup.py build "는 CMD 창에 쓰라는 말씀이신가여??

    2010/06/08 14:17 Reply Edit/Del
    • 머드초보

      네네~ 맞아요~ python을 어디서든 실행하기 위함이죠!
      네 cmd창에서 해당 폴더에서 치면 됩니다^^

      2010/06/14 12:01 Edit/Del
  2. 행인

    파이썬의 버전이 나뉘어있고, 구버전이 계속 꾸준히 업데이트되는 이유는, 2버전의 파이썬과 3버전의 파이썬의 문법이 다른부분이 꽤 있는데다, 모듈들이 2버전을 기준으로 작성된 경우가 많아 실제로 현업에서도 2를 아직까지 많이 쓴다고들 합니다.

    예를들어 python 2에서는 print가 함수가 아니라 state로 처리되고있으나, 3버전에서는 함수로 바뀌었다고 하더군요.

    2010/08/17 09:26 Reply Edit/Del
  3. ㅠㅠ

    아파치랑 연동하는 법은 어떻게 하는건가요??ㅠ

    2010/09/08 13:48 Reply Edit/Del
[로그인][오픈아이디란?]

submit

제 10회 Daum Devday가 열린다고 하네요. 게다가 경품이 iPad!ㅠㅠ

Posted in 나의 삶/생활속에 나 // Posted at 2010/06/06 16:45
1년에 2~3번씩 하는 것 같은데. 벌써 10회째를 맞이하고 있네요.

저도 두번 참석한 경험이 있습니다^^

첫번째 참석한 건 지도api할 때 참석했었구요. 두번째는 다음이 다음에디터를 오픈했을 때 참석했었습니다^^

게다가 이번에는 1등한 작품에 대해서 iPad를 주네요.

요번엔 방식이 좀 틀리네요. 그 전에는 거기 직접 가서 주제에 맞게 매쉬업을 해서 Live Coding으로 만든 작품 중에 1등에게 상품을 주고 그랬는데, 이번에는 미리 만들어서 매쉬업 갤러리에 등록을 한다음에, 그것중에 4개팀을 뽑아서 발표해서 제일 잘한 팀을 1등으로 주네요^^

Live Coding시간에는 퀴즈를 하려나봅니다^^

저도 좋은 아이디어가 떠오르면 만들어서 내보려고 합니다만......(요즘 하는거없이 왜이리 바쁘지...ㅠㅠ)

참가신청은 아래 사이트에서 하시면 됩니다^^
http://daumdna.tistory.com/646

-------------------------------------------
행사 소개
제10회 Daum DevDay(부제: Dev on Daum)는 Daum 오픈 API 관련 튜토리얼과 참가자들이 직접 코딩에 참여하는 세션으로 진행되는 행사로 다양한 이벤트와 경품이 함께 합니다.

◆ 개발 행사
    튜토리얼, 퀴즈, 라이브 코딩등의 개발행사가 진행됩니다
    창의적인 아이디어와 열정으로 도전해주시기 바랍니다^^

◆ 데모 작품을 소개할 수 있는 기회!
    행사 당일 데모 작품을 전시  하고자 하는 분들께서는 매쉬업 갤러리에 올려주세요.
    최대 4개팀을 선정해 가산점 5표 부여 및 전시 기회를 드립니다.
    iPad에 한발 먼저 다가갈 기회를 잡으세요 ^^
 

행사 일시 : 6월 26일 (토) 09:00 ~ 19:00
행사 장소 : 서울시 서초구 서초로 398 KISA 아카데미


행사 프로그램 순서
 시간 내용 담당자
 09:30 ~ 10:00
 참가등록 
 10:00 ~ 10:10
 행사 소개 및 환영 인사 Daum 신철원 님
 10:10 ~ 10:40
 Ice Breaking Daum 이승철 님
 10:40 ~ 11:00
 휴식&인터넷 설정 
 11:00 ~ 11:50
 로드뷰 API 튜토리얼 Daum 박동욱 님
 12:00 ~ 13:00
 점심 식사
 
 13:00 ~ 13:50
 블로그 API(Oauth기반)튜토리얼 Daum 김종민 님
 14:00 ~ 15:00
 Mashup Gallery 작품 발표 15분이내/팀 (4개팀)
 15:00 ~ 18:00
 Live Coding(퀴즈) 신청자 전원
 18:00 ~ 18:30
 시상 및 행사 종료 

경품 지급  
  • 1등 : iPad (대박이죠?^^)
  • EvP : 상품권(20만원)
  • 그 외 푸짐한 경품!!
※ EvP(Evolution Prize)란? DevDay에 참가한 개인/팀들의 모든 프로젝트를 갤러리에 등록하여 행사 종료 후에도 발전적인 성과를 보이는 분께 지급하는 상입니다^^
 
 
DevDay를 통해 Daum 취업의 기회도 잡으세요! 자세한건 행사장에서..^^

참가 신청
◆ 참가 자격
    오픈 API에 관심있는 사람이라면 누구나 참여 가능. 배우고자하는 열정과 마음만 있다면  환영합니다.

◆ 참가 신청 기간 : 5월 27일~ 선착순 100분까지 
   (※매쉬업 갤러리에 작품 등록하실 분들은 6월 20일 (일)까지 제출 부탁드립니다)
    참가자 선정 : 선착순 100명

주의사항

  • 주차공간에 여유가 없으니 대중교통을 이용하시기 바랍니다.
  • 개인 노트북은 필수로 지참하시기 바랍니다.

후원


Tags , , ,
관련글이 없습니다.
4 Comments
  1. 타돌이

    이번 DevDay 방식에 약간의 오해가 있는 것 같네요.^^ 매쉬업갤러리의 올린 사람만 iPad 받는 대상이 아니고, Live Coding 시간에 만든 것으로 발표해도 iPad를 받을 수 있는 대상에 들어갑니다. 단, 매쉬업갤러리에 미리 올려서 4팀에 선정이 되면 +5표라는 가산점과 별도로 발표할 수 있는 시간과 전시를 해주는 어드벤티지를 적용하는 것입니다.

    2010/06/06 18:31 Reply Edit/Del
    • 머드초보

      아! 그런것이군요!
      제가 난독증이....-_-
      일단 마지막에 작품을 겨루는 건 같은것이군요^^

      2010/06/06 18:37 Edit/Del
  2. 타돌이

    축하드립니다~! 제10회 Daum DevDay 트랙백 이벤트에 당첨되셨습니다! http://daumdna.tistory.com/660

    2010/06/28 18:55 Reply Edit/Del
[로그인][오픈아이디란?]

submit
1 2 3 4 5 6 ... 98