算術・算数の練習問題で見かける「計算練習表」を,Scalable Vector Graphics (SVG)で生成することのできるRubyスクリプトを作成しました.ソースはGistからどうぞ.
さっそくですが出力例です.計算練習表〜緑表紙,遠山,そして現在 - かけ算の順序の昔話で挙げた,「5×」を含む図は,次のようになります.
中央と周囲には,任意の文字列が書けます.また周囲の個数に応じて,角度が均等になるよう調整します*1.中央を5,周囲を0から4までにした場合には,次の画像を生成します.
SVG画像のチェックには,手元のPC上のEmacsとInkscapeに加えて,WebサービスのJSFiddleも使用しました.上の2つの画像のソースと生成画像は,http://jsfiddle.net/takehikom/MmXpJ/,http://jsfiddle.net/takehikom/NsCAL/でアクセスできます.
Rubyスクリプトの動作は,__END__以降に書いたSVGの骨格に,パラメータをもとに生成したXMLの断片を差し込み,ファイルとして保存という流れになっており,座標計算を含め,コーディングで苦労したところは特にありませんでした*2.それよりも,フォントのところに時間をかけました*3.いろいろ試しまして,サンセリフ(font-family:sans-serif)を指定し,数はASCII文字,「×」はバツの文字(日本語文字)を使うことで,多くの環境でうまく表示されることを確認しました.
中央揃えは「text-anchor:middle」*4の記述で,うまくいきましたが,縦方向のセンタリング*5については良いプロパティが見つからず,フォントサイズなどから決め打ちにしました.色や,練習表のレイアウトを柔軟に変えられるようにすることも,課題となっています.
*2:yの座標を当初,ひき算ではなくたし算にしていて,画像は生成できたものの,どうすれば「見本」に合わせられるか,10秒少しだけ考えました.
*3:Emacsで,時計の3時になるよう2箇所だけ外に伸ばしたSVGファイルを完成させるのに,全行程の半分をとり,残りはRubyのコーディングと動作確認・最終調整でした.
*4:http://kadoppe.com/archives/2012/01/svg-text%E3%81%AEtext-anchor%E5%B1%9E%E6%80%A7%E3%82%92%E3%81%A4%E3%81%8B%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%80%82.html
*5:円の中央に,文字を置きたかったのですが.