クリッカブルマップに挑戦(RubyでCGI・入門編)

環境変数取得の応用として、画像をクリックすると、クリックした場所によって、いろいろな反応をする、クリッカブルマップを作ってみましょう。

testpage.html を再び編集して、フォームのボタンを作ります。(ここでは画像のファイル名は、usagi.gif)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
  <meta content="text/html; charset=Shift_JIS" http-equiv="content-type">
  <title>testpage</title>
</head>
<body>
<h1>テストページ</h1>
<p>世界のみなさん、こんにちは。</p>
<form method="GET">
  <input type="image" name="p" value="q"
    src="./usagi.gif" alt="これはクリッカブルマップです">
</form>
</body></html>

testpage.html をブラウザで表示し、画像をクリックすると、アドレスの後ろに ?p.x=59&p.y=90&p=q 等が、くっついて出てきます。この?よりもあとに続くのがクエリーストリング ( ENV['QUERY_STRING']で取得 ) です。画像のいろいろな場所をクリックして、数字を観察してください。左上の隅を原点として、xは右方向、yは下方向へと値が増えます。数値の単位はピクセル。すなわち画面上の点の数です。

試しに、ウサギの耳をクリックすると、外部に飛び、耳よりも下をクリックすると、元に戻ってくるCGIを作ってみましょう。

まず、testpage.html の<form method="GET">に目的地を書き込んで、<form method="GET" action="./hello.cgi">と変更します。

hello.cgi は、…応用問題です。各自考えてみてください。答えはポインターをかざすか、マークすると現れます。

#!/usr/local/bin/ruby
h = Hash.new
for qs in ENV['QUERY_STRING'].split(/&/) do
  key,val = qs.split(/=/)
  h[key]  = val
end
if h['p.y'].to_i < 98 then
  print "Location: http://www.rabbit.org/\n\n"
else
  print "Location: #{ ENV['HTTP_REFERER'] }\n\n"
end

既存の道具を呼び出して使う方法もあります。（これは、method="POST" でも動作可能です。）

#!/usr/local/bin/ruby
require "cgi"
h = CGI.new
if h['p.y'].to_i < 98 then
  print "Location: http://www.rabbit.org/\n\n"
else
  print "Location: #{ ENV['HTTP_REFERER'] }\n\n"
end

こういう解もあります。パターンマッチを使ってムダを省いたタイプ。（⇒実習プリントp64-66正規表現を参照）

#!/usr/local/bin/ruby
if /\bp\.y=(\d+)\b/ =~ ENV['QUERY_STRING'] then
  y = $1.to_i
  if y < 98 then
    print "Location: http://www.rabbit.org/\n\n"
  else
    print "Location: #{ ENV['HTTP_REFERER'] }\n\n" 
  end
else
  print "Location: ./\n\n"
end

注意：クリッカブルマップを使用する場合は、目の見えない人のために、代替用のリンクを置いてください。