web拍手改造に関するリクエストが寄せられた。拍手ページのフォームに項目を増やしたいというものである。デフォルトでは一言メッセージしか書けないが、類似サービスを見てみれば返信の要不要を知らせるためのボタンであるとか、あるいは名前欄が用意されていたりする。実は、私自身、あの返信不要ボタンなどは便利だなあと思ってきたから、こうしたものを追加するという改造はいつかやりたいと思っていたのだ。だが面倒くさがりという性質が邪魔をして、今の今まで放置してきてしまった。なので、このリクエストは渡りに船、実によいきっかけを作ってくれた。そのようなわけで大変ありがたく思っている。
フォームの要素を増やすにはHTMLの知識があればなんとかなり、そしてこれまでいろいろ改造してきた中で学ばれたように、print文を使って望むHTML等文字列を出力すればいいということはもう説明の必要もないだろう。しかし問題は、ただフォームを作ってやればいいわけではないという点だ。フォームを経由して送られてきた情報を、適切に取得し、かつ保存してやる必要があるからだ。さらには、その保存された情報を読み出し、表示されるようにする必要もある。
今回の改造は、無改造のweb拍手に返信用不要のポップアップメニューを用意し、それをログに保存。kaiseki.cgiで保存された情報を表示させるというものである。改造対象となるファイルはclap.cgi、clapinit.cgi、kaiseki.cgiである。
clap.cgiにほどこす改造は二点である。一点目は、拍手ページのフォームにポップアップメニューを追加するための改造。二点目は、新しく作られた項目の情報を記録するための改造である。なお、情報の取得はclapinit.cgiの仕事である。そのため、clap.cgi編は前後編でお送りする。今は前編、ポップアップメニューの追加をする。
拍手ページのフォームを出力する部分は、clap.cgiの144行目からはじまっている。以前、連投規制を緩和する改造を扱ったことがあったが、丁度その部分だ。if ($kaisuu < 9){
という部分、最初の波括弧の中にフォームを出力するための文が書かれている。
print "<FORM action=$base method=POST>\n";
print '<INPUT type="submit" value="もっと送る"><br><br>',"\n";
print "<input type=hidden name=kaisuu value=$kaisuu>\n";
print '<font size=2>ついでに一言あればどうぞ(拍手だけでも送れます)<br>',"\n";
print '<input type=text name=hitokoto size=50 maxlength=50><br>',"\n";
print '</FORM>',"\n";
私は、一言メッセージの入力欄の右隣にポップアップメニューをつけたいと思った。ということは、用があるのは154行目ということになる。
print '<input type=text name=hitokoto size=50 maxlength=50><br>',"\n";
私はこれを次のように書き換えた。
print '<p><input type="text" name="hitokoto" size="50" maxlength="'.$hitokotomax.'" value=""> <select name="reply"><option>-</option><option>要返信</option><option>返信不要</option></select></p>',"\n";
特に重要な追加部分を強調しておいた。なおこのコードを出力すると、次のようなポップアップメニューが表示される。
さて、ここで重要なのはこのポップアップメニュー、すなわちselect要素であるが、このname属性値である。私は返信に関する項目なので、replyと名前を付けたのだが、この名前がわからないとこの項目の値を得ることができない。だからよく覚えておいていただきたい。replyである。もちろんこの名前は、皆さんが独自に決めていただいてかまわないし、複数項目を追加したい人ならば、さらに違った名前の項目を用意する必要があるわけだ。
とにかく、ここでは名前が重要ということだけ理解しておいていただきたい。
clapinit.cgiを改造する。改造の目的は、先ほど用意した項目、replyの値を取得し、変数に放り込むというものだ。
web拍手cgiがフォームから送られてくる情報を取得できるのは、clapinit.cgiの102行目、フォームデコードと書かれているところからはじまる関数を使っているからである。このdecode関数が使用されると、pass、hitokoto、kaisuuという名前で送られてくる情報が、それぞれ$pass、$hitokoto、$kaisuuという変数にセットされるのである。つまりここでしなければならないのは、replyという名前で送られてくる情報を、$replyという名前の変数にセットすることである。
しかし、その作業はなんら難しいものではない。というのは、このdecode関数はいったんすべての値を%inというハッシュに格納し、その後にそれぞれの変数に値をセットしなおしているからだ。つまりreplyという名前の情報はすでに取得されている。我々はただ一行追加してやるだけでいいのだ。追加するのは142行目がいいだろう。
$pass = $in{'pass'};
$hitokoto = $in{'hitokoto'};
$kaisuu = $in{'kaisuu'};
上のような行を見付けたら、そのあとに一行追加すれば完了だ。
$pass = $in{'pass'};
$hitokoto = $in{'hitokoto'};
$kaisuu = $in{'kaisuu'};
$reply = $in{'reply'};
これでreplyという名前のつけられたフォーム項目の情報を、$replyという変数にセットすることができた。
さて、舞台をclap.cgiに戻そう。ここでおこなう改造は、先ほどすでに説明したように、取得したreplyの値をログに書き込むというものだ。
clap.cgiで一言メッセージをログに保存しているのは、114行目、一言メッセージ処理というコメントからはじまる数行だ。$mesdataという変数に書き込むデータを用意し、それをファイルに追記しているのだが、その$mesdataに値をセットする行を書き換えてやろう。
$mesdata = "$getdate<>$tohour<>$hitokoto<>\n";
<>を区切りにして、変数がつなげられているのが見て取れるかと思う。この最後、$hitokotoの次に$replyを追加してやればいいのだ。
$mesdata = "$getdate<>$tohour<>$hitokoto<>$reply<>\n";
clap.cgiの改造はこれで終了だ。これまでの作業で、replyという名前のポップアップメニューの値がログに記録されるようになったわけだ。
情報の取得に成功し、ログに記録することもできた。じゃあ次はその情報を見られるようにしなければならない。そう、ここでkaiseki.cgiを改造することとなる。
ログに保存されたメッセージを表示するためのコードは、kaiseki.cgiの114行目、メッセージ表示というコメントからはじまる数行だ。ここで特に重要なのは120行目、そして122-123行目だ。
120行目がなにをしているか説明しよう。
($mesday,$meshour,$message) = split(/<>/,$mes[$i]);
ここでは、@mesという配列に読み込まれた一言メッセージログの内容を、一行ずつ分割して、$mesday、$meshour、$messageという変数にセットしている。もう少し説明すると、この処理はforという繰り返しの中に書かれているのだが、@mesの数だけ、つまり一言メッセージログの行数分おこなわれる繰り返しの中で、$i行目(もちろん$iの中身は数字であるわけだ)に対し、<>という区切り文字で分割して、それぞれの値をそれぞれの変数にセットしているのである。
ややこしいな。ちゃんと伝えられているか自信がなくなってきた。
ここでおこなう改造はこのとおり。
($mesday,$meshour,$message,$reply) = split(/<>/,$mes[$i]);
これで、変数$replyに、さっきログに保存するように改造した$replyの値がセットされる。
では、この取り出した値を出力してやろう。それが122-123行目にほどこす改造である。
print "<td><p align=\"right\">$meshour時</p></td>\n";
print "<td>$message</td><tr>\n\n";
これを次のように書き換えてやろう。
print "<td><p align=\"right\">$meshour時</p></td>\n";
print "<td>$message</td>\n";
print "<td>$reply</td><tr>\n\n";
単純にいうと<td>$message</td>
の次に<td>$reply</td>
が表示されるようテーブル項目を追加したわけだ。
以上、これでフォームに追加された項目の値が、ログに保存され、kaiseki.cgiにも表示されるようになった。上に紹介した改造例をもとに、項目を増やすなり、もっと違う種類の要素を使うなりするとよいだろう。HTMLのフォームを理解するためには次のページが参考になるかと思う。
< web拍手改造:過去n日間の解析、縦のものを横にする web拍手改造:ログとメッセージを一覧表示する >