Soribada_Widget0.1.zip
- notice 스킨변경~
[플러그인]검색결과, 5건
- [Javascript?] 크롬플러그인개발 후기 - 소리바다 뮤직비디오 플레이어 2010/01/10 (4)
- [Google App Engine] 자바용 구글 앱엔진을 위한 Google Plugin for Eclipse 설치후기. 2009/04/27 (4)
- [유틸리티] 텍스트큐브용 플러그인 - 소리바다 뮤비위젯 플러그인 0.1 2009/03/19
- [NetBeans6.5] 넷빈즈 파이썬(Python) 개발 플러그인 설치 및 한글문제 2009/03/01
- [Flex] 이클립스(eclipse) 플러그인으로 설치한 Flex Builder 3에서 BlazeDS설정방법 ㅠㅠ 2008/03/17 (8)
[Javascript?] 크롬플러그인개발 후기 - 소리바다 뮤직비디오 플레이어
Posted in 자바스크립트(Javascript) // Posted at 2010/01/10 19:41일단 플러그인을 하나 만들었는데요. 조금 문제가 많습니다만, 기본적인 기능은 다 되는.....-_-
크롬플러그인의 특징은 백그라운드에서 어떤 작업을 계속적으로 실행할 수 있는 특징이 있습니다. 그래서 html + Javascript의 조합을 통해서도 RSS Reader기를 만들 수 있죠. 게다가 html5문법인 audio와 video 등의 태그를 사용하여 백그라운드에서 실행하는 플레이어를 만들 수 있습니다.
html5에서 지원하는 localStorage도 지원을 해서 영속성이 있는 데이터를 저장할 수 있어요.
그 외에 html5에서 지원하는 canvas도 되구요. 번역기와 같이 현재 열려있는 페이지에 플러그인을 이용해서 번역도 되게 가능하구요. 또한 모질라처럼 NPAPI인지뭔지도 지원하는 것 같은데, DLL파일을 사용할 수 있게 하는 것 같아요. ie탭을 보면 dll파일을 이용해서 하는 것 같네요.
그래서 백그라운드에서 돌아가는 뮤직비디오 플레이어를 만들어 봤습니다.
소리바다에는 뮤직비디오를 퍼갈 수 있는 뮤비위젯이 있습니다. 아마 외부에서 재생이 되게 계약이 된 것으로 알고 있습니다. 그래서 이 뮤비위젯을 이용해 크롬플러그인에서 뮤비들을 localStorage에 저장해놓고 백그라운드에서 재생하는 플레이어를 만드는 것이죠.
뮤비위젯 사이트인데, 이것을 yahoo pipe를 이용해서 html파싱하면 해당 페이지의 뮤직비디오 데이터를 가져올 수 있어요-_- 그 데이터를 가져와서 플러그인에서 재생시키면 됩니다.
이 플러그인은 최신 뮤직비디오를 쉽게 감상할 수 있고, 해당 뮤직비디오만들 모아서 백그라운드 플레이어에서 재생도 할 수 있는 플러그인입니다.
이 플러그인은 최신 뮤직비디오를 쉽게 감상할 수 있고, 해당 뮤직비디오만들 모아서 백그라운드 플레이어에서 재생도 할 수 있는 플러그인입니다.
SoribadaMusicVideo.crx플러그인 설치 파일. 크롬 4.0beta사용자만 가능해요~
우선 크롬플러그인 구조가 백그라운드.html파일이 있고, 크롬플러그인 아이콘을 클릭했을 때 popup.html을 띄워서 컨트롤하는 페이지 2개를 사용할 수 있어요. 이 2개의 페이지는 서로간의 통신이 가능합니다.
var bp = chrome.extension.getBackgroundPage();이것은 bp객체를 통해서 백그라운드의 있는 함수같은 것을 호출할 수 있어요.
또한 html + javascript기반이기 때문에 기존에 사용하는 jquery 등의 프레임워크도 사용할 수 있어요. 저도 이것때문에 더욱 빨리 개발한 것 같네요. 역시 jquery가 짱인 것 같아요.
그리고, flash없이 video나 audio파일을 재생할 수 있는 것이 매력적이군요.
video태그는 매우간결한데요.
<video id="video" src="동영상주소"></video>이런식으로 해주면 돼요. 그리고 javascript로 컨트롤하려면 여러 함수가 지원됩니다.
그냥 videoid.play()하면 해당 src로 재생합니다.
src을 바꾸려면,
형태로 로드해주면 되고, 일시정지하려면 video.pause()인데, 정지함수는 없는 것 같아요. stop하니까 안먹히더라구요-_-
videoid.src = "video주소";
videoid.load();형태로 로드해주면 되고, 일시정지하려면 video.pause()인데, 정지함수는 없는 것 같아요. stop하니까 안먹히더라구요-_-
localStorage도 좋은 게 그냥 쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다. 하지만, flash에서 제공하는 SharedObject보다 좀 안 좋은 게 배열을 저장 못합니다-_- object는 저장하는 듯 하는데, array를 저장하려면 json으로 변경해서 저장해야합니다.
localStorage를 사용하기 위해서는 데이터 가져올 때는 getItem, 저장할 때는 setItem, 모두 제거할 때에는 clear()의 함수로 사용합니다.
localStorage.getItem("데이터명");
localStorage.setItem("데이터명", 데이터);
localStorage.clear();
크롬 플러그인에서 배열을 저장하기위해서는 json으로 변경할 것이 필요한데, JSON관련된 라이브러리를 제공하더라구요. 스트링화 하고, 파싱하는 함수를 사용하면 됩니다.
localStorage.setItem("저장배열명", JSON.stringify(array));
JSON.parse(localStorage.getItem("저장배열명"));나중에 시간되면 크롬용 MP3Player도 만들어봐야겠어요. NPAPI를 제공하는 것 같아 로컬파일 접근도 되는 것 같아요(확실하진 않지만....-_-).
Tags chrome,
chrome plugin,
javascript,
js,
music video,
plugin,
SORIBADA,
뮤직비디오,
소리바다,
자바스크립트,
크롬,
크롬 플러그인,
플러그인
4 Comments
-
지나가다
쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다.<---- 쿠키도 클라이언트에 저장됨.
-
머드초보
아...js에서도 쿠키를 생성할 수 있군요 ㅠㅠ
지금까지 php나 jsp 등에서만 생성할 수 있는 줄 알았어요 ㅠㅠ
감사합니다 ^^
-
-
달빛발광
와우! 크롬에서 쓸수있는 플러그인이라니요 ㅠㅠ 저는 친구들한테 크롬 추천했다가 ㅠㅠ 안되는거많다고 욕만먹엇는데 님께서는 정말 대단하시군요 ㅠㅠㅠ
-
[Google App Engine] 자바용 구글 앱엔진을 위한 Google Plugin for Eclipse 설치후기.
Posted in 자바(Java) // Posted at 2009/04/27 23:43전 세계적으로 가장 인기있는(?) 언어인 자바를 지원하다니 대단합니다-_-(사실...파이썬 보다 자바나 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라는 프로젝트가 있습니다. 이걸 선택하게 되면 아래와 같은 화면이 나옵니다.
프로젝트가 완성이 되면 익숙한(?) 폴더구조를 볼 수 있습니다. src는 java소스부분이 들어가는 곳이고, war부분은 WebContent부분이군요. 안에 더욱 익숙한 WEB-INF도 있어요-_- 라이브러리 마구 처박아도 되나-_- web.xml도 있군요.
자 그럼, 손쉬운 배포를 해봅시다. 갓난애기도 할 수 있는 앱엔진 배포!(과연..-_-)
war -> WEB-INF폴더에 appengine-web.xml파일을 엽니다.
<?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><application>부분에 자신이 애플리케이션 생성 시 입력한 Application Identifier를 입력합니다.
그리고, 프로젝트에 대고, 마우스오른쪽 버튼을 누르면 Google이라는 메뉴가 있습니다.
Deploy to App Enigne이라는 메뉴를 선택합니다.
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.
-
지돌스타
이런게 있는지 처음 알았군요.
구글의 리소스를 내가 직접 사용하는 것 같은 애플리케이션을 만들 수 있다는것에 꽤 흥미를 느끼게 되는군요. 내용 잘 봤습니다.-
머드초보
전에 구글코리아에서 설명을 들었을 때
구글에서 사용하는 서비스와 동일한 것이라고 하더군요.
구글은 언제나 개발자를 놀래키죠-_-
-
-
-
이게 귀찮아서 플러그인을 만들게 되었습니다
(사실...그냥 플러그인을 한번 만들어보고 싶었습니다-_-)
문제가 된다면 삭제하겠습니다ㅠ
소리바다 뮤비위젯 : http://podcast.soribada.com/Widget/Widget.html
소리바다 뮤비위젯 공식블로그 : http://sobawg.tistory.com/
사용법입니다.
압축파일을 풀고, 폴더 통채로 plugins폴더에 넣습니다.
텍스트큐브 관리자 화면으로 갑니다.
플러그인 -> 플러그인 목록 -> 목록 중 소리바다 뮤비위젯 플러그인을 클릭하여 활성화 합니다.
그리고, 환경설정을 클릭 합니다.
첫번째 옵션은 자동재생여부를 선택하는 건데요. '네'를 하게 되면, 페이지가 로딩되자마자 뮤비가 재생이 됩니다.
두번째, 세번째, 네번째는 직접입력하는 것이 아닙니다.
아래 뮤직비디오 리스트가 있는데, 원하는 뮤직비디오의 선택버튼을 클릭합니다.
그럼 위젯을 달아봅시다.
텍스트큐브 관리자화면에서 꾸미기 -> 위젯 -> 추가가능한 플러그인에서 '소리바다 뮤비 위젯'이 있는데, 오른쪽에 원하는 위치에 올려 놓습니다.
다른 컴이나 다른 버전에서는 전혀 테스트하지 않았습니다--;
제 텍스트큐브는 1.7.7입니다.
PS. 텍스트큐브 플러그인 올리기가 안되네-_-;
기본적인 언어를 다루시는 분이라면 그리 어렵지 않게 접근할 수 있어요^^
대신 파이썬은 툴이 별로 없는 것 같은데, NetBeans에 좋은 툴이 있습니다^^(파이썬을 안지 별로 안돼서-_-;)
아직 정식버전에 포함되지 않는 것 보니 문제가 좀 있나봅니다-_-;
자세한 사항은 아래 사이트에서^^
http://wiki.netbeans.org/NetBeansPythonTutorial
넷빈즈를 실행하고 메뉴에서 Tools -> Plugins에서 Available Plugins에 Python이라는 것이 있을 겁니다. 그걸 체크해서 설치하시면 됩니다.
설치하시면 아래와 같이 Installed에 나오게 됩니다.
우선 기본적으로 파이썬이 설치가 안되어 있어도 Jython 2.5b0+버전이 설치가 되기 때문에 그냥 이걸 쓰셔도 돼요. 하지만, 파이썬이 깔려있다면 자동으로 잡아주네요^^ 전 플러그인을 설치하자마자, Jython2.5b0+과 Python2.6.1버전 2개가 보이더군요. 자동으로 잡아주다니 대단합니다^^
Installed에 설치되면 된겁니다^^ 참 쉽져잉?
아......우선 파이썬에서도 역시 빠지지 않는 한글문제가 존재합니다-_-(이건 어딜 가나 말썽이군요-_-)
우선 해당 페이지를 utf-8로 인코딩된 페이지를 만들어야합니다.
New Project -> Python -> Python Project -> ProjectName은 HelloPython, Python Platform은 원하는 걸로 선택하시고...
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원인은 자동으로 생성한 코드에 한글이 들어가서 발생한 것 같습니다. 아래가 자동으로 생성한 코드입니다.
__author__="mudchobo"
__date__ ="$2009. 3. 1 오전 11:48:04$"
if __name__ == "__main__":
print "Hello";3번째 줄에 한글이 있군요-_-; 그래서 페이지 인코딩을 utf-8로 변경해야합니다. 2가지 작업을 해야합니다-_-;
페이지 맨 위에
# -*- coding:utf-8 -*-그러면 잘 될 겁니다 ^^
[Flex] 이클립스(eclipse) 플러그인으로 설치한 Flex Builder 3에서 BlazeDS설정방법 ㅠㅠ
Posted in 플렉스(Flex) // Posted at 2008/03/17 17:03이클립스 플러그인으로 Flex Builder를 설치하면 BlazeDS를 사용하기 훨씬 쉬워집니다-_-;
저 아래에 있는 방법은 다 생까고-_-; 다시 해보도록 합시다.
우선 플렉스빌더3 이클립스 플러그인버전으로 받습니다.
플러그인 버전이 없어진 줄 알았는데 저기에 저렇게 써있군요.
Already have Eclipse installed? Download the Flex Builder Eclipse plugin instead.
저거 클릭하고 로그인하면 받을 수 있습니다.
이클립스에 설치를 하도록 합시다 ^^
설치를 하고 이클립스를 띄워 봅시다.
New -> Project -> Flex Project를 선택!
Project name은 HelloBlazeds라고 합시다.
Web Application을 선택하고, Server technology에서 Application server type은 J2EE로 합시다.
Next를 클릭하고 J2EE settings에서 Apache Tomcat v6.0을 설정(없으면 New해서 설정^^)하고
Flex WAR file을 blazeds.war(http://opensource.adobe.com/wiki/display/blazeds/Release+Builds에서 받을 수 있습니다)파일을 선택합니다. Finish를 클릭합니다.
저는 전에 이클립스랑 Flex Builder랑 따로 설치해서 따로 작업을 했는데 저렇게 하면 바로 eclipse에서도 tomcat테스트가 가능합니다 ㅠㅠ 난 왜이렇게 바보 같지-_-;
그러면 이제 짬뽕이 되어있습니다! 참고로 src폴더는 자바소스폴더구요.
flex_src폴더는 flex소스폴더겠죠? ^^
예제는 요 아래에 있는 예제 고대로 따라하시면 될껍니다 ^^
근데 다 소스넣고 실행할라그러면 이상하게 요런 에러가 떠요.
실패 메세지 : faultCode:Client.Error.MessageSend faultString:'Send failed' faultDetail:'Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Status 404: url: 'http://localhost:8080/WebContent/messagebroker/amf''
보니까 ContextRoot가 이상하게 WebContent로 되어있어요-_-;
바꿔줍시다. HelloBlazeds프로젝트이름에 마우스오른쪽을 대고 properties를 선택합니다.
Flex Server부분이 있습니다. WebContent로 되어있습니다.
HelloBlazeds로 바꿉시다. 그러고 나서 실행해봅시다.
이클립스에 등록된 tomcat에다가 프로젝트를 추가해야합니다. HelloBlazeds라는 프로젝트를 추가를 하고 서버를 실행합시다. 그러고나서 url을 요청합니다.
http://localhost:8080/HelloBlazeds/HelloBlazeds.swf
그러면 이제 될껍니다-_-;
ps1. 저거왜 WebContent로 되어있을까요? 제가 뭘 잘못 한걸까요?-_-;
ps2. BlazeDS를 사용하시려면 이클립스 플러그인으로 플렉스 빌더를 사용하시는게 건강에 좋습니다-_-;
ps3. 에이레네님이 번역한거 읽으러 가야지-_-;
-
-
머드초보
저 위에 검색창에서요. remoteobject라고 쳐보세요 ^^
뭔가 나올겁니다 ^^
예제는 blazeds에 포함된 샘플예제를 보시면 더욱 더 잘 나와있습니다^^
-
-
황민혁
이야... 이건 정말 대박인데요~ㅋㅋ
아래꺼 해보고 바로 했는데.. 실패없이 바로 성공!!!
정말 좋은 정보 배우고 갑니다~
그런데.. 플러그인을 설치하면 사용기간제한이 없는건가요?
빌더를 설치하면 트라이얼 버젼으로 60일이 있던데요~
만약에 없다면 빌더와 어떤 다른 점이 있는지도 궁금하네요~^^-
머드초보
플러그인은 플렉스 빌더를 단지 이클립스에다가 추가로 설치하는 겁니다.
그러므로 이것도 트라이얼 버전으로 60일 쓸 수 있을겁니다.
빌더와 다른 점은 없습니다. 같은 제품인데, 기존에 설치된 이클립스에 설치하는거고 그냥 설치하는 것은 독립적인 플렉스빌더를 설치합니다^^
-
-
-
머드초보
안녕하세요~
BlazeDS나 LCDS는 서버데이터와 연동하기 위한 도구라고 보시면 됩니다.
서버에 있는 데이터를 가져올 때 쉽게 연동할 수 있구요.
또 다양한 기능이 있는데, 클라이언트 끼리 데이터를 주고 받을 수 있도록 messaging기능도 되구요. lcds에서는 실시간 서버데이터를 푸쉬받을 수 있는 Data Management Service같은 것도 있구요^^
뭐 결론은 서버연동과 함께 클라이언트+서버를 쉽게 사용해줄 수 있는 도구라고 할 수 있겠네요^^
-
-
-
머드초보
답변이 늦어서 죄송합니다ㅠㅠ
BlazeDS는 서버에서 셋팅을 해줘야합니다. lib도 추가해야하고,
설정파일도 셋팅해야합니다.
그래서 view단만 하신다면 셋팅이 불가능한데....
view단만 하신다면 xml로 그냥 httpservice로 받으심이...
-