reznoa의 동굴폐인 놀이터

전에 Tistory에서 쓸 수 없냐는 질문이 들어온데 이어, 얼마전에는 개인 홈페이지에서 쓸 수 없냐는 질문이 들어왔다.

Tistory 스킨을 직접 수정해서 쓰는 방법은 이미 BLUE'nLIVE's diary++에서 Cumulus for TiStory를 공개하면서 잘 설명한거가 있어서 그걸 참조하라고했지만, 일반 테터툴즈 기반이 아닌데서 쓰는 방법은 약간 설명이 필요하겠다 싶어 이 글을 작성한다.

tc-cumulus와 tagnetic-poetry는 같은 사람이 만든 비슷한 플래시인만큼 코드 역시 비슷하다. 때문에 tc-cumulus를 쓰고있는 사이트에서 tagnetic-poetry를 쓰는것은 플래시 파일만 바꾸면 될만큼 간단하다.

각설하고, 플래시는 외부에서 값을 입력하기 위한 몇가지 방법을 제공하는데, tc-cumulus에서는 미리 정해진 이름의 파일을 이용하는것과 변수를 설정하는 방법을 제공한다.

파일을 이용하는 방법

다음과 같은 형식으로 tagcloud.xml 파일을 만들어서 플래시 파일과 같은곳에 놓아두면 알아서 읽어들인다.

<tags>
<a href="http://reznoa.wo.tc/blog/tag/tc-cumulus" title="12 topics" rel="tag" style="font-size: 22pt;">tc-cumulus</a>
<a href="http://reznoa.wo.tc/blog/tag/tagnetic-poetry" title="6 topics" rel="tag" style="font-size: 16pt;">tagnetic-poetry</a>
</tags>

파일 이름은 xml이지만 <a> 링크만 죽- 나열된 html이라고 생각하면 된다. <tags> 태그로 감싸인다는 것만 주의할 것.

변수를 설정하는 방법

플러그인에서는 swfobject.js라는놈을 사용하고 있는데, 간단하게 설명하자면 플래시를 쉽게 쓸 수 있도록 해주는 놈이다. 이놈을 안쓰고 직접 <object>를 이용할 수도 있겠지만 귀찮으니까 그건 설명 안할란다; ^주1

플러그인(tc-cumulus 기준)에서 사용하고 있는 js 스크립트는 대략 다음과 같다.

<script type="text/javascript" src="swfobject.js"></script>
<div id="tagcloud">
    <p>TC-Cumulus by <a href="http://reznoa.wo.tc">reznoa</a> requires Flash Player 9 or better.</p>
</div>
<script type="text/javascript">
    var tagvars = '<a href="http://reznoa.wo.tc/blog/tag/tc-cumulus" title="12 topics" rel="tag" style="font-size: 22pt;">tc-cumulus</a>'
                + '<a href="http://reznoa.wo.tc/blog/tag/tagnetic-poetry" title="6 topics" rel="tag" style="font-size: 16pt;">tagnetic-poetry</a>';

    var tcobj = new SWFObject("tagcloud.swf", "tagcloudflash", "300", "300", "9", "#333333");
    tcobj.addParam("allowScriptAccess", "always");
    tcobj.addVariable("tcolor", "0xffffff");
    tcobj.addVariable("tcolor2", "0x999999");
    tcobj.addVariable("hicolor", "0x3399ff");
    tcobj.addVariable("tspeed", "100");
    tcobj.addVariable("distr", "true");
    tcobj.addVariable("mode", "tags");
    tcobj.addVariable("useback", "true");
    tcobj.addVariable("tagcloud", encodeURI("<tags>" + tagvars +"</tags>"));
    tcobj.write("tagcloud");
</script>

이 js 스크립트는 그냥 html로 작성해도 잘 돌아가는 것으로, 태그 구름에 표시될 태그 내용이 프로그램적으로 바껴야 할 필요만 없다면 그냥 하드코딩해도 상관없다.

다음은 위 코드를 사용한 결과 화면이다.

1. 참고로 플러그인에서는 swfobject.js를 이용하는 방법 외에도 compatibility mode라고 해서 <object>를 이용해서 플래시를 출력할 수도 있게 되어있다.

(0) (0)