'위젯 제작법'에 해당되는 글 3건

  1. 2009.07.14 태극기 휘날리며!! (2)
  2. 2009.04.15 배너위젯 제작법 (4)
  3. 2009.01.06 톡틴게임 모음 위젯 제작기 Ver. 0.1

태극기 휘날리며!!

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

오~ 좋은데~
이 글을 보고 국기 이미지는 올리진 않고, 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

톡틴게임 모음 위젯 제작기 Ver. 0.1

|
처음에 톡틴게임 위젯은 초 허접이었다.
api도 없이 게임 url을 일일이 긁어서 붙인 코드

 <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="톡틴게임"
  title_url="http://tocteen.daum.net/game/"
  author="일리있는 이야기"
  author_email="37.2@hanmail.net"
  width="166"
  height="125">
   <Require feature="tabs" />
</ModulePrefs>

위젯에 대한 명세이다.
여기서 그나마 좀 모듈을 사용한 것은 shindig에서 제공하는 탭기능이었다.
게임의 장르가 여러개여서 여기서 제공하는 탭으로 분할했다.(역시 기본 UI는 이쁘지가 않다)

이 밑으로 실제 위젯 코드가 들어간다.

 <Content type="html">
<![CDATA[
...
  // 소스코드
...
  ]]>
</Content>
</Module>

코드를 입력하고 닫는 부분까지 ..

이제부터 코드설명 들어갑니다.

     <style type="text/css">
   .gameList { padding: 5px 5px 0 5px; width:166px; }
   .gameList a {
       font-family: 굴림, gulim, sans-serif;
       font-size: 11px;
       font-weight: normal;
       text-decoration:none;
   }
   .gameTail { padding: 5px 5px 0 5px; width:166px; }
   .ssmoren {
       color:#0307C3;
       text-decoration:none;
       font:11px "돋움",dotum;
       letter-spacing:-1;
   }
   .moreBlit  {vertical-align:1px; }
   .g_tit {color:#7a7a7a;font-size:12px;}
   </style>


아무리 초기버전이라지만 약간의 UI는 가져가야하지 않겐나~ ㅎㅎ
더보기 버튼과 게임 제공처 링크 부분의 UI입니다.

우선 게임 영역으로 지정할 4개의 div를 지정합니다.

     <div id="actionDiv" style="display:none" class="gameList">
       <table><tr>
           <td><a href="javascript:openGamePopup('451')">메탈슬러그3</a></td>
           <td><a href="javascript:openGamePopup('3275')">메이플스토리</a></td>
       </tr><tr>
           <td><a href="javascript:openGamePopup('5')">천공대전</a></td>
           <td><a href="javascript:openGamePopup('23')">라이덴X</a></td>
       </tr><tr>
           <td><a href="javascript:openGamePopup('1346')">챔피온</a></td>
           <td><a href="javascript:openGamePopup('408')">마리오 리믹스</a></td>
       </tr><tr>
           <td><a href="javascript:openGamePopup('90')">파워레인져</a></td>
           <td><a href="javascript:openGamePopup('1215')">드래곤볼Z</a></td>
       </tr></table>
   </div>


이런식으로 테이블에 게임과 게임 팝업을 띄우는 링크를 걸어놓고 'actionDiv', 'arcadeDiv', 'sportsDiv', 'comicDiv' 내게의 영역을 만들어 놓습니다.

마지막에는 게임제공처와 더보기 링크를 표시합니다.

     <div class="gameTail">
       <span style="margin-top:12px;text-align:right;padding-right:4px;" class="g_tit">
           [제공 : 주전자닷컴]
       </span>
       <span>
           <a href="http://tocteen.daum.net/game" class="ssmoren" target="blank">더보기</a>
           <img src="http://imgsrc.search.daum-img.net/search_all/icon/more_arrow.gif" width="6" height="5" class="moreBlit">
       </span>
   </div>


이부분은 위쪽에 게임 장르 탭이 변하더라도 변하지 않는 정적인 부분입니다.


이제 스크립트 설명 들어갑니다.

     <script type="text/javascript">
   var tabs = new gadgets.TabSet(__MODULE_ID__);
   // 탭을 생성하는 함수
   function initTab() {
           tabs.addTab("액션", {
               contentContainer: document.getElementById("actionDiv")
           });
           tabs.addTab("오락", {
               contentContainer: document.getElementById("arcadeDiv")
           });
           tabs.addTab("경기", {
               contentContainer: document.getElementById("sportsDiv")
           });
           tabs.addTab("코믹", {
               contentContainer: document.getElementById("comicDiv")
           });
   }

    //게임플레이 팝업
   function openGamePopup(gameId){
       window.open(
           'http://tocteen.daum.net/game/game/view/gamePopup.html?popurl=http://zuzunza.joins.com/daum/player.html?game_id=' + gameId, '',
           'width=960,height=720,scrollbars=no,resizable no'
       );
   }

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


tabs에 탭기능을 사용하겠다고 정의를 합니다.
initTab 함수는 장르별 게임탭을 지정합니다. 위에서 정의해놨던 'actionDiv', 'arcadeDiv', 'sportsDiv', 'comicDiv' 영역들을 매칭시킵니다.

openGamePopup 함수는 gameId에 맞게 게임팝업창을 띄워줍니다.
위젯이 로딩되었을때 initTab가 실행되어야 하므로 registerOnLoadHandler로 실행시켜줍니다.



허접한 게임모음 위젯의 완성입니다.
다음에는 좀 업그레이드되서 API를 사용한 톡틴게임 위젯 제작기를 올리겠습니다.
0.1버전 톡틴게임 xml도 첨부합니다.

090106_톡틴게임V01.xml

톡틴게임 위젯 버전 0.1 XML 소스

저작자 표시
신고

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

나만의 배너 설정방법  (60) 2009.01.23
톡틴게임 모음 위젯 제작기 Ver. 0.1  (0) 2009.01.06
나만의 배너 위젯뱅크 등록!!  (4) 2009.01.06
톡틴게임 모음 위젯뱅크 등록!!  (2) 2008.12.29
Trackback 0 And Comment 0
prev | 1 | next