JSON Diff 릴리스

2008.07.18 02:18 from [IT] Web Tech
Tom Robinson씨가 매우 유용한 JSON Diff 유틸리티를 작성하셨습니다. 이 유틸리티는 차이점을 그래픽으로 볼 수 있게 해줍니다.
사용자 삽입 이미지
변경된 부분은 노란색으로, 추가된 부분은 녹색, 삭제된 부분은 빨간색으로 각각 표시됩니다.

from JSON Diff Released
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Dion씨가 자신의 블로그에 쓰셨던 글입니다.

비행기에서 생각해낸 아이디어라고 합니다(비행기가 때로는 영감을 주는 장소가 되기도 하나봅니다). 여하튼 Dion씨는 어제의 비행 도중 서버 프록시, JavaScript 클라이언트, 그리스몽키 스크립트를 포함하는 Endpoint 라는 프로젝트를 생각해내셨습니다.

어떤 URL을 요청하면 Location: 헤더에 의해 다른 위치로 리다이렉트 되는 경우가 있습니다. 이 라이브러리는 이 경우의 최종 도착지를 알려준다고 합니다. 동작 예제를 볼까요?
[code:js]
// Simple version
Endpoint.resolve('http://snurl.com/2luj3', function(url) {
  alert(url);
});
 
// Using the original URL to work out if it has changed
Endpoint.resolve(
  document.getElementById('testurl').value,
  function(url, orig) {
    alert(url);
    alert(Endpoint.isRedirecting(url, orig));
  }
);
 
// How it is used in the Twitter Endpoint Resolver
Endpoint.resolve(url, function(resulturl, originalurl) {
  if (!Endpoint.isRedirecting(resulturl, originalurl)) return;
 
  newtext = newtext.replace(originalurl, resulturl, "g");
  jQuery(el).html(newtext);
});
처음에는 XMLHTTPRequest를 사용하려고 했지만 동일근원정책의 제한때문에 포기해야 했습니다. 그래서 다음 방법으로 선택한 것이 JSONP 콜백을 반환하는 서버 프록시였습니다. resolve(url, callback)을 호출하면, script 태그가 즉시 생성되어 DOM에 추가됩니다.


App Engine을 서버 프록시의 호스트로 사용하고 싶었지만, 어떻게 해야할지를 잘 몰랐습니다. URLFetch로 App Engine의 리소스에는 접근할 수 있지만, 최종 도착지를 가져올 방법은 없었습니다.

이런 서비스에 대한 Steve Gilmor씨의 글을 읽어보기는 했는데, 이해하기엔 어려웠습니다.

한편, Simon Willson씨가 App Engine을 이용한 json-time이라는 간단한 서비스를 내놓았습니다. Python의 pytz 타임존 라이브러리를 JSON에 실어 내보내주는 서비스라고 합니다.

from Endpoint Resolver: JavaScript Library to hunt for Location redirects
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

inputEx는 "필드와 폼을 생성하기 위한 JavaScript 프레임웍"으로서, Eric Abouaf씨가 작성했습니다. 이 프레임웍은 폼을 기술하는데에 JSON 형식을 다음과 같이 사용하고 있습니다.:
[code:js]
{
        "fields" : [
                {
                        "type" : "group",
                        "inputParams" : {
                                "fields" : [
 
                                ],
                                "name" : "",
                                "tooltipIcon" : false,
                "value" : {

                },
                                "optionsLabel" : "Options"
                        }
                }
        ],
        "optionsLabel" : "Options"
}
위 코드는 빌더 프로그램을 이용해서 작성할 수 있습니다.

입문 안내서를 살펴보시고, 다음과 같은 응용프로그램을 작성하고 싶으시다면:

[code:js]
init: function() {
    this.buildTree();
    this.initContextMenu();
    this.buildForm();
    this.initEvents();
    this.queryData();
}
이 도구가 도움이 될 것 같습니다.
사용자 삽입 이미지
from inputEx : JSON form builder on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

사용자 삽입 이미지
글을 읽기 전에...

이 글에서 영속성, 영구적인 등으로 쓰인 단어는 persistent 입니다. 영구 저장소(persistent storage)라는 것은 비휘발성 메모리로 저장된 데이터가 영구적으로 보존되는 것을 말합니다. 같은 단어를 장기보존 스토리지(혹은 저장소), 영구 스토리지 등으로 표현하기도 합니다.

