簡単画像掲示板を作ってみよう

送られてきたマルチパートフォームデータの切り分け方さえつかめれば、簡単です。
最初は、あまり凝った機能は考えずに、なるべく簡単に作ってみてください。
- 送信フォームのあるhtmlファイルを書き換えてしまう方法が、たぶん一番シンプルでしょう
画像を保存するためのディレクトリを予め作成しておく必要があります
- 北大・教育用サーバーの場合は、CGiの実行権限が nobody なので、モードを777（=誰でもファイルを置ける）にしてください
html の表示は見やすくなるように工夫してみてください。スタイルシートを有効に使うのが良いでしょう。

受信画像の縮小方法

画像ファイル in.jpg の表示サイズが大きかった場合、横160px,縦120px 以下に縮小して、画像ファイル out.jpg を生成する Imagemagick のコマンドは、
```
convert -geometry '160>x120>' in.jpg out.jpg
```
参照 ⇒ Imagemagick のマニュアル

これを、ruby にやらせるには、たとえば、system を使って、

img = (画像データ)
infile  = "p%08d"     % rand(10**8)           # 一時保存ファイル：ファイル名
outfile = "p%08d.jpg" % rand(10**8)           # 出力画像ファイル：ファイル名
File.open(infile,"wb"){|f| f.print img }      # 画像データを一時ファイルに保存
a  = ["convert"]                              # Imagemagick 画像変換コマンド
a += ["-geometry","160>x120>"]                # 横160px,縦120px を超える場合は縮小
a += [infile,outfile]                         # infile を outfile に変換する
system(*a)                                    # 画像の変換を実行する
result = STDOUT.to_s.split(/#/).shift.chomp   # 処理に失敗した場合のメッセージを拾いだす
Process.waitall                               # 処理が全て終わるのを待つ(注意：ruby1.7以上)
File.delete(infile) if FileTest.file?(infile) # 一時ファイルを削除する

また、一度読み込まれたファイルの中身を、Imagemagick に直接引き渡すには、UNIX コマンドのパイプ機能を利用するのがよいでしょう
```
cat in.jpg | convert -geometry '160>x120>' - out.jpg
```
これを、ruby にやらせる場合は、open を使って、
```
img = (画像データ)
outfile = "p%08d.jpg" % rand(10**8) 
open("|convert -geometry '160>x120>' - #{outfile}" , "wb"){|f| f.print img } rescue nil
result = STDOUT.to_s.split(/#/).shift.chomp
```
- openは、ファイル名の代わりにコマンドが書けるだけでなく、パイプの処理機能もあります。参照 ⇒ open
- この場合、open に続くrescue nilは不要ですが、将来何らかの仕様変更があった場合に備えて、入れておきます
- 入力画像のファイル名がありませんが、画像ファイル自身の中のヘッダから、ファイルタイプを読み出すようです。 SVGやPDFファイルなど、様々な形式のファイルを処理してくれる反面、いいかげんなの画像処理ソフトなどで加工した画像などを送信すると、正しく処理されないかもしれません。
systemやopenでのコマンド処理に失敗した場合のエラーメッセージなどは、標準出力STDOUTから拾いだすことができます
その他、知っていると便利な画像処理(convert)のオプション
- -gamma 1.3/1.3/1.3 少し明るくする（1で何もしない。2だと相当明るい。色RGBの順なので色合いの調整も出来る）
- -modulate 100/110/100 少し鮮やかにする（中央100でなにもしない。130ぐらいからかなりドギツくなる）
- -sharpen 1x1 シャープにする

ファイル名を乱数にしましたが、時刻にしたい場合、たとえば、1/100秒単位で、秒数を16進数表示して、

t = "%x" % ( Time.now.to_i*100 + Time.now.usec.to_i/10000 )
puts t
puts Time.at(t.hex/100)

36進数では、1/1000 秒単位でも8桁

def t36
  t = Time.now.to_i*1000 + Time.now.usec.to_i/1000
  seed = "0123456789abcdefghijklmnopqrstuvwxyz"
  str = ""
  while t > 0 do
    str += seed[ t % seed.length ,1 ]
    t /= seed.length
  end
  str.reverse
end
puts t36

# 時刻に復元↓
str  = t36
seed = "0123456789abcdefghijklmnopqrstuvwxyz"
t = 0
n = 1
str.reverse!
while c = str.slice!(0) do
  t += seed.index(c.chr)*n
  n *= seed.length
end
puts Time.at(t/1000)

⇒ 答え

html ファイル：ファイル名 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <meta http-equiv="Content-Style-Type" content="text/css" >
  <style type="text/css">
  <!--
    body{background-color:#fed;color:#348;margin:1em 5%;}
    p{margin:0em;padding:0.25em 0.5em;}
    img{border:outset #fed 2px;float:left;margin:0em 1em 0.5em 0em;}
    hr{clear:both;}
  -->
  </style>
  <title>画像掲示板</title>
</head>
<body>
<form action="bbs.cgi" method="POST" enctype="multipart/form-data">
<textarea            name="messe" cols="72" rows="6">何か書いてください</textarea>
<br>画像ファイル：
<input type="file"   name="tenpu" value="" size="36">
<input type="submit" name="btn"   value="送信">
</form>
</body>
</html>

CGIファイル：ファイル名 bbs.cgi

#!/usr/local/bin/ruby -Ks
@in = Hash.new
if /boundary=([\-\w]+)$/ =~ ENV['CONTENT_TYPE'].to_s then # データ送られてきた場合を判別
  boundary = $1                                      # データ境界の目印を変数boundaryに写し取る
  while data = STDIN.gets(boundary) do               # 入力を境界で区切って、変数dataに写し取る
    if /\A[\r\n]*[^\r\n]+name="(tenpu|messe)"/ =~ data then # データの最初含まれるname値で選別
      key = $1                                       # name 値
      data.sub!(/\A[\r\n]*/,"")                      # データ最初の空行を取り除く
      data.sub!(/[\r\n]*\-\-#{ boundary }\z/,"")     # データ終端のゴミを除去
      data = data.split(/\n\r?\n\s*/,2)[1]           # ヘッダ部分を切り落とす
      next unless data                               # データの中身が空っぽ(改行スペース含む)なら、スキップ
      @in[key] = data                                # データを写し取る
    end
  end
end
messe = ""
if @in["tenpu"] then                                # 添付画像があったら縮めて保存
  outfile = "img/p%08d.jpg" % rand(10**8)
  open("|convert -geometry '160>x120>' - #{outfile}" , "wb"){|f| f.print @in["tenpu"] } rescue nil
  messe += "<img src=\"#{ outfile }\">\n" if FileTest.file?(outfile)
end
if @in["messe"] && @in["messe"] != "" then           # メッセージ部分の処理
  @in["messe"].gsub!(/\r\n/,"\n")                    # 改行コード変換
  @in["messe"].gsub!(/\r/,"\n")                      # 改行コード変換
  @in["messe"].gsub!(/\f/,"\n")                      # 改行コード変換
  @in["messe"].gsub!(/\v/,"\n")                      # 改行コード変換
  @in["messe"].gsub!(/\n\n+/,"\n")                   # 余分な改行を潰す
  @in["messe"].gsub!(/\0/,"")                        # 隠し文字を潰す
  @in["messe"].gsub!(/&/,"&amp;")                    # XSS 対策
  @in["messe"].gsub!(/&amp;#(\d{2,4});/){ "&#" + $1 + ";" } # XSS 対策（一部戻す）
  @in["messe"].gsub!(/</,"&lt;")                     # XSS 対策
  @in["messe"].gsub!(/>/,"&gt;")                     # XSS 対策
  @in["messe"].gsub!(/"/,"&quot;")                   # XSS 対策
  @in["messe"].gsub!(/'/,"&#39;")                    # XSS 対策
  @in["messe"].gsub!(/\n/,"</p>\n<p>")               # 改行があったら段落分け
  @in["messe"].gsub!(/\t/,"&nbsp;&nbsp;")            # タブの処理
  messe += "<p>" + @in["messe"] + "</p>\n"
end
if messe != "" then
  messe += "<hr>\n"
  html = File.open("index.html"){|f| f.read } rescue "<html><body><h1>Error!</h1></body></html>"
  html.sub!(/<\/form>/){ $& + "\n" + messe }         # メッセージを挟み込む
  open("index.html","w"){|f| f.print html } rescue 0 # html ファイルを書き換える
end

puts "Location: ./index.html"                        # html ファイルへジャンプ
puts

送受信＿フォームデータの扱い-演習編

Problem4: 簡単画像掲示板を作ってみよう

Hint

受信画像の縮小方法

Solution