728x90
작년 3월 이후 아직까지 미투데이에서 떨어질 줄 모르고 있습니다. 요즘엔 활동이 뜸하지만, 한때는 아주 살다시피 했었죠. 신규 회원분들도 많이 들어왔을텐데, 새로한 친구신청이 올들어 손가락에 꼽을 수 있을 정도니 큰일입니다.

이 미투데이를 하다보면 많은 사람들이 한번씩 경험하는게 있는데 바로 번개입니다. 대규모, 혹은 소규모로 사람들이 모여서 먹고 마시고 떠들죠. ^^ 개인적으로는 커뮤니티들의 정모와는 살짝 분위기가 다르다 생각해요. 만나면 처음엔 어색해도 어느샌가 오래된 친구들 처럼 편하게 대하는 자신을 발견하게 되죠.

뜬금 없지만, 얼마 전에 다음지도 OpenAPI가 오픈했습니다. 이걸로 뭔가 재밌는걸 만들어볼게 없을가 고민하던 중에 우리 미투데이의 특성을 살려서 지도와도 부합하는 번개도우미를 만들어보면 어떨까 생각했습니다. 사실 이 아이템은 작년에 생각한건데, 그 때는 지도대신 지하철 노선도를 만들어서 지하철역을 중심으로 하는 번개도우미였습니다. 

지도로 만들자고 결정했을 때만 해도, 지하철노선도로 만들고 싶은 생각이 간절했으나. 상황에 조금 타협했습니다. 하지만 만들고 보니까 지하철노선도 보다는 좀 더 쓸모있겠다 싶네요.

Daum API는 지역검색을 지원하지 않아서, 원하는 지명의 좌표값을 받기 위해서는 다른 API를 사용해서 좌표값을 얻어와야 했습니다. 처음엔 네이버 geocode 로 그 작업을 진행했는데, 네이버는 단순히 지역만 리턴해주고, 지하철역이나 좀 더 세부적은 곳은 검색해내지 못하는 문제가 있어서 야후 POI로 급 노선 변경하였습니다.

2008/11/18 - [Review/IT] - 네이버(Naver) 를 통해 다음(Daum) 지도를 검색하자.


우선 개발상태는 다음과 같습니다. 이게 좀 직관적이지 못한것도 같네요. 뭐 설명도 하나 없어서 당황스러운것도 사실입니다. ㅎㅎ


뭐 보면 검색어를 입력할 수 있는 검색창이 있고, 검색된 상태에서 클릭하면 그 지역으로 지도가 이동합니다.

검색어를 입력하면 위 이미지와 같이 검색된 내용이 출력됩니다. 참 쉽죠?
이제 원하는 곳의 근방을 클릭해서 지도를 이동합니다.


위치 이동후 원하는 지역을 더블클릭 합니다.(한번클릭으로 변경 되었습니다.) 더블클릭하면 클립이미지가 뜨고, ( <-- 이런 이미지 입니다.) 거기에 한번 더 클릭을 하게 되면 위에 보이는 작은 레이어창이 뜹니다. 여기에 번개정보를 입력하고 등록을 누르면 완료입니다.

어때요, 참 쉽죠?

등록을 위해서 날짜, 미투아이디만날 장소는 필수입력이고, 사용자키를 입력하면 자신은 자동으로 참여 됩니다. 그리고 이 번개 내용을 자신의 미투에 알리고 싶다면 사용자키를 입력하셔야 합니다. 사용자키. 뭔지 아시죠? ^^

등록이 완료되면 아래와 같이 등록된 내역이 보입니다.

여기서 빨간색 부분을 클릭하면 지도에서 바로 이동하고, X명 으로 표시된 부분을 누르면 이 번개의 현재까지의 참가자를 볼 수 있습니다. 그리고 참여하기를 누르시면 이 번개에 참여가 되지요.(로그인 필요합니다.)
** 참여하기는 버튼을 누를 경우 사용자키를 입력받아서 별도의 수고를 들이지 않도록 개발할 예정입니다.


리스트에서 선택한 부분으로 지도가 이동하면 클립이 나타나는데, 이 클립을 한번 클릭하면 등록자가 어떤 번개를 생성하였는지 확인할 수 있습니다.

