'위젯뱅크'에 해당되는 글 7건

  1. 2009.07.23 위젯팩토리 플러그인 사용법 챕터3 - 위젯 관리!
  2. 2009.07.23 위젯팩토리 플러그인 사용법 챕터2 - 위젯 제작!
  3. 2009.07.21 위젯팩토리 플러그인 사용법 챕터1 - 설치! (5)
  4. 2009.07.14 태극기 휘날리며!! (2)
  5. 2009.04.15 배너위젯 제작법 (4)
  6. 2009.01.06 나만의 배너 위젯뱅크 등록!! (4)
  7. 2008.12.29 톡틴게임 모음 위젯뱅크 등록!! (2)

위젯팩토리 플러그인 사용법 챕터3 - 위젯 관리!

|
자 이젠 대충 사용법은 알았으니 이번엔 플러그인을 사용해서 위젯 심사요청하는 방법을 알아보겠다.

위젯 보관함에서 '사용자설정 테스트' 위젯의 수정을 누르고 제목을 '사용자설정 웹수정'으로 수정하고, 위젯을 예전에 제출했던 키즈짱 게임 위젯을 테스트용으로 새로 제작해서 웹에서 저장해봤다.
사용자 삽입 이미지
위젯 보관함 목록이 업데이트 되었다.

이제 뷰의 위쪽 아이콘에서 리프레시버튼을 누른다.
사용자 삽입 이미지

수정했던 위젯에 수정됐다는 화살표 모양이 나타나고(CVS와 유사하다.) 웹에서 새로 올린 위젯도 추가로 나타났다.

사용자 삽입 이미지

아이콘 메뉴에서 '위젯 전체 업데이트'를 누르면 저장되지 않은 위젯은 삭제된다는 경고 문구가 나온다. CVS에서 덮어씌우기와 비슷하다.

사용자 삽입 이미지
업데이트되었다는 문구가 나오고 웹에 저장이 안되어있던 '샘플위젯 - 원격 컨텐츠'위젯은 삭제가 되었다.

위젯의 새로추가는 아이콘 메뉴를 이용하면 되겠다.
사용자 삽입 이미지
'새로운 위젯' 아이콘을 누르면 아주 기본적인 위젯코드로 '새로운 위젯'이라는 위젯이 생긴다.

이제 심사요청을 해보자.
사용자 삽입 이미지
심사요청은 팝업메뉴의 '위젯 제출'을 누른다.

사용자 삽입 이미지
심사요청을 하면 수정/삭제가 불가능하다는 문구가 나오고, 수정이 불가능하다는 것을 보이기 위해 제출한 위젯은 글씨가 회색으로 나오고 에디터에서도 코드에 클릭이 불가능하다.
비활성화가 된것이다.

내 이름으로 등록된 위젯은 3개
사용자 삽입 이미지
플러그인 캡쳐화면을 보면 알겠지만 플러그인에는 등록된 위젯은 나타나지 않는다.

대략 기능들은 당연히 웹에서의 위젯관리보다 좋다.
문제는 과연 이클립스라는 개발툴로 위젯을 개발하려는 사람이 얼마나 많을까이다.
Daum의 모바일 페이지도 마찬가지였지만 많은 사람이 사용하지 않을것 같은데도 제작을 한것을 보면 Daum이 소수의 사용자도 고려하는것이 느껴진다.
신고
Trackback 0 And Comment 0

위젯팩토리 플러그인 사용법 챕터2 - 위젯 제작!

|
챕터1에서 플러그인 설치법에 대해 알아봤고 이번엔 위젯제작법에 대해 알아보겠다.

플러그인을 실행했으면 로그인을 하자.
사용자 삽입 이미지

Daum아이디로 로그인을 하면 샘플위젯으로 사용자 설정과 원격컨텐츠 위젯이 샘플로 두개가 자동으로 만들어진다.
둘중 하나를 더블클릭하면 편집기가 열린다.
사용자 삽입 이미지

