Saturday, August 22, 2009

ibatis로 간단한 게시판 짜기

http://elvo.tistory.com/

[동영상 강좌] GeoPlace를 활용한 지리정보 추출하기

GeoMaker 활용하기 from YDN Korea on Vimeo.

1. GeoMaker는 무엇인가요?

GeoMaker는 Yahoo! Placemaker Open API를 활용해 만든 오픈소스 웹 어플리케이션입니다.
웹 페이지, RSS 피드, 텍스트 등에서 지역명을 뽑아서
위도, 경도, WOE ID(Where On Earth) 등을 추출해 주는 기능을 가지고 있습니다.
이 정보는 여러분의 불로그에 지도와 함께 간단하게 붙일 수 있도 있고
마이크로포맷 형태로 사용할 수도 있습니다.


GeoPlace 바로가기

2. Yahoo! Placemaker 는 또 뭔가요?

Yahoo! Placemaker 사이트로 가자!
Yahoo! Placemaker 는 비정형의 웹문서에서 지리 정보를 추출하는 도구입니다.
예를 들어, 웹 페이지, RSS피드, 뉴스 기사, 블로그 포스트, 트위터 업데이트 등에서
지명을 찾아내고 이 지명의 WOE ID(Where On Earth) 위도,경도 등을 간단히 추출할 수 있습니다.
GeoMaker는 사실 Placemaker의 Open API를 이용한 웹 인터페이스라고 볼 수 있습니다.

3. 어떻게 사용하면 되나요?

별로 어렵지 않아요, 다음 순서로 사용합니다.

1). 지명이 포함된 텍스트, 웹 페이지 또는 RSS URL을 입력합니다.
지명이 포함된 텍스트, 웹 페이지 또는 RSS URL을 입력합니다

2). 추출된 지명과 정보를 확인 합니다.
추출된 지명과 정보를 확인 합니다

3). 야후!지도 혹은 지명을 마이크로포맷으로 이용합니다.
야후!지도 혹은 지명을 마이크로포맷으로 이용합니다

4. 소스를 받아서 제 서버에 설치하고 싶어요

네, 소스를 뜯어 보고 싶은 여러분의 마음을 이해 합니다. :)

GeoMaker는 개발자 여러분의 구미에 맞게 마음대로 응용할 수 있도록 소스 코드가 공개 되었습니다.

필요하신 분들은 아래 링크에서 다운로드 받아서 공부해 보세요.

GeoMaker 소스코드, http://github.com/codepo8/GeoMaker/tree/master

GeoMaker 소스 - http://github.com/codepo8/GeoMaker

내친 김에 GeoMaker를 여러분의 서버에서 직접 실행하고 싶다면?
다음 문서를 참고 하세요.

GeoMaker for Developers, http://icant.co.uk/geomaker/developers.php

참고 URL

1) Geomaker , http://icant.co.uk/geomaker/index.php

2) 제작자 , Christian Heilmann
개구장이  Christian
- 제작자 홈페이지 , http://icant.co.uk/
- 제작자 Twitter, @codepo8

3) 사용된 기술
- Yahoo! PlaceMaker http://developer.yahoo.com/geo/placemaker
- Yahoo! Map, http://icant.co.uk/geomaker/developer.yahoo.com/maps/ajax
- Yahoo! User Interface Library , http://developer.yahoo.com/yui

혹시 Yahoo! Placemaker Open API를 이용해 만든 재미있는 서비스가 있다면 저희에게 연락 주세요.
본사 YDN Blog를 통해 여러분의 멋진 작품을 널리 널리 소개 해드리겠습니다.

야후! 개발자 네트워크
정진호

야후 매시업 캠프 – Pipes, YUI, 지도 API 발표자료

January 31st, 2009No comments

