html + css で年賀状の宛名書き

はじめに

Ubuntuの年賀状の宛名書きが毎年の悩みだった。
Adobe AIRを入れれば年賀状ソフト使えるらしいが、Linux用は開発が終わったらしく、WindowsAdobe AIRを入れるためにはWineを入れないといけないとか…、面倒過ぎる。

LibreOfficeでもできるらしいが、これも調べたら、すごく面倒くさそう…。

できるだけ軽く、ソフト開発中止で使えなくなるとかいうリスクも少なく、将来にわたって継続して使い続けられる方法はないかと模索していた。

去年はこちらのTeXクラスファイルを使わせてもらった。
TeXで宛名印刷

しかし、宛名の連名には対応していなくて、無理やり連名にしようとすると文字列の配置に不満が残った。
自分でTeXの設定をいじれればいいのだけど、できない…。
TeXは印刷面の微妙な調整をやろうとすると、非常に複雑で自分にはあまり向いていない気がする…。

そこで今年はcssを駆使して、htmlで作成してみようと試みた。
…というか、去年もそれを試みたのだがうまくいかず挫折していたのだった(^_^;)。

今年は何とか成功!
以下、作成方法。

基本は、任意のフォルダ内に、「nenga.css」と「年賀状宛名.html」の2つのファイルを作って、テキストエディタで編集するだけ!

IPAmj明朝フォントをインストール

人名に使われている様々な異体字が使えるらしいIPAmj明朝フォントをインストール。
cssではIPAmj明朝フォント指定としている。

IPAmj明朝フォント以外にしてもいいけど、郵便番号の文字間などはこのフォントで調節しているので、もし郵便番号のフォントを変えるときはcssの調整が必要になると思う。

cssファイル

テキストエディタで、nenga.css を以下の内容で作成。

郵便番号の数字の位置に関しては、現在の私の環境で最適に合わせているつもりなので、プリンタ・ブラウザ環境(ちなみにChromium派生のVivaldiブラウザを使っている)などが変わるとズレる恐れもあるので、テスト印刷してみてズレているようであれば、cssで調整をする。

@page {size:100mm 148mm; margin:0; padding:0;}

body {margin: 0; padding:0;}

.sheet {
    width:100mm; height:148mm;
    margin: 0;
    padding:0;
    position: relative;
    page-break-after: always;
}

p{
    margin:0;
    padding:0;
}

.郵便番号 {
    font-size:12pt;
    font-family:"IPAmj明朝" ; /* IPAmj明朝で文字間等を調整している */
    margin:0;
    padding:0;
    position:absolute; top:14mm; left:45mm; /* ズレる場合は位置調整 */
    letter-spacing: 4.4mm; /* 文字間 */
}

.住所 {
    font-family: "IPAmj明朝"; 
    font-size:14pt;
    margin-left:0px;
    padding-top:0px;
    line-height:1.5em;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
    position:absolute; top:30mm; right:10mm;
}

.宛名 {
    font-family:"IPAmj明朝" ;
    font-size:22pt; 
    letter-spacing: 0.1em;
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translateY(-10%) translateX(-50%);
    transform: translateY(-10%) translateX(-50%);
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
}

.差出人住所氏名 {
    position:absolute; top:70mm; left:10mm;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
}

.差出人住所 {
    font-family:"IPAmj明朝" ;
    font-size:10pt; 
    margin:0;
    padding-left:0.5em;
}

.差出人 {
    font-family:"IPAmj明朝" ;
    font-size:14pt; 
    letter-spacing: 0.1em;
    margin:0;
    padding-top:0.5em;
}

.差出人郵便番号{
    font-size:10pt;
    font-family:"IPAmj明朝"; /* IPAmj明朝で文字間等を調整している */
    margin:0;
    padding:0;
    position:absolute; top:124mm; left:6mm; /* ズレる場合は位置調整 */
    letter-spacing: 1.8mm; /* 文字間 */
}

/** For screen preview **/
@media screen {
    body { background: #e0e0e0 }
    .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm;
    }
}

@media print {
  body {
    width:100mm; height:148mm; /* needed for Chrome */
}

css作成の際に参考にしたのは、以下のサイト。ありがとうございました。

htmlファイル(宛名作成)

テキストエディタで、 年賀状宛名.html を以下のように、書いていく。
郵便番号は半角数字、住所の数字は漢数字または全角数字で。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="nenga.css" type="text/css">
<title>年賀状宛名</title>
</head>
<body>

<section class="sheet">
    <p class="郵便番号">1234567</p>
    <p class="住所">鹿児島県鹿児島市○○町一―一<br />桜島マンション一〇一号</p>
    <div class="宛名">
        <p>山田 太郎 様</p>
        <p>   花子 様</p>
    </div>
    <div class="差出人住所氏名">
        <p class="差出人住所">鹿児島市○○町一―二<br />霧島コーポ二〇二</p>
        <p class="差出人">山田 一郎</p>
        <p class="差出人">   二郎</p>
    </div>
        <p class="差出人郵便番号">1234567</p>
</section>

<section class="sheet">
    <p class="郵便番号">1234567</p>
    <p class="住所">鹿児島県鹿児島市○○町1―1<br />桜島マンション101号</p>
    <div class="宛名">
        <p>小山田 長次郎 様</p>
    </div>
    <div class="差出人住所氏名">
        <p class="差出人住所">鹿児島市○○町1―2</p>
        <p class="差出人">山田 一郎</p>
        <p class="差出人">   二郎</p>
    </div>
        <p class="差出人郵便番号">1234567</p>
</section>

</body>
</html>

とりあえず、連名で書いても、少し長めの宛名(姓:3文字+名:3文字)でも、自分なりに満足のいくレイアウトになった。

f:id:adbird:20161214123757p:plain

ブラウザで印刷するので(ブラウザでPDFに出力してから印刷でもいい)、重たい余計なソフトは必要ないし、テキストベースでのデータ保存なので、ソフト開発終了で使えなくなるとか、データが開けなくなるとかがないので、安心。

印刷

うちのモノクロレーザープリンタ・ブラザーのHL-5250DNのLinuxドライバには、もともとハガキ設定がないこともあるのか、いろいろ設定してもハガキ印刷ができたり、できなかったりと不安定極まりない。

解決策?として、上記でできたhtmlファイルをGoogle Chromeで開いて、設定用紙はA4サイズのまま、余白をカスタムで「左56mm、上・下・右はそれぞれ0mm」にして、A4用紙の最上部・中央に位置するように設定、手差しトレイからハガキ印刷するとできた。

ただし、1枚ずつしか印刷できない…。連続して印刷しようとするとなぜか印刷されない。

左の余白は毎年、要調整だろうし、まだまだハガキ印刷は苦労が続く…。