아...좀 문제가 발생할 것 같기도 하지만-_- 괜찮을꺼에요-_-
일단 플러그인을 하나 만들었는데요. 조금 문제가 많습니다만, 기본적인 기능은 다 되는.....-_-
크롬플러그인의 특징은 백그라운드에서 어떤 작업을 계속적으로 실행할 수 있는 특징이 있습니다. 그래서 html + Javascript의 조합을 통해서도 RSS Reader기를 만들 수 있죠. 게다가 html5문법인 audio와 video 등의 태그를 사용하여 백그라운드에서 실행하는 플레이어를 만들 수 있습니다.
html5에서 지원하는 localStorage도 지원을 해서 영속성이 있는 데이터를 저장할 수 있어요.
그 외에 html5에서 지원하는 canvas도 되구요. 번역기와 같이 현재 열려있는 페이지에 플러그인을 이용해서 번역도 되게 가능하구요. 또한 모질라처럼 NPAPI인지뭔지도 지원하는 것 같은데, DLL파일을 사용할 수 있게 하는 것 같아요. ie탭을 보면 dll파일을 이용해서 하는 것 같네요.

그래서 백그라운드에서 돌아가는 뮤직비디오 플레이어를 만들어 봤습니다.
소리바다에는 뮤직비디오를 퍼갈 수 있는 뮤비위젯이 있습니다. 아마 외부에서 재생이 되게 계약이 된 것으로 알고 있습니다. 그래서 이 뮤비위젯을 이용해 크롬플러그인에서 뮤비들을 localStorage에 저장해놓고 백그라운드에서 재생하는 플레이어를 만드는 것이죠.
http://podcast.soribada.com/Widget/Widget.html
뮤비위젯 사이트인데, 이것을 yahoo pipe를 이용해서 html파싱하면 해당 페이지의 뮤직비디오 데이터를 가져올 수 있어요-_- 그 데이터를 가져와서 플러그인에서 재생시키면 됩니다.

이 플러그인은 최신 뮤직비디오를 쉽게 감상할 수 있고, 해당 뮤직비디오만들 모아서 백그라운드 플레이어에서 재생도 할 수 있는 플러그인입니다.
SoribadaMusicVideo.crx

플러그인 설치 파일. 크롬 4.0beta사용자만 가능해요~

사용자 삽입 이미지

우선 크롬플러그인 구조가 백그라운드.html파일이 있고, 크롬플러그인 아이콘을 클릭했을 때 popup.html을 띄워서 컨트롤하는 페이지 2개를 사용할 수 있어요. 이 2개의 페이지는 서로간의 통신이 가능합니다.
[code]var bp = chrome.extension.getBackgroundPage();[/code]
이것은 bp객체를 통해서 백그라운드의 있는 함수같은 것을 호출할 수 있어요.

또한 html + javascript기반이기 때문에 기존에 사용하는 jquery 등의 프레임워크도 사용할 수 있어요. 저도 이것때문에 더욱 빨리 개발한 것 같네요. 역시 jquery가 짱인 것 같아요.

그리고, flash없이 video나 audio파일을 재생할 수 있는 것이 매력적이군요.
video태그는 매우간결한데요.
[code]<video id="video" src="동영상주소"></video>[/code]
이런식으로 해주면 돼요. 그리고 javascript로 컨트롤하려면 여러 함수가 지원됩니다.
그냥 videoid.play()하면 해당 src로 재생합니다.
src을 바꾸려면,
[code]videoid.src = "video주소";
videoid.load();[/code]
형태로 로드해주면 되고, 일시정지하려면 video.pause()인데, 정지함수는 없는 것 같아요. stop하니까 안먹히더라구요-_-

localStorage도 좋은 게 그냥 쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다. 하지만, flash에서 제공하는 SharedObject보다 좀 안 좋은 게 배열을 저장 못합니다-_- object는 저장하는 듯 하는데, array를 저장하려면 json으로 변경해서 저장해야합니다.
localStorage를 사용하기 위해서는 데이터 가져올 때는 getItem, 저장할 때는 setItem, 모두 제거할 때에는 clear()의 함수로 사용합니다.
[code]localStorage.getItem("데이터명");
localStorage.setItem("데이터명", 데이터);
localStorage.clear();
[/code]
크롬 플러그인에서 배열을 저장하기위해서는 json으로 변경할 것이 필요한데, JSON관련된 라이브러리를 제공하더라구요. 스트링화 하고, 파싱하는 함수를 사용하면 됩니다.
[code]localStorage.setItem("저장배열명", JSON.stringify(array));
JSON.parse(localStorage.getItem("저장배열명"));[/code]