마지막으로 Me2Meet은 IE8의 최신 기중 중 webslices 를 지원합니다.
2008/08/12 - [Review/IT] - [ IE8 ] 웹슬라이스를 적용한 미투데이 최근 댓글 구독.
2008/08/11 - [Review/IT] - [ IE8 ] 웹슬라이스(webslices) 적용했습니다.

http://ottd.iruis.net/~onionmen/me2/meet/meet_list.php 이 주소로 들어가시면 IE8이나 FF with webchunks 사용자는 다음과 같은 표시를 볼 수 있습니다.

웹슬라이스를 등록 하면 지도에서 확인하는것과 같은 것은 무리일지 몰라도 어떤 번개가 어디서 열리는지는 쉽게 확인 할 수 있습니다.


Me2Meet 을 사용한 모든 번개정보는 http://me2day.net/me2meet 이라는 계정에 기록됩니다. 이 계정의 RSS(http://me2day.net/me2meet/rss)를 등록해놓으면 번개정보를 바로바로 확인 할 수 가 있지요. 번개에 목마른 미투인들. 이참에 한번 번개 호스트가 되어 보는게 어떠신가요?

관심Tag로 me2meet 을 등록해 놓으면 이 역시 바로바로 번개글 확인이 가능합니다. 참고하세요!

Me2Meet 의 주소는 http://ottd.iruis.net/~onionmen/me2/meet/  이곳 입니다. :-)

아쉽지만 해외는 지원하지 않아요!

  • 08년 11월 30일  미투데이 쉬운웹인증을 추가했습니다. 좀 더 사용하기 편리할 거 에요.
  • 08년 11월 30일  등록 후 모임등록하기 창을 꺼버리는데 성공했습니다. 정확히 얘기하면 끄는건 아니지만 어쨋든 사용성면에서 프러스가 되겠네요. 
  • 08년 11월 30일  등록 후 번개리스트가 자동갱신 되도록 수정하였습니다. 역시 사용성 향상에 도움을 줄 수 있겠네요.

이렇게 대충 개발을 마치긴 했는데, 아직 미흡한 것이, 장소를 등록하고, 등록창을 끄지 못하고 있습니다. 어떻게 창을 없애야 하는지 좀 감이 잡히지 않네요. 또, 등록을 완료하면 아래 창에 자동 갱신이 되게 하고 싶은데, 이거 쉽지가 않네요. 계속 Failed to open POST stream 이 뜨는데, 정확한 원인은 모르겠네요.
-> mark 를 두개 만들어서 새로 호출하는 방식으로 해결했습니다.
-> 해결했습니다. ajax.request 에서 onSuccess 부분에 parent.parent. 넣어주니 되는군요. -_-

디자인도 좀 입히고 싶은데, 디자인하기 너무 힘드네요. 디자인 하는게 PPT만드는거만큼만 쉬웠어도, 좀 더 이쁜놈이 나왔을텐데 살짝 아쉽습니다.

마지막으로 IE6에서 어떻게 나올지 모르겠네요. 미투사용자중에 IE6를 사용하는 사람은 많이 없겠지만, 간혹가다 있을지 모르니..
처음이랑 인터페이스가 변경 되었는데, IE6에서 깨지는 문제로 하루종일 작업했습니다. ㅠㅠ IE6싫어요! 뭐 그렇다고 파이어폭스3이나 IE7,8 에서 이쁘게 나온다거나 그런건 아니에요.

이 서비스는 Daum 지도 OpenAPI, Yahoo POI API, Me2day OpenAPI 그리고 Me2PHP를 사용하여 개발되었습니다.
API를 제공해주신 분들께 감사드리고, 특히 me2php를 제작해주신 홍민희 님께 너무너무 감사드려요~!!

Posted by onionmen
728x90

IE8 beta2 세미나가 지난 9월 건국대 새천년 기념관에서 열렸었습니다.

세미나 이전에 IE8용 웹슬라이스 관련 게시물을 작성한적이 있었습니다. 세미나 후에 제 블로그에 IE8과 웹슬라이스로 검색하여 들어오시는 분이 꽤 되었던걸 보면 이슈가 되긴 했었나 봅니다.

[관련글]
2008/08/12 - [Etc..] - [ IE8 ] 웹슬라이스를 적용한 미투데이 최근 댓글 구독.
2008/08/11 - [Etc..] - [ IE8 ] 웹슬라이스(webslices) 적용했습니다.

