JS Bin은 오픈소스 기반의 자바스크립트 협업 도구입니다. PHP로 만들어진 녀석이라 설치를 시도했습니다만, 구글의 Closure Compiler(JAVA)를 이용한 빌드 과정이 포함되어 있어서 걍 안쓰고 말았더랬습니다. 일반적인 웹 호스팅 서비스에서는 자바 서블릿을 실행할 수 없기 때문입니다. A.J님과 boxersb님이 설치하는 모습을 보고 "이거 서버 시스템 스킬을 익혀야 하나..."하는 생각을 하며 마냥 부러워만 하다가 꼼수가 떠올라 우회할 수 있는 몇가지 방법을 시도하여 성공했고 그 과정을 기록합니다.
1. github로 부터 소스를 내려받습니다.
2. 동봉된 sql 파일들을 DB에 등록합니다.
3. 동봉된 phpMake 파일을 phpMake.php로 이름을 변경하고 마지막 부분을 다음과 같이 편집합니다.
변경 전:
...
// google compile in to jsbin.VERSION.js
echo "Google compiler compressing...\n";
system ('java -jar "./lib/compiler.jar" --js="' . SPROCKETIZED . '" --js_output_file="' . PRODUCTION . '" --warning_level=QUIET');
unlink(SPROCKETIZED);
echo "Compressed: " . PRODUCTION . "\nFile size: " . filesize(PRODUCTION) . " bytes.\n";
?>
변경 후:
...
// google compile in to jsbin.VERSION.js
echo "Google compiler compressing...\n";
$ch = curl_init("http://closure-compiler.appspot.com/compile");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, "output_info=warnings&output_info=errors&output_info=statistics&output_info=compiled_code&output_format=json&compilation_level=SIMPLE_OPTIMIZATIONS&js_code=".urlencode(file_get_contents(SPROCKETIZED)));
$output = json_decode(curl_exec($ch));
curl_close($ch);
if ($output->compiledCode) {
file_put_contents(PRODUCTION, $output->compiledCode, LOCK_EX);
echo "Compressed: " . PRODUCTION . "\nFile size: " . filesize(PRODUCTION) . " bytes.\n";
} else {
echo "Compile error!";
}
unlink(SPROCKETIZED);
?>
4. jsbin 폴더를 웹 서버에 업로드합니다.
5. 브라우저의 주소창에서 phpMake.php를 호출합니다.
6. 설치된 경로에서 작동여부를 확인합니다.
서버에서 자바 서블릿을 실행하는 부분을 구글에서 제공하는 Closure Compiler의 오픈 API를 사용하는 방식으로 변경한 것입니다. 결국 스크립트를 빌드하는 과정 때문에 설치를 못하고 있었던 것입니다. 더 쉬운 방법으로는 jsbin.com에서 이미 빌드되어 서비스 되고있는 /js/2.x.x/jsbin.js 파일을 저장하여 정적으로 호출해도 해결되는 문제인 것입니다. 더욱 자세한 설치 방법은 위 두 분의 포스팅을 참고하면 되겠습니다. 추가적으로 나름 한글화를 시도했으며, 루트에 설치하지 않아도 되도록 소스를 전반적으로 수정했습니다. 계정 인증으로 보안하고, 실제 서버에 있는 자바스크립트 리소스를 호출하여 편집할 수 있도록 손보면 온라인 에디터로도 손색이 없겠더군요. 이미 누군가 하고 있겠죠? 참 오랜만에 포스팅합니다. 개인사정으로 한동안 방치하게 될지도 모르겠습니다.
Customized:
- 소스 탐색 기능 추가
- Format(html, javascript) 도구 추가
- Compress 도구(jsmin, cssmin, closure-compiler) 추가
- Javascript Bookmarklet 도구 추가
- 트위터 계정 연동
- 계정단위 리비전 생성 기능 추가
- 계정단위 리비전 삭제 기능 추가
- 계정단위 편집 가능여부 확인
- 관리자 환경 추가
- 미리보기 상태 유지
- 리비전 이동 도구 추가
- 레코드 되지 않은 필드 구분 오류 출력
- 아이폰 화면 최적화
- URL 변경 도구 추가
- CSS 필드 추가
- CSS Format 도구 추가
- 필드 단위 Format 기능 추가(현재 포커스 된 창)
- 필드 단위 Compress 기능 추가(현재 포커스 된 창)
- HTML Compress 기능 추가(css, js 복합 압축 기능 지원)
자바스크립트 협업 도구 JS Bin 설치하기 - Firejune