2009 대한민국 매시업 경진대회(http://mashupkorea.com/2009/)의 일환으로
후원사 (MS 다음, 야후, NHN)의 맨토들과 함께 코딩도 하고 API 사용법도 익히는
매시업 캠프가 지난 2009.1.31(토)에 야후!코리아 사무실에서 열렸습니다.


이날 행사에는 90분씩 3개의 세션이 준비 되었습니다.

첫번째 세션은 인상 좋은 김병석 과장님이 진행해 주신
Yahoo! Pipes 이해와 활용 입니다.
Yahoo Mashup Camp 17.


직관적인 인터페이스와 쉽고 강력한 기능에도 불구하고
의외로 이날 야후 파이프를 처음 접해 보신 참가자 들이 많았습니다.
Yahoo Mashup Camp 06.


다소 진입장벽이 있기는 하지만 30분 정도만 설명을 듣고 따라한 결과
대부분의 참석자 분들이 쉽게 새로운 매시업을 만들어 볼 수 었습니다.
Yahoo Mashup Camp 08.

그리고 점심시간
삼성동 주변은 주말에 여는 식당이 없어서 미리 도시락을 준비 했습니다.
Yahoo Mashup Camp 20.

보기에는 이쁘지만 하지만 따듯한 밥을 못 드려 죄송합니다.
그래도 아침일찍 부터 행사 준비에 땀흘린 저희 맨토들은
맛있게 잘 먹었습니다.
Yahoo Mashup Camp 22.


오후에는 손경성 대리님의 야후 거기 지도 API 활용과
김수성 대리님의 YUI 활용 강좌가 이어 졌습니다.

Yahoo Mashup Camp 25.

Yahoo Mashup Camp 49.



이날 하루 종일 진행된 행사를 통해 맨토들과 참가자 들은
의미 있는 시간을 가졌습니다.
또한 앞으로도 외부의 개발자 분들을 위해 해결해야 할 숙제도 생겼구요.

Yahoo Mashup Camp 46.

Yahoo Mashup Camp 48.

Yahoo Mashup Camp 47.


매시업 캠프 행사에 참여해 주신 모든 분들께 다시 한번
깊은 감사를 드립니다.
Yahoo Mashup Camp 65.


네트웍 설정에 문제가 있어 실습에 불편을 드린 점 사과드립니다.


행사 사진 모두 보기
http://flickr.com/photos/phploveme/sets/72157613191881653/


발표 자료
http://www.slideshare.net/tag/mashupkorea







Yahoo Developer Network
정진호

[Open social] 트위터의 타임라인 받아오기.

http://textholic.textcube.com/28
Open Social API를 이용해 특정인의 TimeLine(메세지 기록) 불러오기.

개발 환경은 Eclips Ganymede. JDK 1.6 이상. 플러그인으로 오픈소셜 에디트를 설치했다.
설치 방법 및 환경 설정은 차후 포스팅 후 링크 하는 것으로 대체하겠습니다.

gadget.xml



모듈의 제목으로 표시 될 문자열을 입력합니다.

title="Twitter Streams Test">



// 트위터 API를 불러옵니다.



]]>


일단 이 소스를 구글의 소스 에디터인 GGE를 iGoogle에 등록 후 확인하거나,

이하의 사이트

http://code.google.com/intl/ja/apis/gadgets/docs/legacy/gs.html#GGE

에서 확인이 가능합니다. (트위터 ID부분의 수정이 필요.)


약간의 UI디자인을 섞는다면 블로그등에서 쉽게 자신의 트위터 갱신 내역을 알 수 있는

Thursday, August 20, 2009

자주 사용하는 javascript 문자열 처리 함수.


1. trim

String.prototype.trim = function() {
return this.replace(/(^\s+)|(\s+$)/g, '');
}


2. 입력된 문자열의 byte 수 체크

String.prototype.bytes = function() {
var str = this;
var len = 0;
for (var i = 0; i < str.length; i++) {
len += (str.charCodeAt(i) > 128) ? 2 : 1;
}
return len;
}


3. byte 수 만큼 문자열 자르기

String.prototype.cut = function(len) {
var str = this;
var s = 0;
for (var i = 0; i < str.length; i++) {
s += (str.charCodeAt(i) > 128) ? 2 : 1;
if (s > len) {
return str.substring(0,i);
}
}
return str;
}

[JavaScript] 창크기 조절에 따른 스크롤바 자동생성



New Document






























선택 순번 품목명 수량 단위 날짜 장소 비고
1 비고 비고 비고 비고 비고 비고 비고 비고 비고




아이폰으로 홈쇼핑을 즐겨보자

"마지막 1분"
화면속에서 주문자의 전화를 받는 안내원들의 모습과 주문수량은
하염없이 올라가고 쇼 호스트는 연신 마감을 외치면서
입에서는 속사포 같은 그리고 주문을 외우는듯한 빠른 말로
상품의 장점을 다시 늘어 놓습니다. 그리고 소비자는 역시 전화기로 손이가죠..

한국이나 미국이나 홈쇼핑의 모습은 비슷합니다.
홈쇼핑 중독도, 예전에 사회적인 문제 였던것도 어느 나라던지
한번 씩은 겪는 문제임은 틀림없고요.

아이폰 그리고 아이팟 유저들에게 홈쇼핑의 중독을 지도할...
그리고 지름신이 강림할 어플 하나가 나왔습니다. ^^;;;

미국 최대 홈쇼핑업체인 HSN 홈쇼핑네트워크에서
아이폰 유저들에게 홈쇼핑의 즐거움과 피폐함을 함께 전해주기 위해서 무료 어플을 배포하기 시작했습니다.

밑에 사진을 클릭하면 앱스토어로 안내..그러나 책임은 본인에게..^^






HSN 미국최대의 홈쇼핑 네트워크라는 수식어가 부족하지 않을정도로 좋은 물건도 많고 세일도 자주하지만
홈쇼핑도 많이 하면 좋다가도 좋지 않습니다.

호기심에 한번 깔아보고는 지웠습니다..
홈쇼핑 중독보다 무서운게 마누라 바가지거든요..^^;;;

Wednesday, August 19, 2009

fckeditor용 code syntax highlighter 2 사용하기

