[Javascript] 구글날씨API를 이용해서 위젯(?)을 만들어보자.

우선 구글날씨API는 XML으로만 제공을 합니다.
자바스크립트에서는 외부사이트에 있는 XML파일을 불러올 수 없습니다.
그래서 저 XML을 JSON으로 바꿔줘야합니다.
XML을 JSON으로 바꿔주는 것은 야후파이프로 합니다.

야후파이프란? 외부에 있는 데이터들을 모아서 자기만의 아웃풋을 만들 수 있는 사이트!
예를 들어, A사이트의 RSS와 B사이트의 RSS를 모아서 이쁘게 정렬해서 1개의 RSS로 만들고 싶다! 라면, 야후파이프로 가능합니다. 야후파이프로 이쁘게 그려주기만 하면 되죠. 두개의 RSS사이트를 가져다 놓고, OUTPUT으로 그냥 선만 그어주면 됩니다.
또 다른 기능은 해당 데이터를 JSON으로 출력해주도록 할 수 있습니다. 파이프로 만든 주소에 파라메터값 _render를 json으로만 바꿔주면 json을 리턴하는 주소를 만들 수 있습니다. json으로 리턴하는 주소가 있다는 얘기는 javascript에서 불러와서 사용할 수 있다는 얘기죠.
야후파이프는 나중에 포스팅을....-_-;

야후파이프 주소 : http://pipes.yahoo.com/pipes/

javascript framework은 prototype으로....(이것밖에 할 줄 모름 ㅠ)
[code]
var GoogleWeatherWidget = Class.create();

GoogleWeatherWidget.prototype = {
    initialize: function(contentDiv) {
        $(contentDiv).addClassName('content-div');
        var locationDiv = new Element('div', {id: 'location'});
        var tempcDiv = new Element('div', {id: 'tempc'});
        var conditionDiv = new Element('div', {id: 'condition'});
        var windDiv = new Element('div', {id: 'wind'});
        var iconDiv = new Element('div').insert(new Element('img', {id: 'icon'}));
        $(contentDiv).insert(locationDiv);      $(contentDiv).insert(tempcDiv);
        $(contentDiv).insert(conditionDiv);    $(contentDiv).insert(windDiv);
        $(contentDiv).insert(iconDiv);
       
        this.pollingListener = this.pollingProc.bindAsEventListener(this);
        new PeriodicalExecuter(this.pollingListener, 60);   
        this.pollingProc();
    },
   
    pollingProc: function() {
        var url = 'http://pipes.yahoo.com/pipes/pipe.run?'
        url += '&_id=eBxyJgZh3RGQLC8B6icw5g';
         url += '&_render=json';
         url += '&location=incheon';
         url += '&_callback=parseResponse';
        // 이놈을 추가하면 캐쉬에서 안불러오고 계속해서 불러오는군요 ^^
        url += '&' + Math.round(Math.random()* (new Date().getTime()));
       
        if ($('weatherInfo')) {
            $('weatherInfo').remove();   
        }
        var weatherInfo = new Element('script',{
            id: 'weatherInfo',
            type: 'text/javascript',
               src: url});
        $$('head')[0].insert(weatherInfo);
    }
}

function parseResponse(data) {
    $('location').update(data.value.items[0].location);
    $('tempc').update(data.value.items[0].tempc + '℃');
    $('icon').src = 'http://www.google.co.kr/ig/' + data.value.items[0].icon;
    $('condition').update(data.value.items[0].condition);
    $('wind').update(data.value.items[0].wind);
}
[/code]
소스를 분석해보면, new PeriodicalExecuter(this.pollingListener, 60);부분에서 60초마다 this.pollingProc을 수행하겠다는 얘기입니다. 핵심은 pollingProc입니다.
pollinProc을 보면,

var url = 'http://pipes.yahoo.com/pipes/pipe.run?'
       url += '&_id=eBxyJgZh3RGQLC8B6icw5g';
        url += '&_render=json';
        url += '&location=incheon';
        url += '&_callback=parseResponse';

우선 제가 만든 야후파이프인데요. 구글날씨API를 이용해서 JSON으로 변환한 파이프입니다.
location값으로 지역값을 받도록 했구요. callback함수는 parseResponse로 했습니다. url이 head에 붙으면, parseResponse가 호출이 됩니다.

parseResponse를 보면, 해당 div에 값을 업데이트 시켜주는 방식으로 되어있습니다.
결론은.....xml로 리턴하는 RSS나 다른 API정보들도 웹에서 javascript를 이용하면 불러올 수 있다? 정도?-_-;
아래는 위젯......위젯 그까이꺼......심플해야지....-_-; 초간단 날씨위젯!

절대...그냥 표시한 거 아닙니다-_-; 구글에서 긁어와서 보여주는 겁니다-_-;