ソースコードを生成する

ソースコード生成は積極的に利用すると仕事の効率が非常に良くなります。

JavaScriptと呼べないくらい簡単なソースコードの生成は良い練習になります。
canvasを生成すると、OmniGraffleなどで書いてられないような絵を簡単に手に入れることができます。

大きい絵も書いてられないですが、100枚200枚使わないと傾向をわかりやすく示すことができない場合の資料作成を手書きではやってられません。

プログラムで実現することを決める

ここでは、CSVを読み込んで、htmlを出力するRubyスクリプトを作成します。htmlをChromeで読み込んで、pngを取得します。内容は年表です。

プログラムを設計する

CSVを下記のように設計します。

timeline.csv


人物名,生まれた年,亡くなった年
人物名,生まれた年,亡くなった年
人物名,生まれた年,亡くなった年

プログラムを実装する

generate_timeline.rb

## ./x.sh 

require 'csv'
require 'fileutils'

# ------------------------------------------------------------------------------

f = File.open( ARGV[1], "w" )

f.puts "<!DOCTYPE html>"
f.puts "<html>"
f.puts "<body>"

f.puts '<canvas id="graph" width="450" height="650">'
f.puts '</canvas>'

f.puts '<script type="text/javascript">'

f.puts 'var canvas = document.getElementById( "graph" );'

f.puts 'var c = canvas.getContext( "2d" );'
f.puts 'var position = 0;'

f.puts 'c.clearRect( 0, 0, canvas.width, canvas.height );'

# ------------------------------------------------------------------------------

input = CSV.open( ARGV[0], "r" )

vertical = 20

input.each do |row|
    name = row[0]
    birth = Integer( row[1] )
    death = Integer( row[2] )

    ## s : start
    ## e : end
    line_s = birth - 1550
    line_e = death - 1550

    f.puts "c.fillText( \"#{name}\", #{line_s} + 10, #{vertical} + 7 );"

    f.puts "c.fillText( \"#{birth}\", #{line_s} - 5, #{vertical} - 5 );"
    f.puts "c.moveTo( #{line_s}, #{vertical} );"
    f.puts "c.lineTo( #{line_s}, #{vertical} + 20 );"

    f.puts "c.moveTo( #{line_s}, #{vertical} + 10 );"
    f.puts "c.lineTo( #{line_e}, #{vertical} + 10 );"

    f.puts "c.fillText( \"#{death}\", #{line_e} - 5, #{vertical} - 5 );"
    f.puts "c.moveTo( #{line_e}, #{vertical} );"
    f.puts "c.lineTo( #{line_e}, #{vertical} + 20 );"

    vertical = vertical + 35
end

f.puts "c.stroke();"

## default : png
f.puts 'var png = canvas.toDataURL();'
f.puts 'window.location = png;'

f.puts '</script>'

f.puts "</body>"
f.puts "</html>"

input.close
f.close

入力ファイルの内容です。

timeline.csv


Galileo,1564,1642
Kepler,1571,1630
Descartes,1596,1650
Fermat,1607,1665
Newton,1642,1727
Leibniz,1646,1716
Euler,1707,1783
Fourier,1768,1830
Gauss,1777,1855
Cauchy,1789,1857
Riemann,1826,1866
Dedekind,1831,1916
Cantor,1845,1918
Hilbert,1862,1943
Lebesgue,1875,1941
Einstein,1879,1955
Neumann,1903,1957
Gentzen,1909,1945

動作確認する

使い方です。


% ruby  generate_timeline.rb  timeline.csv  timeline.html

出力結果です。

プログラムで実現することを決める

プログラムを設計する

プログラムを実装する

動作確認する

広告