Perl/ActivePerl For UNIX/Linux/Windows
 
TryThe Homepage
初めてのCGI
CGI 研究室
ダイナミックCGI
ダウンロード
サービス
サーバ構築(Windows)
データベースアクセス
有料サービス
FAQ
お問い合わせ
このページを印刷
改造の手引き
このコーナーでは、フリーで公開されているCGIスクリプトをご自分の好みのデザインに変更したり、 CGIそのものに機能を追加してカスタマイズする方法を学習します。 ほとんどがHTMLタグや、Javaスクリプト、スタイルシートをCGIに組み込む方法をご紹介します。
  リンク、ボタンを画像に変更する
通常、文字にリンクを付ける場合はアンカータグを使用しますが、 アンカータグでは大して文字を飾ることができません。 また、フォームには必ずと言っていいほどボタンが有ります。このボタンもまた味もそっけもありません。 そこでこれらを画像にしてみましょう。
  • アンカータグをボタンに変更
    print "<a href=bbs.cgi>次のページ</a>\n";
    のようなタグは、
    print "<input type=button value=次のページ onclick=\"location=\'bbs.cgi\'\">\n";
    と書くことでフォームのボタンに変更できます。

  • アンカータグを画像に変更する
    画像を使用してリンクを付ける場合は、
    print "<a href=bbs.cgi><img src=bbs.gif border=0></a>\n";
    と書きますが、もっと簡単に
    print "<img src=bbs.gif onclick=\"location=\'bbs.cgi\'\">\n";
    と書くこともできます。

  • フォームのsubmitボタンを画像にする
    フォームには必ずと言っていいほどsubmitボタンが有ります。
    print "<input type=submit value=送信する>\n";
    このボタンも画像に変更できます。
    print "<input type=image border=0 src=submit.gif>\n";
    このように書くこともできますが、Javaを使用して
    print "<img src=submit.gif onclick=\"submit();\">\n";
    とする事もできます。このJavaを使用すれば、リセットも作成できます。
    print "<img src=reset.gif onclick=\"reset();\">\n";
    またJavaを使用すると、1ページに複数のフォームが有る場合でも、フォームを指定して送信できます。
    print "<img src=bbs.gif onclick=\"form1.submit();\">\n";
    ここで気をつけなければならないのは、Javaのsubmit();で送信された場合は、そのボタンのプロパティは送信されません。

  項目を追加する