Code 탭에서는 위젯 코드가 나오고 프로퍼티탭으로 전환하면
사용자 삽입 이미지
데이터 설정 / 위젯 세부정보 / 위젯정보 / 사용자 설정 / 위젯 리소스 현황 섹션이 나오고 미리보기를 누르면 위젯을 바로 실행해볼수도 있다.

사용자 삽입 이미지
위젯 세부정보에 정보를 수정하고 임시저장을 누르면 뷰의 '샘플 위젯 - 사용자 설정'이었던 제목이 '사용자설정 테스트'로 바뀐것을 확인할 수 있다.

탭의 오른쪽에는 위젯코드에서 반영된 부분이 있다.
사용자 삽입 이미지
위젯정보에 '일리있는 이야기'로 'author'를 추가하고 사용자 설정의 'mycolor'에 'Blue' 값도 추가해봤다.

사용자 삽입 이미지
코드에 바로 추가된 것을 확인할 수 있다.

자 이제 수정한 위젯을 웹에 저장해보자.
사용자 삽입 이미지
뷰 위쪽에 있는 아이콘으로 모든 위젯을 한번에 저장할 수도 있지만 목록에서 팝업메뉴로 개별 위젯만 저장도 가능하다. 팝업메뉴에서 위젯 저장을 누르면 위젯 제출 동의서가 나온다.

사용자 삽입 이미지
위젯을 저장하면 이제 리소스파일도 업로드가 가능하다.
Properties 탭에 막혀있던 리소스 파일추가 메뉴가 활성화되고, 파일을 올리면 뷰에 파일목록도 같이 나온다.

이제 저장한 위젯을 웹에서 확인해 보자.
사용자 삽입 이미지

위젯보관함에 가보면 저장한 위젯이 나오고 웹에서도 수정이 가능하다.
저장을 안한 '샘플위젯 - 원격컨텐츠'는 로컬에만 있는 것이기 때문에 나타나지 않는다.

신고
Trackback 0 And Comment 0

위젯팩토리 플러그인 사용법 챕터1 - 설치!

|
얼마전 위젯뱅크에서 위젯팩토리를 개편하고, 위젯팩토리의 위젯을 관리/제작하는 기능을 하는 이클립스 플러그인을 출시했다.
국내 포털에서는 드물게(아마 처음이지 않을까?) 많은 개발자들이 사용하는 개발툴중에 하나인 이클립스 플러그인을 지원했다. 오늘은 이 플러그인의 설치법에 대해서 설명하겠다.

우선 이 플러그인을 사용하려면 이클립스가 필요하겠다.

이클립스 다운로드 사이트에서 가장 기본인 이클립스 클래식을 다운받자
사용자 삽입 이미지

자신에게 맞는 플랫폼을 선택하고,

사용자 삽입 이미지

다운로드 페이지로 들어가면 가장 가까운 다운로드 링크를 기본적으로 보여준다.
역시 국내에서는 Daum커뮤니케이션에서 제공하는 사이트가 제일 빠르다.

사용자 삽입 이미지

다운로드를 받으면(윈도우XP 기준) eclipse-SDK-3.5-win32.zip파일이 받아지고, 이 파일을 현재폴더에 그대로 풀기하면 eclipse란 폴더가 생긴다. 이클립스는 따로 설치가 필요없고 이 폴더안의 eclipse.exe 파일을 실행하면 워크스페이스 선택이 나오고 자신이 작업하고 싶은 폴더를 선택하면 실행이 된다.

사용자 삽입 이미지

플러그인을 사용하기 위해서는 이클립스 업데이트 메뉴를 사용해서 플러그인을 설치한다.
Help > Install New Software를 선택하면 다음과 같은 창이 뜬다.

사용자 삽입 이미지

처음 다운받은 이클립스에는 당연히 위젯뱅크 플러그인 업데이트 사이트가 없을테니 add 버튼을 눌러 Name은 widgetbank나 자신이 원하는 이름을 입력하고, Location은  http://widgetcfs1.daum.net/data/plugins/eclipse입력하고 OK를 누른다.

사용자 삽입 이미지

