知識無用のステップアップ実践講座

著者：KENT1959年生まれ。自作 CGIスクリプトの配布をメインとするインタラクティブページ制作の支援サイト「KENT WEB」管理者。
www.kent-web.com
静岡県静岡市在住。
illustration : Ebisu Yoshikazu

第4回 オリジナル掲示板に挑戦!（後編）
前回の掲示板の設置に続いて、今回は「後編」として掲示板の改造に挑戦してみよう。
まず改造への基本に触れ、「文字色の選択機能」の追加と「書き込みの管理者限定機能」への改造を紹介する。

1 Perlの基礎を学ぼう
まず形から覚えるべし)

しよう。
2 行目から6 行目までにある

print 〜は、「〜を表示する」という命令文だ。最後にセミコロン（;）があるのは「実行文がここHello World !
Perlに触れてみよう

ィタ」などのテキストエディターで入力して「hello.cgi」というファイル名で保存する。

運動選手が試合前に念入りに準備運動をするように、改造に入る前に準備体操程度の学習をしてみよう。

で完了する」という意味だ。
2行目の Content-type: text/html

は、先頭行の「Perl のパス」はプロバイダーで決今から表示する内容が「HTML 文書」であめられたパスに変えよう。

ることを宣言するための取り決めだ。さらに次に、「hello.cgi」をFTP クライアントでその後に ¥nが2 回続いているが、¥n は

今回は、Perl の基本として「Hello WorldプロバイダーのCGI の実行可能なフォルダー「改行」の意味で、Content-type を指定し!」という英文を表示させてみる。この作業はにアスキーモードで転送して、パーミッショた次の行は空行でなければならないという規英語学習で「This is a pen.」を最初に学ぶンを755 に設定すればOK だ。ブラウザーで則なので、改行を2度続けている。のに似ていて、Perlを最初に学習する場合は「hello.cgi」にアクセスすれば「Hello Worldこれを学ぶことが慣例になっている。

!」の文字が現れるはずだ。

右下の図にある7行のソースを、「秀丸エデ+CD-ROM

秀丸エディタ Å Win→ HIDEMARUFFFTP Å Win→ FFFTPJedit Å Mac→ Jedit
Fetch-J Å Mac→ Fetch-J

Å Magnavi→ Ip0110→ Cgi

294 INTERNET magazine 2001/10

は処理の終了という意味

しておくので参考にしてほしい。

hello.cgi のソース

ソフトウェアの 収録 先CGI サンプルの収録 先

それでは、この「hello.cgi」の内容を解説

7 行目の exitだ。この「hello.cgi」はCD-ROMÅ に収録

1
2
3
4
5
6
7

#!/usr/local/bin/perl
print "Content-type: text/html¥n¥n";
print "<html><head><title>Hello World !</title></head>¥n";print "<body>¥n";print "Hello World !¥n";print "</body></html>¥n";exit;

インターネットマガジン／株式会社インプレスR&D

入力は半角文字 で行 う。行
末 のセミコロンを忘 れずに入 力 するようにしよう。

Perl（パール）：ラリー・ウォールによって開発されたプログラミング言語。当初、テキスト処理に重点を置いた言語として開発されたが、言語仕様の拡張がなされ、ファイル操作やネットワークプログラミングなども可能となっている。最近ではウェブページに双方向性をもたらすために、CGIに利用されることも多い。
©1994-2007 Impress R&D

2 投稿の文字色を選べるようにしよう)

まずは小手調べ、この先には黒帯試験が待っているぞ

掲示板をカラフルに改造は4か所

サンプル掲示板「wbbs.cgi」を、CD-

なお、 この改 造 後 のサンプルとしてROMÅ からパソコンにコピーしよう。ウィン「wbbs2.cgi」ファイルをCD-ROMÅ に収録しておくので参考にしてほしい。

では、前編で使用した掲示板のスクリプト

ドウズの場合は、コピー後に「読み取リ専用」「wbbs.cgi」を改造しよう。これはCD-属性を解除する必要がある。ファイルを右クROMÅ に収録されている。

リックして、「プロパティ→読み取り専用」のまず、記事の投稿時に本文の文字色を8色チェックを外す。

から選択できるようにしよう。これにより、掲ここまでの作業が完了したら、「秀丸エデ示板が見た目にカラフルになる。また、常連

ィタ」で「wbbs.cgi」を開いてみる。改造が集う掲示板では、投稿者は決まった色を使する場所は以下のとおりだ。修正場所によっうので、色を見るだけで直感的に誰からの書ては、1 文字でも間違えるとCGI スクリプトき込みかがわかるようになる。

が動作しなくなるで、慎重に編集しよう。

完成

1 設定部での文字色指定の追加（72 行〜）
72# 題名部ポインタの色

73$sub3̲col = "#FCC22C";

74

3 投稿フォーム部 の 改造 （222 行〜）

75

#↓追加

76

@color = ('#800000','#DF0000','#008040','#0000FF','#C100C1',

222'#FF80C0','#FF8040','#000080');

223

囲みの中の2行を追加する。文字の色をオリジナルしたいときには、#のあとの数字を16進<tr><td><b>ＵＲＬ</b></td>

