Javascriptでラベル作り
大量に資料を印刷したとき、それをファイルに綴じるわけだが、いちいち表紙とかラベルを作るのが結構大変だったりする。
普通はテプラか何かを使って簡単にラベルを作ってしまえばいいのだが、なんだかもったいない気がするので、ラベルを紙に印刷して、それを切って糊で貼り付けてしまおうと思う。
そこで作ってみたのが以下のHTML。以下のHTMLをファイルに保存して、ブラウザで開いてデータ入力、印刷すればそれっぽいものができると思います。いちいちWordとかと格闘する必要がありません。このままだと紙のスペースがかなり余るので適時ソースを書き換えて使ってください。FireFox 1.0.4でのみ動作確認。
<html>
<head>
<style type="text/css">
<!--
div {
width : 9cm;
background-color : #ffffff;
padding : 2px;
border : thin #000000 solid;
}
@media print {
form { display : none; }
input { display : none; }
}
-->
</style>
<script type="text/javascript">
<!--
function setLabel() {
var obj = document.getElementsByTagName("div");
for ( i = 0; i < obj.length; i++ ) {
obj[i].style.width = document.getElementById("LWidth").value;
obj[i].style.backgroundColor = document.getElementById("LBackColor").value;
obj[i].style.padding = document.getElementById("LPaddingV").value
+ " " + document.getElementById("LPaddingH").value;
}
}
function setLabelTitle(t,i) {
var obj = document.getElementsByTagName("div");
obj[i].firstChild.nodeValue = t;
}
-->
</script>
</head>
<body>
<form>
<table>
<tr>
<th colspan="2">JavaScript ラベルクリエータ</td>
</tr>
<tr>
<td>ラベル幅 :</td>
<td><input type="textbox" id="LWidth" value="9cm" onChange="setLabel()" /></td>
</tr>
<tr>
<td>背景色 :</td>
<td><input type="textbox" id="LBackColor" value="#ffffff" onChange="setLabel()" /></td>
</tr>
<tr>
<td>パディング横 :</td>
<td><input type="textbox" id="LPaddingH" value="2px" onChange="setLabel()" /></td>
</tr>
<tr>
<td>パディング縦 :</td>
<td><input type="textbox" id="LPaddingV" value="2px" onChange="setLabel()" />
</tr>
</table>
</form>
<p>
<input type="textbox" onChange="setLabelTitle(this.value,0)" /></td>
<div> </div>
</p>
<p>
<input type="textbox" onChange="setLabelTitle(this.value,1)" /></td>
<div> </div>
</p>
<p>
<input type="textbox" onChange="setLabelTitle(this.value,2)" /></td>
<div> </div>
</p>
<p>
<input type="textbox" onChange="setLabelTitle(this.value,3)" /></td>
<div> </div>
</p>
<p>
<input type="textbox" onChange="setLabelTitle(this.value,4)" /></td>
<div> </div>
</p>
</body>
</html>どうやら、HTMLを引用したときに、コメントが無視されてしまうことがあるようで、使用しているCSSやJavaScriptが表示されないときがあるようです。そのときは記事ごとの表示にすれば見られるときがあるようです。
