2011년 3월 28일 월요일

홈페이지에 나눔로또 위젯을 달아봅시다

예전에 만들어 놓은 나눔로또 Web API를 사용해서 홈페이지나 블로그에 간단하게 추가할 수 있는 나눔로또 당첨 번호 위젯을 만들어 보았습니다. Google App Engine (Python)에 대해 공부해볼 겸해서 만들었던 것이라 그다지 큰 쓰임새가 없었는데 이렇게라도 소개를 하면 그나마 좀 쓰이지 않을까 해서 글로 남겨봅니다. ;-)

몇 줄 안 되는 HTML + JavaScript 코드이므로 적당한 곳에 그대로 아래 코드를 추가하면 됩니다. (Blogger에서는 대시보드 -> 꾸미기 -> 페이지 구성요소 -> 가젯 추가 -> HTML/JavaScript 선택한 다음 아래 코드를 본문에 붙여넣기 하면 됩니다.) 단, 웹이 제 전문 분야가 아니라서 별로 예쁘지는 않습니다. 그저 그럭저럭 잘 동작한다는 데에 의미를 두고 싶습니다. :-( 그러니 화면에 보여지는 모양을 변경하고 싶거나 다르게 동작하길 원한다면 loadLotto 함수의 내용을 적절히 수정하면 되겠습니다.

<div id="lottoDiv">loading...</div>
<script type="text/javascript">
function loadLotto(a) {
  lotpane = document.getElementById('lottoDiv');
  lotpane.innerHTML = '제 <span style="color: green;"><b>' +
      a.gno + '</b></span>회 (' + a.gdate + ')<br /><b><span style="color: red;">' + 
      a.nums + '</span> / <span style="color: blue;">' + a.bnum + '</span></b>';
}
</script>
<script type="text/javascript" src="http://lotto.kaisyu.com/api?method=get&callback=loadLotto">
</script>

소스 내용이 간단하므로 이해하는 데 큰 어려움은 없겠지만 간단히 설명을 하자면 크게 세 부분으로 나눌 수 있습니다.

  1. div 태그: 나눔로또 번호가 표시될 위치에 id가 lottoDiv인 div 태그를 하나 만들어 둡니다.
  2. 첫 번째 script 태그: Callback으로 호출될 JavaScript 함수 loadLotto를 만듭니다. 이 함수는 인자로 넘어온 a 객체에서 필요한 정보를 가져다 화면에 보여줄 HTML 코드를 생성한 다음 lottoDivinnerHTML 값으로 지정해줍니다. (a 객체의 구성에 대한 상세한 내용은 나눔로또 Web API를 참고해주세요.)
  3. 두 번째 script 태그: 이제 준비가 되었으므로 Lotto-K Web API를 호출하는 URL을 script 태그의 src 속성에 추가합니다. 이 때 첫 번째 script 태그에서 만들어둔 함수의 이름(loadLotto)을 callback 파라미터에 넘겨줍니다.

    브라우저에서 직접 이 URL을 입력해보면 그 결과가 아래와 같습니다. JSON 형식으로 된 나눔로또 당첨 번호 오브젝트를 파라미터로 가지는 loadLotto 함수 호출 형태라는 것을 한 눈에 알 수 있습니다.
    loadLotto({"bnum": 35, "gno": 434, "gdate": "2011-03-26", "nums": [3, 13, 20, 24, 33, 37]})
    그러므로 이 내용을 script 태그에 src 속성으로 지정하여 실행하면 첫 번째 script 태그에서 정의한 loadLotto 함수에 나눔로또 당첨 번호 오브젝트가 전달되는 것이죠.

실제로 페이지 내에 추가해서 실행한 결과는 아래와 같습니다.

loading...

위에서 소개한 내용 외에 나눔로또 당첨 여부를 확인할 수 있는 버튼 위젯에 대한 예제도 있으므로 관심 있는 분들은 여기를 따라가보세요.

그리고, 혹시 사용하면서 궁금한 점이 있거나 API 기능 추가에 대해 건의하고 싶은 내용이 있으면 언제든 댓글 남겨주세요. 능력이 되는 범위 내에서 천천히 수정해보겠습니다. :)

0 comment(s):

댓글 쓰기