도아

"인쇄 기능"에 해당되는 글 2건

텍스트큐브: 인쇄 플러그인

2008/05/27 20:58

Posted by 도아 Posted in " 컴퓨터/텍스트큐브 " ::인쇄 - [읽은 횟수: 2/3/2648]

인쇄 기능을 지원합니다에서 설명한 것처럼 인쇄 플러그인은 필자의 숙원사업(?) 중 하나였다. 그러나 텍스트큐브

의 구조를 잘 모르는 필자로서는 섣부르게 시도하기도 힘든 플러그인이었다. 다행이 텍스트큐브에 사용된 함수를 플러그인에서 사용할 수 있다는 것을 알게된 덕에 의외로 쉽게 인쇄 플러그인을 만들 수 있었다.

미공개 플러그인 중 가장 먼저 만든 플러그인이 Firefox에서도 동작하도록 AnyLink를 적용한 수평분류 플러그인이고 그 다음에 만든 플러그인이 오즈용 최저가 주유소 검색 프로그램을 공개하면서 만든 dp.SyntaxHighlighter 플러그인지만 인쇄 플러그인을 가장 먼저 공개하는 것은 바로 이런 맥락이다. 플러그인을 설치하는 방법은 따로 설명하지 않겠다. 텍스트큐브 를 사용하는 사람이라면 이미 알고 있을 것으로 생각하기 때문이다. 따라서 이 글에서는 환경설정과 스킨 및 Style.css 파일을 만드는 방법에 대해서만 설명하겠다.

내려받기

플러그인은 다음 링크에서 내려받을 수 있다. 내려받은 플러그인을 폴더채 플러그인 폴더(plugins/)에 올리면 된다.

vPrintArticle2.zip

환경설정

보통 플러그인에서는 $blogURL과 $plugURL 변수를 사용할 수 있다. 그러나 가상의 plugin 디렉토리로 호출하는 경우 이 두 개의 변수를 사용할 수 없었다. 따라서 이 항목까지 환경설정에서 설정해 주어야 한다.

관리도구/플러그인/인쇄 버튼 3를 클릭한 뒤 환경설정 링크를 클릭한다.

다음 항목을 설정한다.

블로그 주소	자신의 블로그 주소를 입력한다. 루트 폴더에 텍스트큐브를 설치한 것이 아니라면 설치한 폴더의 주소까지 입력한다. 예를 들어 tc라는 폴더에 텍스트큐브를 설치했다면 블로그 주소는 http://offree.net/tc를 입력해야 한다. 마지막에 /를 입력하지 않도록 주의한다.
플러그인 주소	보통은 기본값을 사용하면 된다. 그러나 플러그인을 vPrintArticle2 폴더가 아닌 다른 폴더에 설치했다면 플러그인 주소에 이 폴더에 대한 경로를 입력하면 된다.
선행 문자	인쇄 기능을 이용하려면 블로그 페이지에 인쇄 링크를 달아야 한다. 이 인쇄링크의 앞 부분에 삽입할 문자를 입력하면 된다. 기본 값은 :: 이다.
후행 문자	선행 문자와 마찬가지로 인쇄 링크 뒷 부분에 출력될 문자이다. 자신이 사용하고 있는 스킨에 맞춰 설정하면 된다.
인쇄 라벨	인쇄 링크의 이름을 입력한다. 기본값은 인쇄이며, 프린트처럼 인쇄 링크임을 표시하는 라벨을 입력하면 된다.

환경 설정이 끝났다면 저장 단추를 클릭해서 플러그인의 환경을 저장한다.

스킨에 치환자 삽입