224

数で入力すればOKだ。

<td><input type=text name=url size="$f_url" value="http://$c_url"></td>

225

</tr>

226

EOM

227

#↑追加

228

2 記事表示部の改造（125 行〜）

229#↓追加ここから

230

print "<tr><td><b>文字色</b></td><td>¥n";125# 変数$colorを追加

126($no,$date,$name,$mail,$sub,$com,$url,$host,$pw,$time

231

value=¥"$color[0]¥",$color) = split(/<>/);
127$mail</a>"; }232

foreach (1 .. $#color) {

233
{$url

=checked><fontcolor=¥"$color[0]¥">■</font>¥n";if ($mail) { $mail = "<a href=¥"mailto:$mail¥">($url)

print "<input type=radio name=color

128

if"<ahref=¥"http://$url¥"

129&auto_link($com);130# 以下2行を追加

131

if ($color eq "") { $color = $color[0]; }132$com = "<font color=¥"$color¥">$com</font>";

target='_blank'>http://$url</a>"; }print "<input type=radio name=color¥"$color[$_]¥">";

234

print "<font color=¥"$color[$_]¥">■</font>¥n";

126行に「,$color」を追加する。新たに130行、131行、132行を追加する。

235}

236

print "</td></tr>¥n";237#↑追加ここまで

238
239

#↓追加

240

print <<"EOM";

241

<tr>

242

<td><b>削除キー</b></td>

243

4 記事表示部の改造（125 行〜）<td><input type=password name=pwd
size=8 maxlength=8 value="$c_pwd"></td>277

unshift(@lines,"$no<>$date<>$in{'name'}<>$in{'email'}
244

</tr>

<>$in{'sub'}<>$in{'comment'}<>$in{'url'}<>$host<>$pwd<
230行の「文字色」を書き換えると、記事投稿時の項目名が変わる。

>$time<>$in{'color'}<>¥n");

233 行、234 行の行頭の空白は半角スペースを使う。235 行の閉じカ
ここは、そのまま入力しよう。

ッコを忘れないように注意。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 2001/10295

3 新着情報や日記の発表を簡単にしよう
黒帯試験はキツイがガンバレ！

日々の管理を簡単にCGIのメリットを活かす)

1 投稿フォームサブルーチンの追加（91 行〜）
91

elsif ($mode eq 'usrdel') { &usrdel; }最後に、書き込みを管理者限定にする改造だ。新着情報や日記など、

92

#↓追加

管理者だけがコンテンツの更新を行う部分は、掲示板CGIを使って管理

93

elsif ($mode eq 'form') { &form; }94&html;

すれば便利だ。これをHTML で行うと、最初にHTML を編集してFTPで転送、ブラウザーで確認という手順になる。CGI掲示板なら、ブラウここは、とりあえずこのまま入力しよう。

ザーから即座に書き込めて確認もその場でできる。書き込むときのレイアウトなどは意識しなくてもよいので、大変便利であろう。
改造は前ページで使った「wbbs.cgi」をベースに行う。今度は改造

2 記事表示部「書き込み」のリンク削除（106 行）

量が多いが頑張って挑戦してほしい。

106<!-- [<a href="$script?mode=form&page=$page">書き込む</a>] -->106 行を「<!-- -->」で囲うことで、掲示板の左上のメニューにある「書き込み」を表示させないようにする。なお、この前後の文が左上完成に表示される文字を決めているので、これらを変更したい場合は「トップに戻る」などを変更する。

3 記事表示部の記事ナンバーと投稿者名を削除（137 行〜）
137# print "<tr><td width=14></td><td>No</td><td>&nbsp;： <b>$no</b></td>

138# print "<tr><td width=14></td><td>Name</td><td>&nbsp;： <b>$name</b></tr>¥n";</td></tr>¥n";
行頭に「#」を加える。Perlでは、「#」以降はプログラムとして実行されないので、この行は削除したものとして扱われる。CGIスクリプト中に自分で脚注を入れたいときは、行頭に半角で「#」（カッコ含まず）を入れる。

4 記事表示部の記事削除フォームを削除 （163 行〜）
163# print "<table align=right><tr><td nowrap align=center>¥n";164# print "<form action=¥"$script¥" method=¥"POST¥">¥n";165# print "<input type=hidden name=mode value=¥"usrdel¥">¥n";166# print "記事No<input type=text name=no size=3>¥n";167# print "削除キー<input type=password name=pwd size=4 maxlength=8>¥n";168# print "<input type=submit value=¥"記事削除¥"></td></form>¥n";169# print "</tr></table><br clear=all>¥n";

こちらも行頭に「#」を入れて、掲示板の右下に表示される「記事削除」ボタンなどを表示させないようにする。

6 投稿フォームの改造（192 行〜）

5 投稿フォームの改造（182 行〜）
182

local($f_name,$f_sub,$f_cols,$f_url,$c_name,183

if ($in{'pass'} ne $pass) { &error("パスワードが違

192

<!--

193

<UL>

194

<LI>以下のフォームより新規に記事を投稿してください。

195<LI>「おなまえ」と「メッセージ」は必須ですが、他の入力項目は任意です。

$c_email,$c_url,$c_pwd);
196

184

<LI>「削除キー」に任意のパスワード（英数字で 8 文字以内）を入れておくと後から記事を削除することが可能¥でいます"); }す。

&header;

183行と184行を追加して、他人が投稿用のURLを直接指定した場合、「パスワー197</UL>

198-->

ドが違います」と表示されるようにする。入力を忘れると、直接 URL を指定したときにサーバーエラーが発生する。

296 INTERNET magazine 2001/10

192行に「<!--」を、198行に「-->」を入れて投稿画面から投稿時の注意を消す。

インターネットマガジン／株式会社インプレスR&D

FTP（エフ・ティー・ピー／ File Transfer Protocol）：インターネットでファイルを転送する手順を定めたプロトコル。このプロトコルを使いファイルのダウンロードやアップロード機能を提供するサーバーをFTPサーバーと呼ぶ。
©1994-2007 Impress R&D

7 投稿フォームの改造（199 行〜）

9 投稿フォームの改造（226 行〜）

199<input type=hidden name=mode value="regist">

226<!--

200<input type=hidden name=pass value=

227

<tr>

"$in{'pass'}">228<td><b>削除キー</b></td><td><input type=password name=pwd size 〜

229

これも、とりあえずこのまま入力しよう。

8 投稿フォームの改造（182 行〜）

230

</tr>

231

<tr>

232

<td></td>

233

<td>
<input type=checkbox name=cook value=" 〜

234

182

<!--

235

183

<tr>

236

<small>クッキー情報を保存</small>
</td>

184

<td><b>おなまえ</b></td>

237

185

<td><input type=text name=name size="$f_nam 〜

238

</tr>
-->

186

</tr>

239

</table>

187

<tr>

240

</form>188<td><b>Ｅメール</b></td>241</blockquote>189<td><input type=text name=email size="$f_nam 〜

242

EOM

190

</tr>

243

print "</body>¥n</html>¥n";

191

-->

244

exit;

245}

この改造では、管理者専用の掲示板になるので、名前や電子メールは不要になる。これらがブラウザー上に表示されないように「<!-- -->」で囲む。

ここでも、投稿フォームで不要なものを「<!-- -->」で囲み、表示されないようにする。

0 登録処理部の改造（247 行〜）
A 検索処理部の改造（386 行〜）
247

local($no,$date2,$name,$mail,$sub,$com,$url,248

if ($in{'pass'} ne $pass) { &error("パスワードが386$host2,$pw2,$time2,$pwd);

386行をこのように書き換えて、367行を削除する。
「$sub」や「$date」前後の違います"); }249

print "<b>$sub</b> - $date<br>¥n";

タグを書き換えると、検索結果画面の投稿タイトルのデザインを変更できる。

# if ($in{'name'} eq "") { &error("名前が入力されていません"); }248行を追加して、他人が投稿用のURLを直接指定した場合、「パスワードが違います」と表示されるようにする。

C 管理処理部の改造（467 行）

この掲示板では名前の入力は必要ないので、249行の行頭に「#」を入れて、名前の記入忘れのエラーが表示されないようにする。

467

print

"<th> 投 稿 者</th><th> コメント</th><th> ホスト名</th></tr>¥n";

B 管理処理部の改造（416 行〜）
416

print"<form

この掲示板では、投稿者の名前を入力しないので、「<th>〜 </th>」を削除する。

action= ¥ "$script ¥ "method=¥"POST¥">¥n";417#print"<inputtype=hidden

name=modevalue=¥"admin¥">¥n";
418

419

print "<input type=radio name=mode value=admin

418 行と419 行を追加して、管checked> ログ \n";理者モードの画面で、過去のprint "<input type=radio name=mode value=form>

書 き込 みの管 理 か、新 たな記
事の投稿をするかを選択できる

書込 <P>¥n";ようにする。

D 管理処理部の改造（483 行）
483

print "<td>$name</td><td><small>$com</small></td><td>$host</td></tr>¥n";

この掲示板では、投稿者の名前を入力しないので、「<td>〜 </td>」を削除する。

改造はここまでだ。これで書き込みは管理けのオリジナル掲示板に仕立て上げる楽しさ

者限定となり、訪問者は閲覧だけができるよを味わってもらえることを願っている。CGIうになる。改造後のサンプルはwbbs3.cgi とを学ぶのに、最初から分厚い専門書を開き、してCD-ROMÅ に収録しておくので参考に難しい文法から学習してもおもしろみに欠けしてほしい。

るものだ。

最後に師範より

この連載のように、あるCGI サンプルをあ・これらのCGI スクリプトはフリーソフトとして使う

れこれ改造して楽しみながら、CGI の魅力を・詳細な利用規定については下の「利用規定」を読感じてもらえれば幸いである。諸君のさらな諸君には、自分好みに改造して、自分だサンプルスクリプト「wbbs.cgi」についての注意る精進を期待している。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ことができます。
んでください。

www.kent-web.com/pubc/kitei.html

INTERNET magazine 2001/10297

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.