나는 블로그를 프로그래밍 관련된 글로 채우고 있다. 나에게도 도움이 다른 사람들에게도 도움이 되니까 말이다. 그래서 프로그래밍 코드를 많이 쓰는

그런데 코드를 쓰다 보면 이클립스나 에디트플러스 같은 에디터들에서 해 문법 하이라이트 기능이 없는 게 아쉬웠다. 그렇다고 일일이 손으로 색깔을 노가다는 하기 싫었고...

내가 자주 보던 블로그들에는 아래와 같이 들어간 코드가 많이 눈에 띄었다. 그래서 100% 뭔가 플러그인이 있을 확신했다. 그리고 오늘 찾았다.

간단한 설치 방법을 설명하겠다. 일단 제품은, 글 쓸 때는 fckeditor가 필요하다. fckeditor를 이용해 생성한 코드만 어디서든 코드 하이라이트 기능을 이용할 수 있다.

fckeditor에 플러그인으로 생성한 코드를, 코드 하이라이트 기능을 이용해서 보려면 보는 페이지에 js와 연결해야 한다. 두 부분으로 나눠서 설명하겠다.

code syntax highlighter fckeditor에 설치하기

1.

다운받는다 : code syntax highlighter 2 다운로드 (가장 버전을 다운받으면 될 것이다. 단, 자신의 fckeditor 버전과 호환이 되는지 살펴보기 바란다.)

(덧붙여 말하자면, 다음 링크에는 fckeditor의 다양한 플러그인이 있다 : fckeditor 플러그인 모음)

2.

사실 다운받은 다음에 있는 설명대로 하면 된다. 영어 설명서에 공포감을 갖고 있는 사람이 차분히 읽으며 따라하는 게 더 나을지도 모른다. 여튼, 나도 나름대로 보겠다.

왼쪽 그림처럼 폴더에 설치한다. 다운받은 거에서 압축 나오는 파일들 다 넣는다. 폴더명은 반드시 syntaxhighlight2여야 한다. 다르게 하면 작동 안 한다.

단, fckconfig.js도 같이 들어있는데, 이건 업로드할 필요 업다.

3.

fckeditor에 들어있는 fckconfig.js를 열고 아래 코드를 추가해 준다.

.
FCKConfig.Plugins.Add( 'syntaxhighlight2', 'en') ;

FCKConfig.Plugins.Add라는 함수가 씌어있는 곳이 있다. 찾아서 그 근처에 넣어주면 될

4.

그리고, 역시 fckconfig.js에 있는 툴바 세트 설정을 한다.

FCKConfig.ToolbarSets["Default"]나 FCKConfig.ToolbarSets["Basic"] 중에 자신이 사용하는 것이 뭔지 알고 게 좋을 것이다. 버튼이 많은 거면 Default고 버튼이 적으면 Basic이다. 말이다.

Custom으로 설정해서 사용하는 사람도 물론 있다. Custom을 건드릴 줄 아는 분은 굳이 설명 안 해도 될 것이라 믿는다.

Code Syntax Highlight2의 버튼이름은 SyntaxHighLight2다. 이것도 철자 틀리면 안 된다. 조심스럽게 붙여 넣는다. 붙여넣은 예시를 보여주면 다음과 같다. 이건 예시라는 명심하기 바란다. 어쨌든, 알아서 잘 넣으라는 말이다.(!)

FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','SyntaxHighLight2','-','Link','Unlink','-','About']
] ;

5.

여기까지 하면 일단 완료됐다. 그럼 fckeditor로 들어가서 플러그인이 작동하는지 알아보자.

일단 웹브라우저의 캐시를 삭제한다. 안 하면 변할 확률이 높다. 파폭이면 개인정보 초기화에서 캐시를 지우면 되고, 익스플로러라면 옵션에서 검색기록을 삭제한다.

fckeditor 편집화면에서 아래같은 버튼이 나오고, 눌렀을 아래같은 화면이 나오면 일단 성공한 것이다.

생성한 코드로 Code Syntax Highlighter2 작동시키기

이걸 찾느라 꽤 아무래도 영어는 딸린다;;

자매 사이트 같은 게 있다. 거기서 js 파일을 다운받아야 한다.

다운로드 페이지 바로 다운받기

압축을 풀면 test.html이란 아이가 있고, src, scripts, styles라는 폴더가 있다.

script, src, styles 폴더를 모조리 자신의 계정에 업로드한다. textcube에 js파일을 수는 없게 돼 있으므로, 자신이 파일을 업로드할 수 있는 계정이 한다.

test.html의 코드를 열어서 head 사이에 있는 script 코드랑 코드를 다 긁자. src와 href의 경로는 자신이 파일을 계정에 맞게 잘 수정해 줘야 한다. 다 긁어서, 글 보여주는 페이지에 넣는다.

나는 textcube를 사용하므로 스킨편집에 들어가서 skin.html에다 저 코드를 넣었는데, 작동하지 않았다. 소스보기를 하니까 사라져있었다. 그래서 위젯으로 들어간 다음 html 코드 위젯에다 저 코드를 집어넣었다.

그러면 설치 끝이다.