세미나에선 총 3가지의 기능을 소개했었는데, 그 중 하나가 이전에 소개드린 웹슬라이스고, 나머지 둘이 엑셀러레이터와 비쥬얼서치 입니다.

음, IE8이 선행되어야 한다는 단점 때문에 아직까지는 많은 분들이 이용하지 않고, 그만큼 관심도 상대적으로 적지만 사용자층이 두터워 진다면 재미있는 것들이 많이 나올 것으로 예상됩니다.

웹슬라이스에 이어서 나머지 두개 기능도 한번 만들어봐야지 생각했었는데, 이제야 시도를 해 보았습니다.
막상 해보고 나니 큰 어려움 없이 적용할 수 있었습니다. 아니 큰 어려움도 아닙니다. 정말 쉽더군요. 

딱이죠?

비쥬얼 서치에 적용하면 검색어 추천에, 사진자료까지 딱인듯한 아이템이라 바로 적용해보았습니다.  
위 검색창에 검색어를 입력하러 가지 않아도, 쉽게 검색을 할 수 있도록 만들어보겠습니다.

여기 검색어를 입력해보세요.


바로 익스플로러의 검색어 창에 검색 공급자를 등록하는 것인데요, 이게 생각보다 그리 어렵지 않습니다.


우선 XML 을 만들어야 하는데, 틀은 다음과 같습니다.

 

<?xml version="1.0" encoding="euc-kr"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> 
    <ShortName>DNF item</ShortName> 
    <Description>DNF item search</Description> 
        <Url type="text/html" template="http://www.d-fighter.com/?GO=dictionary|item&amp;clickSV=dnf&amp;search_text={searchTerms}" /> 
        <Url type="application/x-suggestions+xml" template="http://ottd.iruis.net/~onionmen/dic_test.xml" /> 
    <Language>ko-kr</Language> 
    <OutputEncoding>euc-kr</OutputEncoding> 
    <InputEncoding>euc-kr</InputEncoding>
</OpenSearchDescription> 

 여기서 중요한 부분은 붉은색으로 표시되어 있는 Url 입니다.

Type

   

Text/html

Request

검색어를 입력했을 때 실제 처리하는 부분

Application/x-suggestions+xml (+json)

optional

검색어 제안등의 부가기능을 제공

첫번째 type이 text/html 으로 되어 있는 부분은 검색어를 넘겼을 때 실제 검색을 처리하는 부분입니다.
바로 검색창에 검색어를 입력하고, 돋보기 아이콘을 클릭했을 때 실제 검색어를 처리하는 부분이죠.

중요한것은 get 방식으로 넘길 때 인자를 구분하는 &의 값을 &amp; 로 써주셔야 합니다.
그 아래 type이 application 으로 되어 있는 부분은 option 입니다. (제가 지금 IE7 이라서 이미지는 주말이 지나서 추가해야 할 듯 싶습니다.)

이미지와 함께 제공되는 검색어 추천을 사용하고 싶다면 저 부분을 따로 개발하여 넣으면 됩니다. +xml 이라고 되어 있으면 xml 타입으로 개발을 해야 하고, +json 으로 표기를 하면 json 으로 출력되도록 개발하시면 됩니다. 나머지 부분은 굳이 신경쓰지 않으셔도 되고, 한번 보시면 다 아실 내용이라 생각됩니다.

이 XML을 서버에 올려놓고 이제 XML을 추가할 수 있도록 "무엇인가" 를 만들어야 겠지요.

뭐 이 "무엇인가" 를 만드는 것은 일도 아닙니다.

<a href="#" onclick="window.external.AddSearchProvider('http://ottd.iruis.net/~onionmen/dnf_item_search.xml')">Add Search Provider Example</a>

위와 같이 window.external.AddSearchProvider() 라는 프로퍼티에 xml위치에 해당하는 인자값 하나만 넣어주면 완성이고, 이 링크를 클릭하면 검색공급자 등록을 할 수 있습니다.

위와 같은 메시지가 뜨면, 공급자 추가를 선택하여 검색공급자를 등록할 수 있습니다.

이제 검색공급자가 추가된 것을 확인하실 수 있습니다.


