Rev. 2.73

얼마 전 whos.amung.us를 알게되어 설치하였습니다. 의외로 흥미로운 블로그 위젯이더군요. 이 위젯은 사용자의 어떠한 요구도 없이 간단한 코드의 복사와 붙이기만으로 자신의 블로그에 현재 접속중인 사용자가 어떤 글을 조회하고 있는지 모니터링 할 수 있게 해 줍니다. 여담입니다만, 이것을 만드신 Tom씨와 Chris씨는 MySpace와 연동하는 또다른 소셜 네트워크 서비스를 모델로 잡으셨나 봅니다. 음... 아무튼, 세세한 설치방법까지 알려드리면 마음이 상하실 듯 하여 그냥 넘어 가겠습니다.

단순히 카운트 이미지가 출력되는 것에 흡족하지 못해 굳이 블로그를 떠나지 않고도 현재 접속자 및 인기 글 목록 등을 확인하게 해 주는 위젯을 만들었습니다. 이름하여 "whos.amung.us Widget AjaxExtention"입니다. 태터툴즈 클래식의 XML 파서를 살짝 손봐서 whos.amung.us의 API와 연동되도록 하고 Ajax와 JSON을 이용하여 서버와 통신합니다. 우측 상단에 작은 아이콘을 클릭하면 이해가 빠르겠습니다. 늘 그랬듯이 Prototype.jsScriptaculous(effect.js, dragdrop.js)를 기반으로 제작되었으며, 최대한 커스터마이즈 없이 사용할 수 있도록..., 구상만 했습니다;;

widget.jpg

기능 :

- 키값 및 타입 자동 검출
- 카운트 이미지 실시간 갱신
- 유저, 인기 목록 실시간 갱신(활성화 필요)
- URI 및 메시지 한글화
- 팬시 다이얼로그 적용
- 파랑, 빨강, 검정 스킨 설정가능
- 애니메이션 토글
- 위젯박스 드래그 가능
- 위젯박스 리사이즈 가능(좌우, 선택기능)
- IE6, IE7, FF1.5, FF2.0, Opera9.x 지원(테스팅 완료)

다운로드:

http://firejune.com/javascripts/whosamungus.js (자바스크립트 파일)
http://firejune.com/stylesheets/dialog.css (스타일시트 파일)
http://firejune.com/addon/whosamungus.phps (PHP 파일)
dialog2.zip(이미지 파일)

설치방법:

1. 다운로드한 파일을 적절한 곳에 업로드하고 인클루드한다.
2. php파일의 경로는 기본으로 /ajax 폴더로 설정되어 있다.(변경시 js파일 수정 필요)
3. 코드 수정 : 기존에 추가했던 whos.amung.us 링크에 onclick 이벤트를 추가한다.

수정전 :

<a href="http://whos.amung.us/show/ydlkufli">
  <img src="http://whos.amung.us/widget/ydlkufli" alt="who's online" width="81" height="29" border="0" />
</a>

수정후 :

<a href="http://whos.amung.us/show/ydlkufli" onclick="Whosamungus.toggle(); return false;">
  <img src="http://whos.amung.us/widget/ydlkufli" alt="who's online" width="81" height="29" border="0" />
</a>

4. 커스터마이즈: whosamungus.js 파일을 열어 this.options의 주석을 참조하여 환경을 설정한다. 업데이트 주기, 위젯의 너비, 위치, 스킨, 초기 화면 등을 설정할 수있다. 건드리지 않아도 무방함. 단, key값과 img태그의 id를 심어 놓으면 자동 검출과정이 생략되어 눈꼽만큼의 성능 향상이 예상된다.

사실, 업무시간에 농땡이 치면서 재미삼아 만든녀석이라 적잖은 버그가 있을 것으로 생각됩니다. 혹시라도 리포트 주시면 족족 업데이트하도록 하겠습니다. 참고로 자매품인 include.jsextensions.js(라이브러리 확장)를 함께 사용하시면 더욱 좋습니다.(없으면 안돌아 갈지도...)

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar