Rev. 2.73

TypeShow goes here.

TypeShow는 자신의 서버에 간단하게 설치하여 사용할 수 있는 글꼴 테스트 위젯입니다. 미리 등록된 글꼴을 PNG 포멧 이미지로 변환하여 출력하는 기능으로 지원하는 글꼴은 트루타입 폰트(PS/CFF)이며, 한국어도 무난히 출력해냅니다. 매우 잘 구성된 완성도 높은 관리자 페이지를 제공하여 폰트를 추가하거나 테마 및 기본 문구 등을 세세하게 설정할 수 있으며, 원격 업데이트 기능까지 갖추고 있습니다. jQuery 기반의 플러그인으로 구성되어 아래와 같은 코드를 사용하여 웹사이트에 추가합니다.

<link type="text/css" rel="stylesheet" media="screen" href="/ts/css/typeshow.css" />
<script type="text/javascript" src="/ts/js/jquery.js"></script>
<script type="text/javascript" src="/ts/js/jquery.typeshow.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#typeshow").typeshow({
		"folder" : "/ts"
	});
});
</script>

TypeShow 설치시 시스템 요구 사항은 다음과 같습니다.

  • PHP 5.2 or higher
  • GD 2.0 + Library
  • FreeType 2.0 support
  • PNG support

설치는 매우 간단하며, 다음과 같은 절차로 설치할 수 있습니다.

  • "Download"를 클릭하여 "typeshow.installer.zip"를 다운로드하고 압축을 푼다. 서버에 디렉토리(예 "ts")를 생성한 후(권한 777) "install.php"를 업로드한다.
  • 업로드한 경로로 "yourdomain.com/ts/install.php"로 이동하고 설치한다. 설치가 완료되면 "ts"의 퍼미션을 변경합니다.

더욱 자세한 내용은 Getting Started 문서를 참조하십시오.

위에 나타난 위젯은 이곳에 실재로 설치된 것입니다. 무료로 공개된 폰트인 나눔 글꼴들을 설정했으며, 한글이 출력 되도록 기본설정을 변경한 것입니다. 그리고 이 블로그는 Prototype.js를 사용하기 때문에 jQuery용 플러그인을 Prototype 클래스로 컨버전하여 적용하였습니다. TypeShow는 단순히 폰트 테스트에 목적을 둔 것만은 아닙니다. 일종의 폰트 API이며 CSS3에 공식으로 도입된 웹폰트의 크로스-브라우징 목적으로도 응용할 수 있겠습니다.

Comments

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 복합 압축 기능 지원)

Comments

최근 파이어폭스(3.6.3)에서 HTML5 Video 요소에 삽입된 ogv 포멧 동영상이 재생되지 않는 문제가 있어 삽질을 하다가 알아낸 사실입니다. 이 문제는 서버의 응답 헤더를 설정해서 해결할 수 있더군요. 예전에는 chunk로 응답해도 잘만 나오던 녀석이 이제는 Partial Content로 응답해 주어야 합니다. 아래는 PHP로 작성된 헤더 설정 코드입니다.

<?php
  $file = basename($_GET['file']);
  $range = 0;
  $size = filesize($file);
  $maxSpeed = 512;

  header('Keep-Alive: timeout=2, max=99');
  header('Connection: Keep-Alive');
  header('Content-Type: video/ogg'); 
  header("Accept-Ranges: bytes");
  if (isset($_SERVER['HTTP_RANGE'])) {
    list($a, $range) = explode("=", $_SERVER['HTTP_RANGE']);
    str_replace($range, "-", $range);
    $size2 = $size - 1;
    $new_length = $size - $range;
    header("HTTP/1.1 206 Partial Content");
    header("Content-Length: $new_length");
    header("Content-Range: bytes $range$size2/$size");
  } else {
    $size2 = $size - 1;
    header("Content-Range: bytes 0-$size2/$size");
    header("Content-Length: ".$size);
  }

  if ($size == 0 ) die('Zero byte file! Aborting download');
  set_magic_quotes_runtime(0); 
  $fp = fopen("$file", "rb");

  fseek($fp, $range);

  while(!feof($fp) and (connection_status() == 0)) {
    set_time_limit(0);
    print(fread($fp, 1024 * $maxSpeed));
    flush();
    ob_flush();
    sleep(1);
  }

  fclose($fp);
?>

Comments