본문 내용

Sitepen의 Kris Zyp씨가 Persevere를 릴리스했습니다:

Persevere 프로젝트는 HTTP REST, JSON-RPC, JSONPath, HTTP 채널의 직관적인 표준 기반의 JSON 인테페이스를 사용한 분산 컴퓨팅과 영속성을 위한 오픈소스 도구 모음입니다. Persevere 프로젝트의 핵심은 Persevere 서버입니다. Persevere 서버는 Persevere JavaScript 클라이언트를 포함하고 있지만 표준 기반 인터페이스는 어느 프레임웍이나 클라이언트와도 사용할 수 있도록 하고 있습니다.

Persevere 서버는 객체 저장 엔진이자 인터랙티브한 서버측 JavaScript 환경에서 동적인 JSON 데이터의 영구적인 데이터 저장소를 제공해주는 응용프로그램 서버(Java/Rhino 상에서 실행)입니다. 현재는 베타판이며, JavaScript, Dojo, Ajax 개발자들에게 흥미로울만한 매우 충실한 기능들을 자랑하고 있습니다

다음은 JavaScript로 만들어진 자동-동기화를 하는 실시간 Persevere 데이터 그리드의 데모입니다:

[code:js]
var persevereStores = dojox.data.PersevereStore.getStores(); // persevere stores are auto-generated
customerStore = persevereStores.Customer; // and get the Customer store
dataModel = new dojox.grid._data.DojoData(null,null,{/*rowsPerPage:12,*/store:customerStore,query:"",clientSort:true});

addItem = function() {
        // need to specify the parent because the customerStore is hierarchical and the grid model will
        // call newItem without any info who the parent
        //customerStore.parentId="0.examples.customers";
        grid.addRow({firstName: "firstName", lastName:"lastName",created:dojo.date.stamp.toISOString(new Date,{zulu:true})});
}

from Persevere: JSON Storage / Application Server on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

구글에서 이번에는 JavaScript 없이 Flash나 서버측에서 API에 접근할 수 있도록 했습니다.

실제 동작한 데이터는 http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Ajaxian 여기서 보는 것처럼 생겼습니다. 문서화 되어있는 JSON 결과물이죠.

각 API에 대한 자세한 사항은 업데이트된 문서를 확인하시길 바랍니다:

간단한 코드 샘플도 포함되어 있습니다. 아래는 ActionScript에서 검색 결과에 접근하는 방법입니다:

[code:Java]
var service:HTTPService = new HTTPService();
service.url = 'http://ajax.googleapis.com/ajax/services/search/web';
service.request.v = '1.0';
service.request.q = 'Paris Hilton';
service.resultFormat = 'text';
service.addEventListener(ResultEvent.RESULT, onServerResponse);
service.send();

private function onServerResponse(event:ResultEvent):void {
  try {
    var json:Object = JSON.decode(event.result as String);
    // now have some fun with the results...
  } catch(ignored:Error) {
  }
}

Gears, OpenSocial, AppEngine, Android 는 물론 이 부분에도 관심있으시다면 , 전 세계에서 진행되는 Google Developer Days나 샌 프란시스코에서 5월 28-29일에 열리는 Google I/O 이벤트를 확인해보세요.

from Google offers Search, Feed, and Translation APIs to Non Ajax Usage on Ajaxian
Posted by 행복한고니 트랙백 2 : 댓글 1

댓글을 달아 주세요

  1. addr | edit/del | reply BlogIcon 랜덤여신 2008.04.26 23:54

    SOAP API 중단할 때는 언제고 갑자기 비슷한 서비스를 시작하는군요. 그럴 거면 애초에 중단하지 않는 게 좋았을 텐데요.

Jacob Seidelin 씨가 Flash를 사용하지 않고 순수 JavaScript로만 동영상 플레이어를 만들었다고 합니다: 처음엔 바이너리 파일을 바로 읽을까 하다가 마음을 바꿔먹고 생각해낸 것이 JSON 포맷으로 비디오를 표시하는 JSONVid 였다고 합니다.

아래 포맷을 보면 이해하시겠지만, 프레임 한장 한장을 base64 형태의 데이터로 내보낸 것입니다! (Crazy! 라는 말이 저절로 나와요):