나중에 시간되면 크롬용 MP3Player도 만들어봐야겠어요. NPAPI를 제공하는 것 같아 로컬파일 접근도 되는 것 같아요(확실하진 않지만....-_-).
 
Posted by 머드초보

댓글을 달아 주세요

  1. 지나가다 2010.01.14 18:34  댓글주소  수정/삭제  댓글쓰기

    쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다.<---- 쿠키도 클라이언트에 저장됨.

    • 머드초보 2010.01.16 00:38  댓글주소  수정/삭제

      아...js에서도 쿠키를 생성할 수 있군요 ㅠㅠ
      지금까지 php나 jsp 등에서만 생성할 수 있는 줄 알았어요 ㅠㅠ
      감사합니다 ^^

  2. 달빛발광 2010.02.09 21:59  댓글주소  수정/삭제  댓글쓰기

    와우! 크롬에서 쓸수있는 플러그인이라니요 ㅠㅠ 저는 친구들한테 크롬 추천했다가 ㅠㅠ 안되는거많다고 욕만먹엇는데 님께서는 정말 대단하시군요 ㅠㅠㅠ

    • 머드초보 2010.02.12 00:07  댓글주소  수정/삭제

      음...사실 아직 베타고 안되는 게 많기는 합니다-_-
      아직은 추천할만하지 못한듯 ㅠㅠ
      그래도 속도하나만은 최강이죠^^

 
구글 앱 엔진이 자바를 지원하기 시작했습니다.
전 세계적으로 가장 인기있는(?) 언어인 자바를 지원하다니 대단합니다-_-(사실...파이썬 보다 자바나 PHP를 먼저 지원했어야 했을 것 같은데-_- 그때 얘기를 들어보니 앱엔진 담당하는 사람이 파이썬 전문가라는 얘기를 들은 것 같군요-_-)

거기에 더 대단한 것은 파이썬 같은 경우에는 툴 같은 것이 없었는데, 이번엔 이클립스를 이용한 툴까지 제공해줍니다. 구글플러그인인데요. App Engine JAVA SDK랑 덤으로 Web Toolkit SDK까지 깔아주는군요. 게다가 구글 앱엔진에 쉽게 배포까지 할 수 있습니다.

이클립스 설치주소 : http://dl.google.com/eclipse/plugin/3.4 (3.3버전은 뒤에 3.3-_-)
참조문서 : http://code.google.com/intl/ko-KR/appengine/docs/java/tools/eclipse.html

설치를 하게 되면 File -> New -> Other에 보시면 Google이라는 폴더에 Web Application Project라는 프로젝트가 있습니다. 이걸 선택하게 되면 아래와 같은 화면이 나옵니다.
사용자 삽입 이미지
Web Toolkit은 체크를 안해도 됩니다.

프로젝트가 완성이 되면 익숙한(?) 폴더구조를 볼 수 있습니다. src는 java소스부분이 들어가는 곳이고, war부분은 WebContent부분이군요. 안에 더욱 익숙한 WEB-INF도 있어요-_- 라이브러리 마구 처박아도 되나-_- web.xml도 있군요.

자 그럼, 손쉬운 배포를 해봅시다. 갓난애기도 할 수 있는 앱엔진 배포!(과연..-_-)
war -> WEB-INF폴더에 appengine-web.xml파일을 엽니다.
[code]<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
    <application>mudchobo</application>
    <version>1</version>
   
    <!-- Configure java.util.logging -->
    <system-properties>
        <property name="java.util.logging.config.file" value="WEB-INF/logging.properties"/>
    </system-properties>
   
</appengine-web-app>[/code]
<application>부분에 자신이 애플리케이션 생성 시 입력한 Application Identifier를 입력합니다.

그리고, 프로젝트에 대고, 마우스오른쪽 버튼을 누르면 Google이라는 메뉴가 있습니다.
Deploy to App Enigne이라는 메뉴를 선택합니다.
사용자 삽입 이미지
자신의 App Engine계정을 입력하면 바로 배포할 수 있습니다.

http://mudchobo.appspot.com/ 여기에 배포가 되었습니다.

Spring 등의 라이브러리도 다 되는거겠죠?-_- 이번 연휴에 삽질을 해봐야겠습니다.