이제 남은 일은 스킨에 인쇄 링크를 달기 위해 치환자를 삽입하면 된다. 인쇄용 링크 치환자는 [##_print_article_##] 이므로 스킨의 적당한 위치에 이 치환자를 삽입하면 그림처럼 인쇄 링크가 나타난다.

인쇄 플러그인용 스킨

인쇄 플러그인은 자신이 사용하고 있는 스킨과 가장 비슷한 출력 화면을 만들기 위해 skin.html 파일을 사용한다. 아울러 사용되는 치환자는 텍스트큐브에서 사용하는 치환자와 똑 같다. 다만 지원하는 치환자가 별로없다. 따라서 자신만의 인쇄용 스킨을 만들고 싶은 사람은 다음 치환자를 이용해서 해서 인쇄용 스킨을 직접 만들 수 있다. 플러그인에 포함된 인쇄용 스킨은 현재 필자가 1단으로 고처 사용하고 있는 Moving Box(Green)을 인쇄용 스킨으로 수정한 것이다.

치환자 설명

인쇄용 스킨 파일의 예

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta NAME="ROBOTS" CONTENT="NOARCHIVE">
<link title="skinStyle" rel="stylesheet" media="all" type="text/css" href="/plugins/vPrintArticle2/style.css" />
<title>[##_blogger_##] :: [##_page_title_##]</title>
<script type="text/javascript" src="/script/common2.js"></script>
</head>

<body onLoad='window.print(); return false;'>
<div id="wrap">

	<div class="article">
		<div class="article_head">
			<div class="article_title">
				<h2 class="title"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a> by [##_blogger_##]</h2>
				<div class="article_info">
					<span class="date">[##_article_rep_date_##]</span> :: <a href="[##_article_rep_category_link_##]" class="category">[##_article_rep_category_##]</a> <br />
					<a href="[##_article_rep_link_##]">[##_article_rep_link_##]</a>
				</div>
			</div>
			<div class="clear"><img src="/skin/moving_box/images/bg_clear.gif" alt="" /></div>
		</div>

<div class="article_post">
		[##_article_rep_desc_##]
		</div>
	</div>
	<div id="footer">
		<div class="copyright">
			<div class="footer_link">
			Copyright 2004~2008 <A href="[##_blog_link_##]" title="[##_desc_##]">[##_title_##]([##_blog_link_##])</A>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</div>
</body>
</html>

사용하고 있는 플러그인 중 자바스크립트나 스타일쉬트를 이용하는 플러그인이 있다면 <HEAD>와 </HEAD> 사이에 플러그인이 사용하는 자바스크립트를 삽입해야 한다.

플러그인용 스크립트 삽입 예

페이지를 읽자마자 인쇄 창을 띄우고 싶다면 <BODY> 태그를 다음처럼 바꾸어야 한다.

인쇄 창 바로 띄우기

인쇄용 스타일쉬트

인쇄용 스킨에서 스타일쉬트를 사용하고 있다면 마찬가지로 스타일쉬트 역시 만들어 주어야 한다. 필자는 Moving Box(Green)의 스타일쉬트에서 스킨에서 참조하고 있는 부분만 남기고 나머지는 삭제하는 방법으로 스타일쉬트를 만들었다.

인쇄용 스타일쉬트의 예

@font-face {font-family: 우리바탕; src:url(http://offree.com/attachment/gk150000000000.eot);}
@font-face {font-family: 우리새봄; src:url(http://offree.com/attachment/fk040000000000.eot);}

@charset "utf-8";

/* 공통 요소 */
body {margin: 0; padding: 5px; background:/*@background-color*/ /*@*/
										/*@background-image*/ /*@*/
										/*@background-image-repeat*/repeat-x /*@*/
										/*@background-image-position*/0 /*@*/;
										/*@title-height:-62*/0/*@*/; font-size:small; line-height:180%; font-family:우리바탕,돋움;}
a {text-decoration: none; }
a:hover {text-decoration: underline; }
img {border: 0;}
.ib .click img	{vertical-align:baseline !important;}
hr {display: none; }
input {vertical-align: middle; }
ul, ol {margin: 0; padding: 0; list-style: none; }
li, dl, dt, dd {margin: 0; padding: 0; }
h1, h2, h3, h4 ,h5 ,h6 {margin: 0; padding: 0; line-height: 1em}
blockquote {margin-top: 0; margin-bottom: 0; padding: 0px 0 0px 24px; background: url('./images/icon_qoute.gif') no-repeat 0 0px; color: #868686; }
.clear {clear: both; }
.count {font-size: 11px; }
.body {/*@background-color*/ /*@*/
	/*@background-image*/ /*@*/ 
	/*@background-image-repeat*/ /*@*/ 
	/*@background-image-position*/ /*@*/}

/* 포스트 내부 요소 */
.imageblock img { margin:15px 0;}
.location	{line-height: 1.1em}
.article_post ul {padding: 0 15px; list-style-type: disc; }
.article_post ol {padding: 0 15px 0 45px; list-style-type: decimal; }
.article_post blockquote {margin-top: 0; margin-bottom: 0; padding: 10px 0 10px 24px; background: url('./images/icon_qoute.gif') no-repeat 0 0px; color: #868686; }
.article_post blockquote a {color: #868686; }
.article_post .moreless_fold {padding-left: 16px; background: url('./images/btn_more1.gif') no-repeat 0 50%; color: #5d5d5d; }
.article_post .moreless_top {padding-left: 16px; background: url('./images/btn_less1.gif') no-repeat 0 50%; color: #5d5d5d; }
.article_post .moreless_bottom {padding-left: 16px; background: url('./images/btn_less1.gif') no-repeat 0 50%; color: #5d5d5d; }
.article_post h1,
.article_post h2,
.article_post h3,
.article_post h4,
.article_post h5,
.article_post h6 {padding:10px 0; line-height:1.1em;}

/* content */
.separate	{color:#b8b8b8;}
.article	{width:/*@post-width*/700px/*@*/; overflow:hidden; margin-bottom:30px}

.article .article_head	{border-bottom:#d8d8d8 dashed 1px;}
.article_head .article_title	{float:left; width:/*@post-width:-64*/640px/*@*/; margin-left:10px;}
.article_title .title	{color:#678d01; font-size:/*@post-title-font-size*/1.3em/*@*/; font-family:/*@post-title-font-family*/우리새봄,Tahoma, gulim/*@*/; font-weight:bold; line-height:1.1em; letter-spacing:-0.09em; padding:7px 0 5px 0;}
.article_title .title a	{color:/*@post-title-color*/#678d01/*@*/;}
.article_head .article_info	{color:#838382; font-size:0.85em; font-family:우리새봄,Tahoma;}
.article_info a	{color:#838382;}
.article .article_post	{padding:25px 10px 25px 0; color:/*@post-body-color*/#565656/*@*/; font-family:/*@post-body-font-family*/우리바탕, Tahoma, gulim/*@*/; font-size:/*@post-body-font-size*/10pt/*@*/;}
.article .article_post a	{color: blue;}
.article .article_author	{clear:both; padding:20px 0; color:#565656; text-align:right; font-family:우리새봄, Tahoma, gulim, gulim; font-size: 11pt;}

/* footer */
.copyright	{border-top:1px solid #f0f0f0; color:#a6a6a6; font-size:1.2em; text-align: right; padding-right: 10px; width: 700px; font-family: 우리새봄}
.copyright a	{color:#a6a6a6;}
.footer_banner	{float:left; padding:3px 0 0 0; letter-spacing:-1px;}
.footer_banner img	{vertical-align:middle; margin-bottom:8px;}
.footer_link	{float:right; margin-top:12px; font-family:Tahoma;}

/* IE 핵 */
* html .ib	{height:18px;}
*:first-child+html	.ib	{height:18px;}

.article_etc .search {border: solid red 1px}
.hanrss {float: right}

마지막으로 작성된 스타일쉬트를 인쇄에서도 그대로 적용하고 싶다면 스킨에서 스타일쉬트를 지정하면 media 속성을 screen이 아니라 print나 all로 해야 한다.

예

현재 이 플러그인은 단일 사용자 환경에 텍스트큐브를 루트에 설치해서 테스트했다. 다중 사용자 환경과 루트 폴더 이외의 폴더에서의 동작도 염두에 두었지만 시험해 보지 않았기 때문에 잘 동작하는지는 필자도 모르고 있다. 따라서 다른 환경에서 이 플러그인이 잘 동작하지 않는다면 플러그인을 활성화한 뒤 동작하지 않는 페이지를 필자에게 알려 주기 바란다.

다음은 인쇄용 플러그인을 적용한 뒤 출력된 인쇄용 화면이다.

"텍스트큐브" 분류의 관련 글타래

TAG 인쇄, 인쇄 기능, 텍스트큐브, 플러그인

구독 & 책갈피

글이 마음에 드시나요? HanRSS나 구글 리더로 편하게 구독하세요!!! 참고로 고료는 추천으로 받습니다!!!
책갈피

WZD | 구글 | 네이버 | 뉴스2.0 | 다음 | 델리셔스 | 마가린 | 북마커 | 야후 | 한RSS | 정보

컴관련

오늘의글

Comments

흑익 2008/05/27 21:30
인쇄라....어떤 느낌인지 정확하게 감은 안잡히네요.

그래도 있으면 확실히 편할것 같은....

perm. | mod/del. | reply.
- 도아 2008/05/28 21:40
  인쇄 링크를 클릭해 보시면 됩니다.
  
  perm. | mod/del.
비밀방문자 2008/05/28 03:46
관리자만 볼 수 있는 댓글입니다.

perm. | mod/del. | reply.
- 도아 2008/05/28 21:41
  질문은 비밀글로 남기지 마시고 기타의 묻고 답하기를 이용하시기 바랍니다.
  
  링크 옆의 새창열기 아이콘은 제가 배포한 바깥 고리 플러그인을 사용하면 됩니다. 그리고 복사 방지 태그에 관한을 글을 잘 읽어 보시면 해당 태그를 내려받을 수 있는 링크가 있는 것을 확인하실 수 있습니다.
  
  perm. | mod/del.
가별이 2008/05/28 22:46
웹페이지 이런건 영 젬병이라 보면 아 코드구나.. 이렇게만 생각하곤 합니다.

perm. | mod/del. | reply.
- 도아 2008/05/29 09:43
  처음에는 어려워 보여도 보다 보면 비교적 쉬운 것이 웹 코딩입니다. 다만 거의 막일 수준입니다. 디버깅이 힘들어서...
  
  perm. | mod/del.
antisys 2008/05/28 23:27
올리고 보니, 묻고 답하기가 있었더군요.
아무튼 감사합니다. ^^;;

perm. | mod/del. | reply.
- 도아 2008/05/29 09:45
  원래 관련글이 아니면 댓글을 달지 않는 것이 예의입니다. 그래서 보통 질문은 방명록에 많이 하는데 저는 방명록으로 올라온 질문이 많아서 별도의 질답 코너를 두고 있습니다. 그리고 다음부터 질답 코너로 올려 주시면됩니다.
  
  perm. | mod/del.
공상플러스 2008/05/30 13:41
햏자는 티스토리라서..

perm. | mod/del. | reply.
- 도아 2008/05/31 06:52
  TC로 바꾸심이...
  
  perm. | mod/del.
이수현 2008/06/09 21:56
설정을
블로그주소 :http://allsolution.kr/kls8
플러그인 주소 : /plugins/vPrintArticle2
선행 문자 : / 
이렇게 했는데..

선행문자대로 '/ 인쇄' 라고 잘 나옵니다만
링크를 클릭하면 http://www.allsolution.kr/plugin/print/?id=1 라는 링크로 가게 되고...
페이지가 없다라는 말이 나오네요..

어떻게 해야 하나요?

perm. | mod/del. | reply.
- 도아 2008/06/10 09:59
  오늘 수정본을 올리도록 하겠습니다.
  
  perm. | mod/del.
부사리 2008/10/31 10:54
안녕하세요. 좋은 플러그인 감사합니다.
그런데 플러그인설정에서 블러그주소를 http://busari.net/blog 로 설정을 해도

본문 인쇄주소는 "http://www.busari.net/plugin/print/?id=291" 이렇게 설정이 되어
페이지 오류가 발생합니다.

어떻게 해야하나요? 도움 부탁드립니다.

perm. | mod/del. | reply.
- 도아 2008/10/31 11:50
  확인한 뒤 다시 댓글을 달도록 하겠습니다.
  
  perm. | mod/del.
- 부사리 2008/11/01 09:39
  지금보니 바로 위헤 이수현님과 동일 증상이네요.
  확인되시면 댓글 부탁드립니다.
  
  감사합니다.
  
  perm. | mod/del.
- 도아 2008/11/01 10:54
  본문 링크의 파일로 다시 내려받아 사용하시기 바랍니다. 오늘 보니 data로 변수를 지정해야 하는데 date로 지정되서 발생한 버그더군요. 버그 보고 감사합니다.
  
  perm. | mod/del.
부사리 2008/11/01 22:35
도아님 플러그인 수정감사합니다.
수정 후 주소는 http://busari.net/blog/plugin/print/?id=291 로 정상링크되는데
인쇄 클릭하면 새창 열리고 데이터를 못 불러오고 페이지를 찾을 수 없다고 하네요

혹시 제 컴퓨터 문제인가 해서 다른 단말에서 테스트 했는데도 동일하네요..

도야님 글은 http://offree.net/plugin/print/?id=1741 이렇게 접속해도 정상출력되고 프린터 창도 나오네요.

계속 귀찮게 해드려서 죄송합니다.
다시 도움한번 부탁드립니다.

꼭 사용하고 싶습니다.~~~! ^^;

perm. | mod/del. | reply.
- 도아 2008/11/02 06:22
  이 부분은 제가 수정할 수 있는 부분이 아니고 각자 수정해야 할 것 같습니다. 함께 포함된 index.xml 파일을 열고
  
  <listener event="/plugin/print/">printArticle</listener>
  
  을
  
  <listener event="/blog/plugin/print/">printArticle</listener>
  
  로 바꿔 주시기 바랍니다. XML 파일은 환경에 따라 생성할 수 있는 방법이 없군요.
  
  perm. | mod/del.
부사리 2008/11/04 15:30
도아님 도움감사합니다.
그런데 xml 경우처럼 각 블러그 특성마다 약간씩 다른 점이 있는 것인지 제가 부족함이 많은 것인지 블러그에 플러그인 적용하기가 힘드네요. ^^;

busari.net/blog(2단스킨)에도 적용해보고 krcafe.x-y.net/tc(1단스킨,테스트 블러그)에도 적용해 봤는데
두 곳 모두 인쇄버튼 클릭하면 데이터를 못 읽어오네요.

아무튼 매번 도움 감사했습니다.

항상 건강하세요~~~~~~~~~ ^^

perm. | mod/del. | reply.
- 도아 2008/11/05 08:09
  시간이 나는데로 다른 계정에서 확인한 뒤 답글을 올리도록 하겠습니다. 그런데 혹시 사용하는 TC판번호가 어떻게 되는지요?
  
  perm. | mod/del.
- 부사리 2008/11/05 10:24
  TC판번호는 1.7.5와 1.7.6에서 해보았습니다.
  
  항상 건강하세요 ^^
  
  perm. | mod/del.
- 부사리 2008/11/05 10:25
  TC 판번호는 1.7.5와 1.7.6에서 해보았습니다.
  
  감사합니다. 항상건강하세요~~~ ^^
  
  perm. | mod/del.
- 도아 2008/11/05 11:13
  무료 계정을 신청했으므로 계정이 나오면 시험해 보고 알려 드리겠습니다.
  
  perm. | mod/del.
- 부사리 2008/11/06 18:31
  정말 감사합니다.
  
  perm. | mod/del.

"인쇄 기능"에 해당되는 글 2건

텍스트큐브: 인쇄 플러그인

"텍스트큐브" 분류의 관련 글타래

Trackback

Comments

쥐박이가 아니라면 소통하세요!!!

category

archive

post

reply

trackback

link