Firejune

지금까지 웹상에서 그래프를 그리는 솔루션으로 자바스크립트와 Canvas 태그를 이용해서 파이 그래프, 라인 그래프, 막대 그래프 등을 표현하게 하는 트릭(?)과는 완전히 다른 개념으로 도표를 생성하는 구글 차트(Chart) API입니다. 오직 URL에 파라메터 값만으로 완성된 그래프 이미지를 구글 서버로부터 호출하는 방식입니다. 와우! 정말 놀라운 발상입니다. 활용도면에서는 최고로군요!

URL format

<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=300x150&chl=Fire|June" alt="" />

Required and optional parameters

시간나면 UI를 입힌 실시간 차트 생성기(Chart Generator)를 만들어 봐야겠습니다.

프로젝트 범용으로 사용할 위키기반 사이트가 필요해서 뚝딱 만든 ProjectWiki (aka wiki.firejune)를 오픈합니다. 얼마전에 릴리즈한 Ajax Tracker가 저의 첫 번째 위키 컨텐츠입니다. 위키 도구로는 PHP로 짜여진 WikiWikiWeb 시스템, PmWiki의 최신 버전 2.2.0 beta63을 설치했습니다. 한국 사용자가 별로 없어서 그런지 한글화 된 문서는 눈씻고 찾아봐도 없고 심지어 사용기 조차 찾기 힘들더군요. 결국 노가다 정신으로 삽질을 시작해서 무사히 커스터마이즈까지 완료했습니다. 독특하게도 데이터베이스를 물리지 않고 설치할 수 있으며, 확장성이 우수하여 수백여가지 플러그인(cookbook)과 스킨이 존재합니다. 위키기반 도구가 왜 강력한지 설치하고 사용해 보면서 알게 되었는데요. 우리나라 정서에는 잘 맞지 않는 것 같기도 하지만, 데이터 수집, 확장, 교정 능력이 그 어떤 도구들 보다도 탁월합니다. 특히, 여럿이 협업 관리하는 환경이라면 더욱 큰 빛을 발하는 구조입니다. 커스터마이즈는 rimy님의 다이어리 위키 배포판을 뜯어보면서 많은 정보를 얻을 수 있었습니다. 처음에는 탑메뉴나 사이드메뉴 푸터까지 위키 기반으로 편집해 버리는 기발함에 치를 떨어야 했지만, 이제서야 그룹을 생성하고 내용을 추가하는 것에 조금 익숙해졌습니다. 탑바에는 자바스크립트와 투명 PNG이미지들을 이용해서 배경 색상 변형과 동시에 물결이 치는 듯한 애니메이션도 넣어 보았습니다. 구경오세요~

얼마 전에 소개했던 "자바스크립트와 Ajax로 방문객 마우스 활동 기록하기"에서 아이디어를 얻어 어느 사이트에서나 사용 할 수 있는 마우스 트래킹 프로그램인 AjaxTracker를 만들고 배포합니다. Marcel Oelke씨의 movelogger.js를 참고하여 구축하였으며, 화면 스크롤 이벤트를 추가하고 구조를 조금 변경하였습니다. 서버단 언어는 PHP로 작성하였고 지정된 수 만큼 MySQL에 트래킹 정보를 기록합니다. 늘 그랬듯이 자바스크립트 코드는 Prototype과 Scriptaculous에 기반하고 있으며 PHP 및 MySQL 버전4 이상에서 작동합니다. 데모 페이지에서 직접 체험해 보세요.

기록되는 내용은 마우스 좌표와 클릭 그리고 스크롤 포지션입니다. 클릭 이벤트 기록에는 재생시 실제 이벤트를 발생시키기 위해 클릭된 영역의 링크와 엘리먼트 정보를 포함하여 메모리에 담아둡니다. 이렇게 취합된 데이터를 JSON으로 전송하여 그대로 DB에 집어 넣습니다.(귀찮아서;) 때문에 쿼리가 다소 무겁습니다. 이부분은 조금 더 효율적으로 개선할 예정입니다. install.php를 실행하여 설치 할 수 있으며, DB정보와 최대 기록 수(기본 300건)를 설정해야합니다. 300건을 기준으로 했을 때 DB소모량은 1~2MB입니다. 실제 사이트에 적용하는 방법은 동봉된 demo.php를 참고하시기 바랍니다. 관리자만 재생할 권한을 부여하는 방법은 환경에 따라 다르기 때문에 코드를 수정하는 작업이 불가피합니다. 이 부분은 프로젝트 위키에 별도로 정리하도록 하겠습니다. 모든 문의는 이 포스트에 댓글로 남겨 주시기바랍니다.