PS. 혹시나 파일의 용량제한이 있나테스트해봤더니 10메가 이상파일은 안올라가네요.
Unable to upload app: Found a file too large to upload: "C:\Users\mudchobo\AppData\Local\Temp\appcfg3803788145857696233.tmp\Aptana Studio.zip".  Must be under 10000000 bytes.
 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 지돌스타 2009.04.28 15:53  댓글주소  수정/삭제  댓글쓰기

    이런게 있는지 처음 알았군요.
    구글의 리소스를 내가 직접 사용하는 것 같은 애플리케이션을 만들 수 있다는것에 꽤 흥미를 느끼게 되는군요. 내용 잘 봤습니다.

    • 머드초보 2009.04.30 09:55  댓글주소  수정/삭제

      전에 구글코리아에서 설명을 들었을 때
      구글에서 사용하는 서비스와 동일한 것이라고 하더군요.
      구글은 언제나 개발자를 놀래키죠-_-

  2. BlogIcon 김석영 2009.05.07 23:28  댓글주소  수정/삭제  댓글쓰기

    그냥 고마울 따름이네요...

    • 머드초보 2009.05.11 00:46  댓글주소  수정/삭제

      "구글 앱 엔진 한국 개발자 토론 그룹"에서 본 것 같은데 반갑습니다^^

 
파이썬까지 손대보는군요. 구글 앱스 엔진때문에-_-;
기본적인 언어를 다루시는 분이라면 그리 어렵지 않게 접근할 수 있어요^^
대신 파이썬은 툴이 별로 없는 것 같은데, NetBeans에 좋은 툴이 있습니다^^(파이썬을 안지 별로 안돼서-_-;)
아직 정식버전에 포함되지 않는 것 보니 문제가 좀 있나봅니다-_-;
자세한 사항은 아래 사이트에서^^
http://wiki.netbeans.org/NetBeansPythonTutorial

넷빈즈를 실행하고 메뉴에서 Tools -> Plugins에서 Available Plugins에 Python이라는 것이 있을 겁니다. 그걸 체크해서 설치하시면 됩니다.
설치하시면 아래와 같이 Installed에 나오게 됩니다.

우선 기본적으로 파이썬이 설치가 안되어 있어도 Jython 2.5b0+버전이 설치가 되기 때문에 그냥 이걸 쓰셔도 돼요. 하지만, 파이썬이 깔려있다면 자동으로 잡아주네요^^ 전 플러그인을 설치하자마자, Jython2.5b0+과 Python2.6.1버전 2개가 보이더군요. 자동으로 잡아주다니 대단합니다^^

사용자 삽입 이미지

Installed에 설치되면 된겁니다^^ 참 쉽져잉?

설치한 김에 Hello World를 찍어봅시다.
아......우선 파이썬에서도 역시 빠지지 않는 한글문제가 존재합니다-_-(이건 어딜 가나 말썽이군요-_-)
우선 해당 페이지를 utf-8로 인코딩된 페이지를 만들어야합니다.
New Project -> Python -> Python Project -> ProjectName은 HelloPython, Python Platform은 원하는 걸로 선택하시고...
사용자 삽입 이미지
Finish를 누르면 완성됩니다. 바로 Hello코드가 완성되어 있습니다. 만약 Jython 2.5b0+로 하셨다면 에러가 안나겠지만, 설치된 Python 2.6.1로 하시면 에러가 납니다-_-; 저 같은 경우에는 납니다-_-;
[code]File "C:\Users\mudchobo\Documents\NetBeansProjects\HelloPython\src\HelloPython.py", line 3
SyntaxError: Non-ASCII character '\xbf' in file C:\Users\mudchobo\Documents\NetBeansProjects\HelloPython\src\HelloPython.py on line 3, but no encoding declared; see http://www.python.org/peps/pep-0263.html for details[/code]
원인은 자동으로 생성한 코드에 한글이 들어가서 발생한 것 같습니다. 아래가 자동으로 생성한 코드입니다.
[code]__author__="mudchobo"
__date__ ="$2009. 3. 1 오전 11:48:04$"

if __name__ == "__main__":
    print "Hello";[/code]
3번째 줄에 한글이 있군요-_-; 그래서 페이지 인코딩을 utf-8로 변경해야합니다. 2가지 작업을 해야합니다-_-;
페이지 맨 위에
[code]# -*- coding:utf-8 -*-[/code]를 추가해주고, 프로젝트 Properties에서 Sources에서 encoding을 utf-8로 변경해주어야 합니다.
그러면 잘 될 겁니다 ^^
 
Posted by 머드초보

댓글을 달아 주세요