플러그인 목록에 'There are no categorized item'이란 문구가 써지고 플러그인이 나타나지 않으면 'Group items by category'를 해제하면 Daum Widgetbank Factory Feature가 나타날것이다. 이것을 체크하고 Next를 누르고, 약관동의를 하면 설치가 된다.
그리고 이클립스를 재시작하면 위젯팩토리 플러그인 사용이 가능하다.

사용자 삽입 이미지

재시작이 됐으면 Window > Show view > Other를 누르면 Show View 창이 뜨는데 여기서 Widgetbank Factory디렉토리 밑에 Widgetbank Factory List를 선택하고 OK를 누르면 위젯팩토리 플러그인 뷰가 나타난다.

여기까지 설치 및 실행법에 대해 알아봤고, 다음 포스팅에서 사용법에 대해서 설명하겠다.
신고
Trackback 0 And Comment 5

태극기 휘날리며!!

|
며칠전 위젯뱅크 공식블로그에서 방명록에서 이런글을 봤다.
사용자 삽입 이미지
우리나라 태극기와 관련된 위젯은 없군요..국기를 선택하고 무궁화를 선택하고 등등....혹시 만들어 주실 의향은 없는지요....부탁해요...그럼 이만..

오~ 좋은데~
이 글을 보고 국기 이미지는 올리진 않고, Daum 사전에 있는 이미지를 보여주는 방식으로 몇분만에 뚝딱 제작해서 위젯팩토리에 올리고 심사를 의뢰했다. (일단 프로토타입이라는 것을 알리고~)
긍정적인 피드백을 받고 실제 위젯 제작에 들어갔다.

일단 대상국가는 뽑기 어려워서 세계속의 블로그들도 많으니 세계속의 블로그에 등록된 국가와 남한(대한민국), 북한(조선민주주의인민공화국)을 추가하기로 했다.

페이지를 보면서 국가이름을 일일이 복사해 붙여넣는건 무리!!
국가 코드도 따야하니깐~

사용자 삽입 이미지
그래서 파이어버그로 국가 목록 부분을 찍어보면 국가코드랑 국가명들이 나와있는 html 부분을 얻을 수가 있다.

사용자 삽입 이미지
<li> 목록으로 쭉있고 대륙별로 <div>도 나뉘어져 있어서 저 영역을 한번에 복사하면 모든국가의 코드를 얻을 수 있다.

이렇게 얻은 코드를 바탕으로 국가선택 UserPref에 추가한다.

 <UserPref name="nation" display_name="국가선택" datatype="enum" default_value="KR">
 <EnumValue value="GT" display_value="과테말라" />
 <EnumValue value="GU" display_value="괌" />
 <EnumValue value="GE" display_value="그루지야" />
 <EnumValue value="ZA" display_value="남아프리카 공화국" />
 <EnumValue value="NL" display_value="네덜란드" />
 <EnumValue value="NP" display_value="네팔" />
 <EnumValue value="NO" display_value="노르웨이" />
 <EnumValue value="NZ" display_value="뉴질랜드" />
 <EnumValue value="NC" display_value="뉴칼레도니아" />
 <EnumValue value="NI" display_value="니카라과" />
 <EnumValue value="TW" display_value="대만" />
 <EnumValue value="KR" display_value="대한민국" />
 ...
</UserPref>

실제 소스코드는 뭐 별거없다.

<script type="text/javascript">
 function init() {
  var nation = new gadgets.Prefs().getString('nation');  // 국가 코드 얻어옴
  // 국가선택 사용자 설정이 안되있을 경우엔 기본값으로 대한민국 셋팅
  var url = 'http://widgetcfs1.daum.net/data/widgets/flags/KR.jpg';
  if (nation != null)
   url = 'http://widgetcfs1.daum.net/data/widgets/flags/'+ nation +'.jpg';

   // 국기 div 속에 img 태그 삽입
  _gel('flagArea').innerHTML = '<img src="' + url + '" width="166" border="0" />'
 }

 gadgets.util.registerOnLoadHandler(init); // 위젯로딩시 불리는 함수
