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

prototype_1.5.0_snookca.png
PNG 1024x768 Cheat Sheet

와우 Jonathan Snook씨는 Prototype 1.5.0의 커닝 페이퍼(Cheat Sheet)를 만들었다. 간혹 클래스명이나 메서드명이 기억나지않아 소스를 뒤적거리곤 했는데 이것 한장있으면 끝이다. 이 커닝 페이퍼에는 Prototype 1.5.0의 모든 클래스와 메서드 그리고 매개변수의 인덱스가 연결 순서대로 기록되어있다.(내부적으로만 사용되거나 중복된 코드들은 제외되었다.) PNG 이미지 뿐만 아니라. PDF버전도 제공하고 있으니 필요하면 다운로드하자. 이 것 출력해서 벽에 붙여야겠다.

참고로 Mootools r.83의 커닝 페이퍼도 있다.

Comments

Sortable의 성능 향상과 Prototype 1.5.1 정식판에 최적화 되었다고 합니다. 베타3를 사용하면서 발견한 문제는 구글 그룹스에 보고해 달라고 하네요. 아마도 이번이 마지막 베타버전이 될 것이고 다음주 중에 1.7.1의 정식버전을 릴리즈 하려나 봅니다. 어째 베타1 이후에는 Rails Trac에 체인지로그(CHANGELOG) 업데이트도 없고 내용도 부실한 것이 낌새가 이상하네요. 슬럼프이신가?

다운로드 : http://script.aculo.us/dist/scriptaculous-js-1.7.1_beta3.zip

Comments