[code:JScript]
{
frm : "JSVID", // format id tag
ver : 1, // version number of format
width : 320, // width of video
height : 240, // height of video
rate : 15, // framerate (frames per second)
frames : 495, // number of frames in file
data : {
video : [ // here comes 495 data:uris containing base64 encoded jpeg image frames
"https://t1.daumcdn.net/cfile/tistory/2550BE4256E6943610",
"https://t1.daumcdn.net/cfile/tistory/2647263C56E6943631",
...
]
}
}
그 다음에는 플레이어를 만들었습니다.

처음에는 각각의 프레임을 이미지 객체로 만들어서 캔버스 엘리먼트에 drawImage()를 이용해 렌더링하려고 했습니다. 잘 동작했고, 성능도 좋았지만(Opera에서는 CPU를 과하게 사용하긴 했습니다만), 보통의 이미지 태그만을 사용해서 각 프레임별 data:uri를 src 속성을 통해 바꿔주기만 하면 되겠다라고 생각했습니다. 변화는 Firefox와 Safari에서는 겨우 알아챌 수 있을 정도였고, Opera에서는 다소 나아져서 작동되었습니다. 그래서, 저는 캔버스를 버리고보통의 이미지들만 사용했습니다.

이제는, 똑같은 이미지 태그에 data:uri 만 변경하는 것을 계속하면 Firefox가 메모리를 다 잡아 먹을 것처럼 보였습니다. 그래서, 각각의 프레임마다 다음 프레임을 위한 새로운 이미지 객체를 만들고 저장해두었습니다. 동영상이 재생됨에 따라, 이전 프레임 이미지는 새로운 이미지 객체로 대체되었습니다. 이것은 잘 동작하는 것 같았지만 재생 전에 매번 이미지 객체를 생성하는 만큼 짜증스러운 딜레이가 생겼습니다. 그래서 결국 이미지 생성을 실제 렌더링 주기로 옮겨서 프레임 이미지가 이미 생성되어있는지 확인하고 없는 경우에만 새로 만들도록 했습니다.

이렇게 사용하면 된다고 합니다:

[code:Xml]
<html>
<head>
<script src="jsvideo.js" type="text/javascript"></script>
</head>
<body>
<div videosrc="myvideo.jsvid" videoautoplay="true"></div>
</body>
</html>

직접 테스트를 해보실 수도 있습니다(test1, test2). 하지만 여전히 Flash가 동영상에 있어서 최선의 방법인 것은 사실인 것 같습니다.

from JSONVid: Pure JavaScript Video Player on Ajaxian

Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Oliver Steele 씨가 JCON 이라는 이름의 JavaScript를 확인할 수 있는 gem(Ruby 언어의 모듈)을 만들었습니다. JSON 값이 ECMAScript 4 규칙에 맞는지를 확인합니다(예. { x:int, y:string }( 3, "foo" ) ).
[code:ruby]
type = JCON::parse "[string, int]"
type.contains?([‘a’, 1])     # => true
type.contains?([‘a’, ‘b’]) # => false
type.contains?([‘a’, 1, 2]) # => true
// via RSpec
[1, ‘xyzzy’].should conform_to_js(‘[int, string]’)
[1, 2, ‘xyzzy’].should_not conform_to_js(‘[int, string]’) # 2 isn’t a string
{:x => 1}.should conform_to_js(‘{x: int}’)
// with JavaScript Fu
# this will succeed if e.g. response contains a script tag that includes
# fn("id", {x:1, y:2}, true)
response.should call_js(‘fn’) do |args|
args[0].should conform_to_js(‘string’)
args[1].should conform_to_js(‘{x:int, y:int}’)
args[2].should conform_to_js(‘boolean’)
# or:
args.should conform_to_js(‘[string, {x:int, y:int}, boolean]’)
end

또 다른 JSON 소식입니다. 새로운 ECMAScript 표준에서는 다음 단어들이 더 이상 예약어가 아니라고 합니다.
abstract boolean byte char double final float implements int interface
long native package private protected public short static synchronized
throws transient volatile
그리고 Douglas Crockford 씨가 저 단어들을 예약한 브라우저가 없으므로 jsLint 에서도 예약을 해제하겠다라고 밝혔습니다.

from Conform your JSON to ECMAScript4 with JCON
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요