フリーで公開されているCGIにない項目を追加する事もできます。 たとえば、当サイトで公開している「掲示板」と言う名の掲示板ではE-Mailを記入する項目さえ無いシンプルな物です。 この掲示板にも少し厄介ですが、E-Mailの項目を追加できます。
  • フォームに項目を追加する
    何はともあれ、フォームに項目が無い事には記入することができません。 この掲示板のフォームはサブルーチン「sub editform」で定義されています。
    sub editform {
      my($editcode) = @_;
      my($year, $month, $day) = split(/\//, $birthday);
      print "<input type=hidden name=action value=regist>\n";
      print "<input type=hidden name=editcode value=$editcode>\n";
      print "<table border=1 cellspacing=0 cellpadding=2>\n";
      print "<td align=center>性別</td>\n";
      print "<td>";
      if ($sex) {
        print "<input type=radio name=sex value=0>男性\n";
        print "<input type=radio checked name=sex value=1>女性\n";
      } else {
        print "<input type=radio checked name=sex value=0>男性\n";
        print "<input type=radio name=sex value=1>女性\n";
      }
      print "</td></tr>\n";
      print "<tr><td align=center>$DOWN[0]</td>\n";
      print "<td><select name=down size=1>\n";
      foreach (1 .. @DOWN-1) {
        if ($down == $_) { $selected = ' selected'; }
        else { $selected = ''; }
        print "<option$selected value=$_>$DOWN[$_]</option>\n";
      }
      print "</select></td></tr>\n";
      print "<tr><td align=center>氏名</td>\n";
      print "<td><input type=text size=24 name=name value=\"$name\">\n";
      print "パスワード<input type=password name=pass value=\"$pass\">
    \n";
      print "変更訂正や、削除時にはパスワードが必要です。</td></tr>\n";
      print "<tr><td align=center>E-Mail</td>\n";
      print "<td><input type=text size=24 name=email value=\"$email\"></td></tr>\n";
      print "<tr><td align=center valign=top>コメント</td>\n";
      print "<td><textarea name=comment cols=60 rows=12>$comment</textarea></td></tr>\n";
      print "</table>\n";
      print "<input type=submit name=regist value=以上の内容で投稿する>\n";
      if ($editcode) {
        print "<input type=submit name=delete value=この記事を削除する>\n";
      }
    }
    赤字で書かれた部分が追加されたコードです。 これだけでE-Mailのフィールドは追加されました。

  • 保存フィールドの追加
    フォームに項目を追加するだけでは入力することができてもCGIが入力されたデータを保存することができません。 そこで、ファイルに保存するフィールドを追加してフォーマットを整えます。 「掲示板」では、新しい記事を保存する場合と、変更訂正された場合のフォーマットでは異なりますので、 それぞれ設定する必要があります。まずは、新規登録時のフォーマットです。
    $value = join("\t",
      "code=$newcode",
      "date=$DATE",
      "sex=$QUERY{'sex'}",
      "down=$QUERY{'down'}",
      "name=$QUERY{'name'}",
      "pass=$QUERY{'pass'}",
      "email=$QUERY{'email'}",
      "comment=$QUERY{'comment'}",
      "\n"
    ););
    上記赤字の行が追加されたメールアドレスのフィールドです。 同様に、変更訂正された場合のフォーマットへもフィールドを追加してください。
    $line = join("\t",
      "code=$FIELD{'code'}",
      "date=$FIELD{'date'}",
      "sex=$QUERY{'sex'}",
      "down=$QUERY{'down'}",
      "name=$QUERY{'name'}",
      "pass=$QUERY{'pass'}",
      "email=$QUERY{'email'}",
      "comment=$QUERY{'comment'}",
      "\n"
    );

  • メールアドレスの表示
    ここまでで、メールアドレスを記入して保存することは可能になりました。 後は、このメールアドレスをどう使うかです。ここでは、記事のタイトルに表示してみましょう。 投稿記事は、メインルーチンの最後のセクションです。
    foreach ($pline .. $page_end) {
      if ($i != 1) { print "<br>\n"; }
      %FIELD = fields($MATCH[$_]);
      &boxtop($tablewidth);
      print "<table border=0 cellspacing=0 cellpadding=2 width=100%>\n";
      print "<td bgcolor=$bg><input type=radio name=code value=$FIELD{'code'}></td>\n";
      print "<td bgcolor=$bg>$FIELD{'name'}</td>\n";
      print "<td bgcolor=$bg>$DOWN[$FIELD{'down'}]</td>\n";
      print "<td bgcolor=$bg>";
      if ($FIELD{'sex'}) { print "女性"; } else { print "男性"; }
      print "<td bgcolor=$bg>";
      if ($FIELD{'email'} =~ /[\w-]+\@[\w\.\-]*/) {
        print "<a href=mailto:$FIELD{'email'}>$FIELD{'email'}</a>";
      }
      print "</td>\n";
      print "<td bgcolor=$bg align=right>", jst_time($FIELD{'date'}), "</td></tr>\n";
      $FIELD{'comment'} =~ s/\r/<br>/g;
      $FIELD{'comment'} =~ s/ / /g;
      print "<td></td><td colspan=5>$FIELD{'comment'}</td></tr>\n";
      print "</table>\n";
      &boxbottom();
      $i++;
    }

  • 変更訂正時のプロンプト
    これで、入力されたメールアドレスはファイルに保存され、メールアドレスが記入されている記事は、 記事一覧にもリンク付きで表示できるようになりました。 通常の掲示板では、これで完成なのですが、この「掲示板」には、投稿者と、管理者が変更訂正できる機能が有ります。 変更訂正が指定されると、変更訂正する記事を読み込み、 予めフィールドにプロンプト文としてセットしておかなければなりません。
    } elsif ($QUERY{'action'} eq 'edit') {
      @DUMMY = grep(/^code=$QUERY{'code'}\t/, @DATA);
      if (@DUMMY) {
        %FIELD = fields($DUMMY[0]);
        if (($FIELD{'pass'} && $QUERY{'pass'} eq $FIELD{'pass'}) || $password eq $QUERY{'pw'}) {
        $sex = $FIELD{'sex'};
        $down = $FIELD{'down'};
        $name = $FIELD{'name'};
        $pass = $FIELD{'pass'};
        $email = $FIELD{'email'};
        $comment = $FIELD{'comment'};
    これで、完成です。こちらに完成品が有りますので、ご自分のものと比較してみてください。
    表示が文字化けしている場合は、ブラウザの[表示]-[エンコード]-[日本語自動選択]を選択してください。
Copyright 2004 Terra. All rights reserved. No reproduction or republication without written