머드초보의 블로그

아...좀 문제가 발생할 것 같기도 하지만-_- 괜찮을꺼에요-_-[code]localStorage.getItem("데이터명");
localStorage.setItem("데이터명", 데이터);
localStorage.clear();
[/code]
크롬 플러그인에서 배열을 저장하기위해서는 json으로 변경할 것이 필요한데, JSON관련된 라이브러리를 제공하더라구요. 스트링화 하고, 파싱하는 함수를 사용하면 됩니다.
[code]localStorage.setItem("저장배열명", JSON.stringify(array));
JSON.parse(localStorage.getItem("저장배열명"));[/code]

나중에 시간되면 크롬용 MP3Player도 만들어봐야겠어요. NPAPI를 제공하는 것 같아 로컬파일 접근도 되는 것 같아요(확실하진 않지만....-_-).

Javascript로 개발하다보면 값을 확인하기 위해 alert을 가끔씩 찍습니다-_- 요즘은 FireBug와 같은 Javascript 디버그 툴들이 참 많이 있긴하죠.
FireBug는 console.log를 통해서 메세지를 찍을 수 있죠.
하지만, FireBug를 켜지 않으면 에러를 뿜어버리는 단점이 존재를 하죠-_- 그래서 가장 간단히 값을 확인하는 것은 역시나 alert이죠. 하지만, alert의 단점은 마우스동작으로 인한 값을 추출하기 위해서는 확인하기 힘든 단점이 있어요.
마우스로 드래그앤드랍을 하는 사이에 값을 확인하고 싶은데, 거기서 얼럿이 떠버리면 확인하기 힘들죠-_-

그 단점을 극복해주는 Blackbird라는 놈이 있는데요. 이름 참 잘 지은 것 같네요. 웹사이트에서 검은창으로 떠다니는 디버그메세지창을 보여주거든요-_-

아래는 다운받고 데모를 볼 수 있는 사이트입니다.
http://www.gscottolson.com/blackbirdjs/

사이트 방문하시면 사용법은 그냥 알 수 있구요.
추가도 그냥 해당 사이트에 js와 css파일을 추가만 하시면 바로 쓸 수 있습니다^^
그리고 웹사이트 한쪽 구석에 나오게 되는데 저것에 의해서 화면이 가려질까봐를 염려한-_- 창 이동 단축키가 존재합니다-_-
단축키로 창을 보이고 안보이게 할 수 있습니다. 클리어로 창 내용을 지울 수도 있구요^^

로그찍는 것도 로그레벨에 따라 찍을 수 있어서 좋네요. 그리고, 프로파일링 기능(이라고 하기에 좀 뭐한-_-)이 있는데, 성능을 개선을 위한 수행시간 측정을 해주는 기능도 제공합니다^^

다만 아쉬운 점이 있다면 객체나 배열을 한번에 로그로 찍을 수 있는 기능이 없네요.
Arthropod이라는 Adobe AIR로 개발된 Flash디버그메세지창이 있는데요(이것과 매우 비슷하죠^^). 이것은 그냥 Debug.object(object명); 이라고 치면 그 객체정보가 다 나오는 기능이 있죠.
배열도 Debug.array(array명);하면 배열내용을 확인할 수 있구요.

그래도 크로스브라우징으로 로그를 찍을 수 있어서 참 좋은 듯^^ FireBug는 FireFox에서 밖에 안되서-_-

PS. 이 프로그램은 http://twitter.com/xguru님으 트위터를 빨로우 하다가 발견했습니다. 역시 트위터의 힘은 대단한 것 같아요^^ 감사해요~

몰랐는데, 그냥 자신의 도메인에서 가져올 땐 잘 가져와지는데, 다른 도메인에서 하려니까 잘 안되서 찾아보니 하는 방법이 있네요.
예로 다음 오픈api같은 경우 callback파라메터에 메소드명을 넣어주면 "메소드명({jsondata})" 형태로 넘어옵니다.
그래서 크로스도메인을 사용하려면 이와 같이 구현해야합니다.

다음OpenAPI를 보면 위와 같이 json이 출력이 됩니다.
url : http://apis.daum.net/contents/movie?apikey=키값&q=awake&output=json&callback=aa
결과 : aa({json~~})

그래서 실제 크로스도메인형태로 구현할 때 callback함수를 받은 값을 앞에다가 그냥 넣어주면 됩니다-_-

php코드는 대충 이런식으로-_-
[code]$json = $_GET["c"] . "(" . json데이터 . ")";
echo $json;[/code]

아.......아마 저런 형태로 안하면 callback함수가 호출 되지 않고 firebug에서 이런 에러를 뿜을 꺼에요.
"invalid label"
이것 때문에 미치는 줄 알았는데, crossdomain인 경우에는 이런식으로 해줘야하더군요.

참고사이트
http://www.ajaxlines.com/ajax/stuff/article/jquery_ajax_cross_domains_using_jsonp_getjson.php

주소는 여기입니다.
http://www.calendarview.org/

일하다가 데이트픽커가 좀 필요해서 만들기 귀찮고 해서-_-; 찾아보던중-_-;
매우 심플한 Date Picker를 발견했습니다.

Prototype과 Script aculous기반의 Calendar입니다.
Prototype은 이곳에서 다운.
http://www.prototypejs.org/download
Script Aculous는 이곳에서 다운(필요한 것은 builder.js파일 1개뿐)
http://script.aculo.us/downloads

릴리즈 히스토리를 보게 되면 더이상 업데이트가 되지 않고 있습니다-_-;

암튼 한줄이면 바로 생성할 수 있습니다.

[code]
Calendar.setup({
    dateField      : 'fromdate',
    triggerElement : 'fromDateButton'
});
[/code]
triggerElement에 버튼 id를 넣어주면 버튼을 클릭했을 때 Calendar가 표시됩니다.
dateField는 Calendar에서 날짜를 클릭하면 해당 dateField에 YYYY-MM-DD형식으로 표시해줍니다.

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

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


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