지난 7월 3일(토) 강남교보타워에서 있었던 RIA 맥잡기 세번째 세미나 - ColdFusion Session 발표자료 및 예제입니다. 열이아빠 이준하님의 도움으로 부족한 제가 ColdFusion에 대한 발표를 했는데요. 시간을 너무 소비해서 준비해간 자료의 대부분의 예제를 자세히 소개를 못했습니다. 욕심이 너무 앞섰나 봅니다. ^^; 이후 열이아빠님 세션은 그냥 시간부족이 아니셨는지...

초창기 이후 끊어지다시피한 ColdFusion에대한 명맥을 잇는것 같아 나름 보람도 있었고, 당시 드리지 못한 예제나 작동원리 등을 직접 경험해보시라고 부랴부랴 서버설치하고, 예제를 담았습니다. 한시적으로 운영되겠지만 소스를 받아서 로컬에서 테스트 바라며, 대부분이 이미 제 블로그에서 소개된 자료이니 관련된 설명은 블로그를 참조하시면 도움되리라 봅니다. 기초적 질문이던, 다양한 관심과 궁금증은 제 블로그나, 이메일, 또는 Open ColdFusion Cafe(http://cafe.naver.com/opencfml.cafe)로 문의해주시면 도움드리겠습니다.

발표자료 : PDF다운로드

발표예제 및 소스코드 다운로드

얼마전 ColdFusion 9에서 PDF파일이나 PPT파일에서 image파일을 뽑아내는 작업을 하더차에 Flex로 만들어진 웹문서뷰어(Flash Paper와 비슷한)를 보았습니다. 이 문서뷰어는 사용자가 PDF파일을 업로드하면 쉽게 SWF기반으로 문서뷰어에 각각의 페이지에 맞게 SWF로 변환하여 내용를 보여줍니다.

그런데 이 툴의 핵심기능으로 쓰인 것이 바로 swftools입니다. swftools는 여러가지 SWF파일에 대한 작업을 command line에서 처리할 수 있는 S/W인데요. Ubuntu 9.X에서는 기본적으로 설치되고 이하버전에서는 sudo apt-get install swftools 의 명령으로 쉽게 설치할 수 있습니다. 물론 CentOS등에서도 이용할 수 있고 Windows에서도 사용가능합니다.

가장 흥미로운 것은 최근 지돌스타님께서 열심히 활동중인 Powerfl의 모델인 일본의 Wonderfl과 같이 웹상의 Texarea에서 사용자가 Actionscript를 작성하거나 또는 미리 작성된 as파일을 서버상에 업로드하면 서버에서 SWF로 컴파일이 가능한 as3compiler가 내장되어 있다는 겁니다. 물론 PDF를 SWF로 변환하는 pdf2swf나 JPEG를 SWF변환하는 jpg2swf 등의 명령어도 있고 무엇보다 swfextract와 같이 swf안의 jpg, png, mp3 등을 추출해 내는 명령어도 있습니다.

Ubuntu에서는 /usr/bin에 해당명령 쉘이 존재하므로 쉘상의 아무곳에서나 다음과 같이 호출하면 됩니다. 가령, SWF파일에서 이미지 파일 등을 추출할때는 다음과 같이 먼저 SWF파일의 정보를 확인한 다음 내장 이미지의 ID값으로 추출이 가능합니다. 만일 embed_image.swf라는 파일안에 어떤 이미지 파일이 있는지 ID값을 알아내려면 다음과 같이 명령합니다.

sudo swfextract embed_image.swf

위와 같이 명령하면 아래와 같이 jpg파일 1개와 png파일2개(실은 gif파일이 1개 있지만 gif파일은 png로 인식함)이 있다는 정보를 보여줍니다. 이때 jpg파일만 추출하고자 한다면 ID값이 1이니까 다음과 같이 명령하면 같은 경로안에 jpg파일을 추출해 줍니다. 예제는  embed_image.cfm 참조

sudo swfextract embed_image.swf -j 1 -o 1.jpg

가령 as3comiler를 이용하여 as3compile.as파일을 동적으로 컴파일하면 동일한 경로에 swf파일을 생성할 수 있습니다. 물론 보안상의 문제점은 어느 정도 고려해야 할 것 입니다.

sudo a3compile as3compile.as -X 400 -Y 400 -oas3compile.swf

즉, as3compile.as를 as3compile.swf파일로 컴파일하는데 가로세로사이즈를 400으로 한다는 이야기 입니다.

자, 여기까지는 Shell상태에서 실제 서버나 PC에 command환경에서의 작업입니다. 그럼 웹에서 동적으로 사용자의 입력을 받아 SWF로 컴파일하려면 PHP등에서 Shell을 직접실행하면 됩니다. ColdFusion에서는 <cfexecute>태그란것이 있어서 쉽게 Linux/Windows의 Shell을 실행시키고 그 결과를 저장하거나 리턴받을 수 있습니다. 가령 ColdFusion이 깔려 있는 WindowsXP에서 네트워크모니터링 툴인 netstat.exe를 실행한 후 그 내용을 txt파일로 D:\에 저장하려면 다음과 같은 한줄이면 됩니다.

<cfexecute name = "C:\Windows\System32\netstat.exe"
   arguments = "-e" 
   outputFile = "C:\Temp\output.txt"
   timeout = "1">
</cfexecute>

따라서 <cfexecute>를 이용해서 동적으로 브라우저에서 as파일을 swf파일로 컴파일하려면 다음과 같은 cfm문서를 만들어 호출하면 됩니다.

<cfexecute name="as3compile"
  arguments="/home/test/sample.as -X 400 -Y 400 -o /home/test/sample.swf" 
  timeOut="60"> 
</cfexecute>

간단하게 위와같은 예제를 보려면 as3compile.cfm 참조하세요. 즉, as파일을 실시간으로 swf으로 컴파일하고 그 결과를 브라우저에 삽입하여 보여주고 있습니다. 이를 이용하면 쉽게 wonderfl과 같은 실시간 웹swf생성기를 만들 수 있지 않을까요?

다만, swftools의 as3compile는 Adobe의 Compiler와 약간 다르게 컴파일 된다고 합니다. 다만, Wonderfl에서 사용한 minibuilder의 JetMBCompiler를 이용하면 보다 정교하게 Flex를 컴파일할 수 있지 않을까 생각합니다. 물론 가능하면 textarea에서 as파일을 직접 작성하고 form으로 전송할때 compile해줘도 될것 같습니다. 저도 연구를 더 해봐야 겠지만.. 아뭏튼 신기하고도 재미있는 오픈소스들이 널려 있습니다.

가끔, 동적으로 Flash Movie를 화면에 출력해야 하는 경우가 있는데, Flash movie의 가로/세로 픽셀길이가 무비들마다 다른 경우 미리 디자이너와 플래시무비의 갯수, 각각의 무비의 길이등을 정의하여 배열(Array) 또는 목록(List)으로 정의해야만 정확하게 원본 사이즈로 보이게 되는데, 실제로 이런 경우가 많이 있습니다.

가령, 원본무비의 가로/세로사이즈가 600*400인데 800*600으로 사이즈를 강제로 지정하면 무비의 오브젝트들의 모양이 변하기 마련입니다. 동적으로 swf파일의 실제 원본 제작시의 가로/세로 사이즈를 알아내기 위해 ColdFusion에서는 어떻게 해야 할까요. JavaSWF2 프로젝트에서 파생된 Flash Inspector라는 ColdFusion component를 이용하면 쉽게 알아낼 수 있습니다. 공개된 콤포넌트이기 때문에 마음대로 가져다 써도 됩니다.

예로 실제 가로/세로사이즈가 450px, 300px인 flash_inspector.swf라는 무비가 있다고 합시다. 이 무비의 실제 사이즈를 구하는 FlashInspector.cfc를 다음과 같이 호출하여 실제 무비의 가로/세로값을 취득합니다. 물론 HTML코드상에서는 원본 사이즈를 무시한채 다른 가로/세로사이즈를 지정할 수 있지만 FlashInspector.cfc를 이용하여 원본사이즈를 취득하면 쉽게 플래시 무비 원본의 크기를 알 수 있습니다.

Sample View

Source Code Download

Sample Code

<cfset localFile = ExpandPath("sample.swf")>
<cfset flashInspector = CreateObject("component", "FlashInspector").init(#localFile#)>

<cfset originWidth = flashInspector.getMaxX() />
<cfset originHeight = flashInspector.getMaxY() />

<cfoutput>#originWidth#, #originHeight#</cfoutput>

오늘 네이버의 플래시액션스크립트 카페에서 보다 자세한 기사를 보고서야 알게된 사실입니다만, 애플이 플래시에서 컴파일된 아이폰 어플리케이션의 등록을 사실상 거부한 것 같습니다. 제가 구독하고있는 몇몇 해외블로그에서도 나온 이야기인데 늦은 만우절 농담쯤 여기고 자세히 보지 않았는데 결국은 애플이 끝까지 플래시를 거부하는 것 같군요.

사실 웹이외의 시장에서까지 비대해져가는 플래시가 저의 개인적인 생각에는 불만입니다만, 한편으로는 애플의 처사도 딱히 좋은 소리 들을 입장은 아니군요. 대놓고 플래시는 안돼! 한 것은 아니지만 Objective-C, C, C++ 또는 Safari Webkit엔진에서 구동되는 JavaScript이외의 언어 또는 컴파일러에서 나온 결과물은 등록을 안해주겠다는 것이 골자인데, 결국은 Flex로 개발한다는 Elips Studio나, .net 등으로 개발하는 Mono touch 등은 Flash CS5와 같이 거부될 것이 확실해 보이고, 다만 Titanium 등 Javascript + HTML조합의 개발도구 및 컴파일러는 가능할지도 모르겠네요. 문제는 이런 조합으로는 아이폰의 핵심API에 접근이 어렵다는 것이 문제입니다. 이런 클라이언트측 언어로는 아이폰의 카메라나 디스크를 다룰 수 없을 테니까요.

그나저나 4월12일 CS5발표를 앞두고 있는 Adobe의 입장에서는 정말 섭섭한 처사가 아닐까 생각합니다.

참조글 : http://daringfireball.net/2010/04/iphone_agreement_bans_flash_compiler

네이버에서는 Flex로 구현된 이미지편집기인 PhotoEditor를 제공하고 있습니다. 최근의 기업용 Flex어플리케이션이 아닌 일반 웹용의 Flex 어플리케이션은 다양한 API를 제공하여 확장가능한 구조로 개방되어 개발되고 있는데 네이버의 포토에디터도 마찬가지 입니다.

PhotoEditor의 API는 URL을 통해 GET/POST/BROWSER방식의 데이터 송수신을 담당하는데, 기본적인 API기능은 사용자PC의 이미지파일 편집 또는 원격지의 이미지를 로드하여 편집. 편집한 이미지를 로컬 또는 원격지의 서버에 Export하기 등인데, 이때 Export될때 이미지데이터를 ColdFusion의 <CFIMAGE>태그를 이용하여 수신하면 복잡하게 바이너리데이터로 변환하거나 하는 작업이 필요하지 않습니다.  간단하게 DB를 이용하지 않고, 자신의 로컬의 이미지를 네이버의 PhotoEditor에 업로드하여, 편집한 후 편집이 끝난 이미지 데이터를 자신의 홈페이지내로 다운로드 받아 저장해 봅시다. 가칭 CFPhotoEditor라고 칭했습니다. 네이버의 PhotoEditor는 비상업적 용도로만 사용이 허가되어 있습니다.

네이버의 PhotoEditor API설명서를 가지고도 충분히 비슷한 어플을 만들 수 있지만 이 경우 편집이 완료된 이미지는 네이버서버에 저장되어 있다는 문제가 있습니다. 만일 네이버가 사진을 삭제해 버리거나 하는 경우 정상적으로 사진을 볼 수 없겠죠. 그래서 단순히 에디터만 이용하고 원본과 편집본의 이미지 데이터는 내 로컬PC 또는 자신의 홈페이지(원격지) 계정에 저장해 봅시다. 먼저 소스코드 다운로드하여 index.cfm파일를 보시길 바랍니다.

Source Download

Demo View : http://www.cfapplication.net/cfphotoeditor/ 

네이버의 PhotoEditor에서 한가지 아쉬운점은 원본의 이미지명은 편집하단 왼쪽에 표시를 해주면서 편집이 끝나 아웃풋하는 파일명을 원격지에 저장하려고 할때 원본파일명을 아웃풋해주는 API가 없는 것이 좀 아쉽습니다. 강제로 이미지명을 지정하게 되는데 이 경우 다중사용자가 접속해서 편집하는 경우 편집한 이미지가 뒤바뀌어 덮어씌어지는 문제가 발생하게 됩니다. 그래서 ColdFusion에서 CreateUUID()함수를 이용해서 사용자가 접속할 때마다 35자리의 특수한 유일키값을 생성해서 이미지명으로 아웃풋해주어 중복을 피했습니다만, 이 경우도 이미지파일명이 알 수 없는 파이명으로 바뀐다는 단점이 있습니다. 첨부파일 소스 코드와 주석을 살펴보시길 바랍니다.

예전에 제 블로그에서 소개한바 있던 가로가 길거나 세로가 긴 이미지여도 정확한 정상비율로 정사각형 이미지 리사이즈에 대한 사용자정의함수를 이곳에서 UDF(User Difined Function : 사용자정의함수)가 아닌 단순 CFML코드로 사용했습니다. 사실 이 부분을 제외한 나머지는 너무나 쉬운 CFML입문자 수준의 코드이므로 이해에 별 어려움은 없을 것으로 생각됩니다.