공급자를 DNF item 으로 변경하고, 검색어를 입력하면 이제 검색된 내용을 볼 수 있게 됩니다.

어때요, 참 쉽죠?

이건 단순한 검색공급자 를 만드는 것이었고, 이제 핵심기능인 비쥬얼서치를 살펴볼까요?

이것또한 별것 없습니다.

<Url type="application/x-suggestions+xml" template="http://ottd.iruis.net/~onionmen/dic_test.xml" /> 

이 부분 기억 하시나요. 여기 들어있는 dic_test.xml 이라는 부분이 바로 비쥬얼서치에 사용될 부분입니다. 지금은 예제로 간단한 xml을 만들었는데, 이부분은 프로그래밍이 들어가야 하는 부분입니다. 검색어에 의해서 관련된 xml이 생성되도록 해야 하지요.

아래 xml은 역전 이라는 검색어를 입력하면 그와 관련된 추천검색어와 비쥬얼서치의 모습을 보여주는 xml 입니다.

<?xml version="1.0" encoding="euc-kr"?>
<SearchSuggestion version="2.0" xmlns="http://opensearch.org/searchsuggest2">
  <Query>역전</Query>
  <Section>
    <Item>
      <Text>역전</Text>
      <Url>http://www.d-fighter.com/?GO=dictionary|item&amp;clickSV=dnf&amp;search_text=역전</Url>
    </Item>
    <Separator title="Finding in DNF" />
    <Item>
      <Text>역전의 월록</Text>
      <Description>거너용 무기</Description>
      <Url>http://www.d-fighter.com/?GO=dictionary|item&amp;TO=&amp;clickSV=dnf&amp;mode=view&amp;search_text=역전&amp;se=&amp;category=&amp;position=1&amp;it_no=31107</Url>
      <Image source="http://img.d-fighter.com/img/item_img/revolver/00037.png" width="28" height="28" />
    </Item>
  </Section>
</SearchSuggestion>


위와 같이 xml을 작성하여 서버에 업로드 하면, 이제 단순한 검색창에서 벗어나 한눈에 검색결과를 볼 수 있게 됩니다.



어때요. 참 쉽죠?

던파 관련 자료는 아래 링크에서 찾으실 수 있습니다.
http://ottd.iruis.net/~onionmen/dnf/


한번 재미있는 분야에 응용해보아요~~~ ^^

자주가는 me2day 의 검색창을 만들어봤습니다.
me2day 계정이 있으신분은 아래 링크로 가셔서 테스트 해보세요.