</script>

<div id="flagArea"></div><!-- 국기가 들어갈 div -->


사용자 설정의 국가코드 불러와서 그에 맞는 국기 이미지만 div에 삽입하는 방식이다.

이것으로 내 위젯이 3개째 등록이다.
사용자 삽입 이미지
2008/12/29 - [일상/일터] - 톡틴게임 모음 위젯뱅크 등록!!
2009/01/06 - [일상/일터] - 나만의 배너 위젯뱅크 등록!!

등록된지 별로 안됐는데 벌써 100명 가까이나 퍼가셨다. 뭐 물론 사용중인 사람은 그리 많지 않지만 ㅎ

사용자 삽입 이미지

썸네일도 이쁘게 만들어 주셨네~

사용자 삽입 이미지

기본선택은 대한민국으로 되있고 다른 국가들 선택도 가능하다.

내 위젯들이 다들 그렇듯 원리는 참 단순하다.
그 좁은 공간안에서 많은 것들을 할 수 없기때문에 결국 위젯은 아이디어 승부인것!!
다른 회사들이 상업적으로 내논 광고성 위젯들은 플래시 로딩이나 통으로 페이지 긁어오는게 대부분이고 그리 블로그 로딩이나 늦게 만드는 거 같다.

퍼가는 곳은 여기
나만의 배너키즈짱 게임(전 톡틴 게임)위젯도 사랑해 주셔요~

아이디어주신 블로거님께도 감사드립니다~ ㅎ
저작자 표시
신고

'일상 > 일터' 카테고리의 다른 글

위젯팩토리 플러그인 사용법 챕터1 - 설치!  (5) 2009.07.21
태극기 휘날리며!!  (2) 2009.07.14
배너위젯 제작법  (4) 2009.04.15
나만의 배너 설정방법  (60) 2009.01.23
Trackback 0 And Comment 2

배너위젯 제작법

|
위젯뱅크에 등록된지 벌써 한분기가 지났는데 이놈의 귀차니즘때문에 이제야 제작기를 올리게 되네요.

일단 배너위젯에 필요한 설정은 3개이다.


이미지경로, 링크경로, 툴팁으로 띄울 링크이름
이 설정들을 UserPref로 추가한다.
   <UserPref name="img" display_name="이미지경로"
        default_value="http://pimg.daum-img.net/widgetbank/img_banner.gif"/>
  <UserPref name="link" display_name="링크경로"
        default_value="http://widgetbank.daum.net" />
  <UserPref name="tooltip" display_name="링크이름"
        default_value="배너 위젯"/>
셋 다 텍스트 형태라 datatype은 없어도 된다.

이제 컨텐츠 영역을 만든다.
   <script type="text/javascript">
  
   ...
  
   </script>
   <div id="bannerArea"></div>
데이터를 가져와서 html 코드를 만들 script영역과 실제로 배너를 띄울 div만 있으면 된다.

이제 스크립트 코드 차례

   function setBanner() {
     var prefs = new gadgets.Prefs();
     var img = prefs.getString("img");
     var link = prefs.getString("link");
     var tooltip = prefs.getString("tooltip");

     var html = "";
     html += '<a href="' + link + '" target="_blank">';
     html += '<img src="' + img + '" alt="' + tooltip +  '" title="' + tooltip + '" border="0" width="166px" height="64px" /></a>';

     _gel('bannerArea').innerHTML = html;
   } 

배너를 셋팅하는 setBanner 함수를 만든다.
prefs에 사용자 설정을 얻어오는 객체를 생성하고,
img, link, tooltip에 데이터들을 받아온다.
<a> 태그의 href 속성에 link를 셋팅하고,
<img> 태그의 src 속성에는 img를, alt와 title속성에는 tooltip을 셋팅한다.
좀 더 이쁘게 보이도록 border는 0으로 했다.
그리고 위에서 만든 'bannerArea' div에 생성한 html을 집어넣으면 된다.

실제 기능을 하는 녀석들은 끝났고, 이제 위젯이 돌아갈때 이녀석을 부르기만 하면된다.

    gadgets.util.registerOnLoadHandler(setBanner);

