読者です 読者をやめる 読者になる 読者になる

markdown + pandoc で、1問1答の小テストプリントを作る

はじめに

教育関係者なら、1問1答の小テストプリントを作成することは多いと思う。
それを簡単に作る方法。

概要としては、テキストエディタmarkdown記法)で問題を作成し、Pandocでhtmlに変換(さらにPDFにしてもいい)、印刷という手順。

  • 下準備(Pandocのインストールなど)。
  • 任意のフォルダに、以下を作成。
    • smalltest.css (一度作れば後はいじらない)
    • 小テスト001.md (問題・解答本体)
  • コマンドをうてば、htmlファイル生成(さらにPDFにも変換可能)。

Pandocのリスト番号付与機能や脚注機能を利用したこの作成方法のメリットは、以下の通り。

  • テキストエディタ(メモ帳など)だけで問題を作成できる。
  • 問題番号、解答番号を意識しないでいい。
  • (上記と関連して)問題の差し替え、並び替えの時の問題番号・解答番号のズレを気にしなくていい。
  • 問題文のすぐ後に、解答を書ける。
  • 両面印刷して、オモテ面に問題文、ウラ面に解答という構成にできるので学習者自身で答え合わせができる。もちろん、片面印刷して、オモテ面だけ学習者に渡して、答え合わせは教師側で行ってもいい(というか、本当はそれが望ましい)。

下準備

Pandocなどのインストール

Pandocは、markdown記法で書いたファイルをhtmlなどの様々なファイルに変換するためのソフト。英語だけど、Installingのリンク先をクリックしていけば、大体分かるはず。Windowsユーザーは「pandoc-1.〜 -windows.msi」をダウンロードして、インストール。

Pandoc

wkhtmltopdfは、下記、下準備3のスクリプトファイルによるpdf作成をするのであれば必要。Windowsユーザーは必要ない。

wkhtmltopdf

cssファイル

任意のフォルダ内に、以下の内容の「smalltest.css」ファイルを作る。

リンク(脚注のリンク)の文字を visibility: hidden; にしているのが肝。

.問題 {
        margin-left:0%;
        margin-right:30%;
        padding-right:10pt;
        font-family:"IPAex明朝",serif;
        font-size:10pt;
        border-width: 1px;
        border-color:grey;
        border-right-style:dashed;
        }
.問題 li{line-height:1.3;
    padding-bottom:7pt;}
.footnotes {
        padding-top:5%;
        margin-left:70%;
        page-break-before:always;
        font-family:"IPAex明朝",serif;
        font-size:11pt;
            }
h1{font-size:11pt;}
h2{font-size:10pt;}
a:link { visibility: hidden; }
a:visited { visibility: hidden; }
a:hover { visibility: hidden; }
a:active { visibility: hidden; }

hr { visibility: hidden; }

ruby>rt {
    font-size: 50%;
    text-align: center;
    }

スクリプトファイル

markdown→html→pdf 変換を一発で行うためのスクリプトファイル「maketest.sh」を、上記cssファイルと同じフォルダに用意。

ただし、使えるのはLinuxユーザーのみ。Windowsユーザーはこれは使えない。

Windowsでも似たようなことができるんだろうけど、Ubuntuユーザーの僕は知らないw。

#!/bin/sh

pandoc $1.md -c smalltest.css -o $1.html
wkhtmltopdf --disable-smart-shrinking --margin-top 20 --margin-left 15 --margin-right 15 $1.html $1.pdf

小テスト問題文・解答作成

上記cssファイル・スクリプトファイルと同じフォルダ内に、例えば「小テスト001.md」というファイルを以下のように作る。

「半角数字 + 半角ピリオド + 半角スペース」の後に問題文で、そのすぐ後の ^[ ] の中に解答を書く。

<div class="問題"><!--これは削除しない-->

# 小テスト001

1. 1914(大正3)年の噴火によって、桜島は(  )半島と陸続きになった。^[大隅]
2. 2017年1月現在、広告鳥が乗っているバイクは何か。^[YBR125]
4. 125cc未満の、いわゆる原付2種バイクのナンバープレートの色は何色か。^[ピンク色]
5. YBR125はどこのメーカーのバイクか。^[ヤマハ。<br />ただし、製造は日本国内ではなく、中国など。]
6. ^[]
7. ^[]
8. ^[]
9. ^[]
3. 問題番号は自動的に振られるので、問題の入れ替え、差し替えが非常に楽。^[解答番号も問題番号と一緒に変わる。]
10. ^[]
1. 問題番号は半角数字であればいいので、全部「1」とかでも大丈夫。^[解答番号は意識しなくもいい。]
1. ^[]
1. ^[]

</div><!--これは削除しない-->

変換

フォルダ内で端末(ターミナル、WindowsだったらコマンドプロンプトPowerShell?)を開き、以下を入力してエンターを押すと、同じフォルダ内にhtmlファイルが生成される。

pandoc 小テスト001.md -c smalltest.css -o 小テスト001.html

Windowsユーザーのための参照:

htmlファイルをブラウザで開いて、印刷時の余白を適当に設定して(左右の余白は同じ方がいい)、印刷。

印刷時にpdfプリンタ等を選べば、pdfも作成できる。

Linuxユーザーなら、フォルダ内で端末を開いて、以下で下準備3のスクリプト実行で、html・pdfの一発作成が可能。

sh maketest.sh 小テスト001

f:id:adbird:20170104201654p:plain f:id:adbird:20170104201709p:plain

さいごに

両面印刷をして配布、オモテ面の点線の右側に解答を書かせ、解き終わったら、点線で山折りで折り曲げると、ウラ面の答えを見ながら答え合わせができるようになっている。
解答がページ右側に寄せられているのはそのため。実際に両面印刷してみると分かる。

前述の通り、問題の面だけ印刷して、学習者に配布実施して、教師が採点するのが望ましいのだろうけど…。

複数のコマンドを一度に簡単に実行する方法

markdownファイルからpandocでcssを適応させたhtmlに変換。
さらにwkhtmltopdfで、そのhtmlからpdfに変換。

といった作業をできるだけ簡単に実行する方法。
ただし、Linuxのみ。

その1 シェルスクリプトを使う方法

以下の内容の、「makepdf.sh」というファイルをmdファイル(仮に「テスト001.md」があるとする)と同じフォルダ内に作る。

#!/bin/sh

pandoc $1.md -c test.css -o $1.html
wkhtmltopdf --disable-smart-shrinking --margin-top 20 $1.html $1.pdf

フォルダ内で端末(ターミナル)を開き、

$ sh makepdf.sh テスト001

をすると、上記スクリプトの $1 に、「テスト001」を差し込んで実行してくれる。

その2 テキストエディタgeanyを使う方法

geanyで ビルド > ビルドコマンドを設定 で以下の内容を設定。ラベルは任意名でOK。

pandoc "%f" -c test.css -o "%e".html && wkhtmltopdf --disable-smart-shrinking --margin-top 20 "%e".html "%e".pdf

ビルド > 設定したラベル名をクリック。

geanyでmarkdownファイルを編集、そのままクリックするだけで、コマンド実行できるからこっちの方が楽。

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枚ずつしか印刷できない…。連続して印刷しようとするとなぜか印刷されない。

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