http://ottd.iruis.net/~onionmen/me2/test.php?me2id=자신의 미투 url 뒷자리
(ex : http://ottd.iruis.net/~onionmen/me2/test.php?me2id=sumanpark )
Posted by onionmen
728x90

블로그에 웹슬라이스를 적용했었습니다.

그리고 제가 자주 사용하는 웹서비스 미투데이(링크)에도 이 기능을 적용 할 수 있을 것 같아 시험삼아 만들어 봤습니다.

아이디만 알면 그사람의 최근 덧글을 가져올 수 있는 일종의 가젯입니다.
이용하시려면 IE8을 설치하시거나, 아니면 일전에 소개해드린 파이어폭스의 확장기능인 Webchunks (다운로드링크) 를 설치하셔야 합니다.

웹슬라이스를 적용하기 위해 HTML을 파싱하는 simple HTML DOM parser(링크) 를 사용했습니다.


DOM parser를 이용해 Comment To Me의 내용만 추출했습니다.

사용자 삽입 이미지

이 곳에 webslices 를 적용시킬 div 태그만 넣으면 끝날 줄 알았는데, 아니더군요. -_-;

사용자 삽입 이미지

링크부분에 http://me2day.net 이라는 부분이 빠져있어서 /eyedamping 이라는 Mr.면도날드님의 아이디만 링크로 연결되어 있었습니다. 그래서 클릭해도 제대로된 링크로 갈 수 없었습니다.

그래서 저 HTML을 다시 파싱하여 링크를 넣었습니다.
사용자 삽입 이미지

사용자 삽입 이미지

제대로 된 링크가 잡혔고, 웹슬라이스를 적용시킬 태그 몇개를 더 넣어주어 완성하였습니다.

사용자 삽입 이미지

파이어폭스에서 모습


사용자 삽입 이미지

IE8에서의 활용 모습

완성!

사용자 삽입 이미지

여기 이렇게 아이디만 바꿔서 webslices 로 등록하면 됩니다!

사용자 삽입 이미지


별도의 OpenAPI를 사용하지 않고도 HTML 포함 41줄 코딩하여 간단하게 최근댓글을 불러올 수 있게 되었어요.
간단한 CSS도 적용해서 좀 더 예쁘게 만들 수도 있어요.

어떄요. 참 쉽죠?



덧1. FF는 클릭 즉시 읽어오기 때문에 덧글 내용을 바로바로 확인할 수 있는데, IE8의 경우는 15분의 수집시간이 있어서 내용을 바로바로 확인할 수 없어서 아쉽습니다!

덧2. PHP5를 지원하고 allow_url_fopen 옵션이 On 으로 되어있는 웹서버가 없어서 외부서버에서 돌릴 수가 없네요. ㅠㅠ

덧3. 조금의 수고를 들여서 RSS로도 만들수 있겠네요.

덧4. 소켓통신을 이용해서 외부에서 접근할 수 있도록 만들었습니다.
주소 : http://ottd.iruis.net/~onionmen/?me2id=
me2id 다음에 자신의 미투데이 주소를 넣으세요.
(예: http://ottd.iruis.net/~onionmen/?me2id=3rdtype)

Posted by onionmen
728x90
webslice 라고 적어놨는데, webslices 군요. 제목 수정했습니다.


언젠가 uxfactory 에서 글을 보고 내 블로그에도 적용시켜 봐야지 했는데, 오늘 회사에서 시간이 잠시 비어 적용해 봤습니다.

IE8에 도입된 새로운 기능 중 하나인 웹슬라이스를 사용할 수 있도록 적용해봤습니다.
어려운 기술이 들어가는 것은 아니고 단지 HTML 태그 두세개만 추가해주면 쉽게 적용 가능하네요.

다음 URL을 가보시면 쉽게 적용시킬 수 있을 것 같습니다.

링크

간단히 요약하자면 다음과 같은 태그를 적용시키고자 하는 부분에 넣어주시면 됩니다.

<div class=”hslice” id=”1”>
  <p class=”entry-title”>item - $66.00</p>
  <div class=”entry-content”>high bidder:buyer1
     적용시킬 태그를 이곳에 넣어주세요.
  </div>
</div>

div나 p 와 같은 태그는 신경안쓰셔도 되고, class 부분에 들어가는 이름만 적용하시면 될 듯 합니다.
그에 맞는 CSS도 함께 적용시켜주시면 한층 이쁘겠죠?

현재 IE8 베타1에서 이 기능을 사용하실 수 있고, FF3에서는  Webchunks (다운로드링크) 라는 이름의 확장기능을 통해 사용하실 수 있습니다. 이 확장기능은 IE8 beta1이 공개되자마자 다음날 바로 FF용 확장기능으로 나와 사람들의 입에 오르내린적이 있습니다. 현재 FF 3.0.1에서 사용가능한 버전은 webchunks 0.13 버전입니다. 위 링크에서 받으세요.

IE8과 부가기능을 설치한 FF 사용자가 제 블로그 사이드바의 최근 댓글에 마우스를 올리시면 손쉽게 추가하실 수 있습니다.

사용자 삽입 이미지

파이어폭스에서의 이미지


사용자 삽입 이미지

요건 IE8에서의 모습.

재미로 적용시켜 봤는데, 추후에 IE8이 보급될 경우 많은 확장성이 있겠네요. ^^

IE의 경우에는 즐겨찾기의 빠른연결에 등록이 가능한데, FF의 경우는 빠른연결 하단에 또다른 Bar 가 생기는점이 아쉽습니다.

그리고 IE는 아직 버그인지 이름을 수정해도 반영이 되지 않는군요. 조만간 Beta2나 정식버전이 나오면 수정될 부분인것 같습니다.

Posted by onionmen
이전버튼 1 이전버튼

블로그 이미지
손을 따뜻하게 만들어 주고 싶은 애인이 있습니다.
onionmen

달력

 « |  » 2024.3
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
DNS Powered by DNSEver.com

최근에 올라온 글

Yesterday
Today
Total