setBanner를 실행하라는 구문이다.

이로써 기본적인 기능은 끝이다.
참 쉽죠~ 근데 이게 끝이 아니다.
몇가지 예외상황을 처리해줘야 한다.

이글루스에서는 몇몇 레퍼를 차단하고 있었다.
그래서 혹시나 이글루스에 포스팅된 이미지를 이미지 경로에 집어넣으면 이미지가 로딩이 되지 않고 엑박이 떠버린다.

그래서 이런 경우는 걸러줘야 하겠다.
이글루스의 이미지 파일 경로는 http://pds{서버번호}.egloos.com/pds ... 이런식으로 시작하니 이런 경우는 다른 이미지를 띄워주면 되겠다.

  if (img.search('http://pds.*egloos.com/pds.*')  == 0) {
     img = "http://pimg.daum-img.net/widgetbank/img_error.gif";
  }

img 내용중 'http://pds.*egloos.com/pds.* 이런 녀석이 있으면 이미지 로딩 배너로 주소를 재설정해준다.

이글루스의 포스팅 이미지로 이미지 경로를 세팅한경우 이미지 로딩 에러 배너가 나타나고 있다.

문제가 하나 더 생겼다. 일부 사용자들의 경우 http://를 입력하지 않는 경우가 있다.
그래서 그냥 주소만 입력한 경우에는 어휴~
이렇게 링크도 깨지고 이미지도 엑박이 뜬다.

http://로 시작하지 않는 경우는 앞에 http://를 붙여줘야 한다.

   if (link.substr(0, 7) != 'http://') {
      link = "http://" + link;
   }
   if (img.substr(0, 7) != 'http://') {
      img = "http://" + img;
   }

link와 img의 값의 처음 7자리가 http://가 아니면 앞에 http://를 붙여주는 부분이다.
완벽한 수행은 못하겠지만 대부분의 사용자 설정 오류를 잡아줄 것이다.

아래는 완성된 위젯코드

츠암~ 쉽죠잉~
저작자 표시 동일 조건 변경 허락
신고

'일상 > 일터' 카테고리의 다른 글

태극기 휘날리며!!  (2) 2009.07.14
배너위젯 제작법  (4) 2009.04.15
나만의 배너 설정방법  (60) 2009.01.23
톡틴게임 모음 위젯 제작기 Ver. 0.1  (0) 2009.01.06
Trackback 0 And Comment 4

나만의 배너 위젯뱅크 등록!!

|
사용자 삽입 이미지

톡틴게임 모음에 이어 나만의 배너도 위젯뱅크에 등록됐다.
만들기도 쉬웠지만 유용한 위젯!!
사이드바에 내 배너나 만들어서 달아야겠다 ㅋㅋ

사용자 삽입 이미지


퍼가기 페이지는 여기에요~
신고
Trackback 0 And Comment 4

톡틴게임 모음 위젯뱅크 등록!!

|
톡틴게임 위젯


사내 위젯제작 컨테스트에 참가했던 위젯이 드디어 위젯뱅크에 등록되었다.
에듀테인먼트SU에서 최신 인기게임으로 API를 제공해줘서 더 기능이 강화된 위젯으로 업그레이드!!
UI도 멋지게 변경해줘서 또 업그레이드!!
또 기능이 너무 없는 것 같아 처음 선택된 게임 종류를 선택할 수 있게 사용자 데이터 추가로 다시 업그레이드!!

제작 방법은 다음 포스팅으로 좀 미뤄두고~(이놈의 귀차니즘 ;;)

퍼가기 페이지는 여기에요~
신고

'일상 > 일터' 카테고리의 다른 글

나만의 배너 위젯뱅크 등록!!  (4) 2009.01.06
톡틴게임 모음 위젯뱅크 등록!!  (2) 2008.12.29
서울에서 맞는 올해 첫눈  (2) 2008.01.21
첫 주말 출근  (2) 2008.01.19
Trackback 0 And Comment 2
prev | 1 | next