表紙arrow

circleお絵かき掲示板 の 改造 (Ver. 1.32 対応）

タイトルをカスタマイズする

「改造」に入るまえに、ぜひこれはやっておいたほうがいい、ということがあります。それは picture.cgi によって表示される「お絵かき掲示板」そのもののタイトル（ブラウザのウィンドウ・タイトルに表示される）を、自分のサイトに合わせてカスタマイズする、ということです。

picture.cgi の末尾のほうに「ヘッダー」のセクションがあります。ここの <TITLE> </TITLE> ではさまれた部分を変更しましょう。履歴をたどったりブックマークするのに便利になります。

以下、「かぶら屋 本舗」に設置している poo site の「お絵かき掲示板」改造版の紹介をします。サイズは選択できたほうがいい。でもページのレイアウトを考えると自由指定はちょっと困るかな、というときにどうぞ。（作者によるこの CGI とアプレットの配布は終了してしまいました。）

改造はスクリプトの一部を書き換えるだけですが、少し知識が必要ですので、以下の説明を読んでもわからないとか、うまくできないかたは、やらないでください。

さて、どんな改造か、というと、

  • ブラウザの「更新」で二重投稿になるのを防止する。
  • 描く絵の サイズの種類 をあらかじめ用意した数種類から選べる。
  • お絵かきアプレットを呼び出すページを CGI で直接生成 する。＠ニフティでも picture.cgi のある場所に呼出しページが置けるのと同じになる。

というものです。（＠ニフティではアプレットが作った画像を CGI スクリプトと同じ場所に置けない、ということについては、通常と同じです。）

やることは、

  • picture.cgi を一部書き換える。
  • 新しく picture2.cgi を作成して、picture.cgi と同じ場所に置く。

の２点です。（＠ニフティに「お絵かき掲示板」を置くための基本的な変更は、ブチ猫ミミ さんの 【 お絵かき掲示板設置教室 】 をごらんください。）

改造は少し間違えると CGI が動作しなくなります。もとのファイルは別のところに退避するなどして、コピーを編集してください。また、ローカル（じぶんのパソコン）で動作テストをしてください。ローカルのテストについては 【 お絵かき掲示板をローカルで 】 に手順を書きました。

picture.cgi の改造

ブラウザの更新（リロード）の際の二重投稿を防止するには、スクリプトの「コメント投稿処理」部分（sub regist）の末尾近くの「&process_unlock;」の直前に次の１行を追加します。

print "Location: ./$script?\n\n"; # 二重投稿防止

お絵かきアプレットのサイズをリストから選択できるようにするには、最初に表示される掲示板画面のトップにリストからサイズを選択させて CGI に渡すフォームを追加します。オリジナルのスクリプトの論理行 281 行目の

if($cm_sw==1){

とある行の すぐ前 に以下のように追加。

# ★ 追加 大きさ指定でアプレットを呼び出す
print << "SEL_LIST";
<CENTER>
<form action="picture2.cgi" method="post">
横 x 縦   
<select size="" name="size">
<option value="200x200" selected>200 x 200</option>
<option value="300x300">300 x 300</option>
<option value="200x100">200 x 100</option>
<option value="100x200">100 x 200</option>
<option value="300x200">300 x 200</option>
<option value="200x300">200 x 300</option>
</select>   
<input type="submit" value="このサイズで描く">
</form>
</CENTER>
SEL_LIST

このリストは、形式が同じなら、自由に編集してもだいじょうぶです。項目を増やしたり、違うサイズにしたりしてください。

同時に、追加したぶぶんの 直前 の お絵かきページへの リンクを削除。オリジナルのスクリプトで 275 行目の

if ($NEWGIF eq '') {

から、さっき追加した部分の前までをコメントアウトします。（各行の先頭に半角の # をつけます。）　お絵かきページへのリンクに画像を指定している場合でも、画像が表示されなくなります。

スクリプトの &head; で始まる行からが、CGI で掲示板の画面を表示する部分ですが、そのすぐ下になります。また、$MESSAGE2 が含まれる部分でもあります。

picture2.cgi の作成

まず、現在使用しているお絵かきアプレット呼出しページ（デフォルトなら oekaki.html ）をコピーして、picture2.cgi というファイル名に変更します。また、この新しいファイルは picture.cgi と同じフォルダに置きます。

この picture2.cgi を編集します。先頭につぎのように追加します。

#!/usr/local/bin/perl

if ($ENV{'REQUEST_METHOD'} eq "POST") {
  read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
} else { $buffer = $ENV{'QUERY_STRING'}; }
if ($buffer eq '') { $buffer="size=200x200" }
@size = split(/=|x/, $buffer);
print "Content-type: text/html\n\n";
print << "DISP";

つぎに、これはオプショナル（やらなくてもいい）のですが、アプレット呼出しページに現在呼び出したアプレットのサイズを表示する機能をつけるための HTML コードを追加します。位置は、このページに表示されるタイトル部分（「お絵かき掲示板」など）のすぐあと（<br> や <p> をはさまない）です。ふつうの HTML の中に変数を埋め込むだけですので、好みに合わせてください。

<span style="font-size:9pt">[ $size[1] x $size[2] ]</span>

そして、アプレット呼出し部分のサイズにかかわる部分です。

archive=oekaki131.jar

とある行の 直後 から、

param name="cgi" value="getpic.cgi">

の 直前 までを、以下のように書き換えます。

DISP
$width = 400;
$height = 396;
if ( $size[1] > 200 ) { $width = $size[1]+200; }
if ( $size[2] > 200 ) { $height = int(($size[2]+34)/13.5)*22; }
print << "DISP";
    width="$width"
    height="$height">
<param name="picw" value="$size[1]">
<param name="pich" value="$size[2]">

そして、ファイルの最後に１行、

DISP

と追加してください。もとの HTML ファイルの部分はすべて、 print << "DISP"; と DISP という行ではさまれていることを確認します。

ここで「DISP」という文字列を使っていますが、この文字列ではさんだ部分は「ヒアドキュメント」というもので、はさむのに使う文字列は、ほかに出てこないものなら何でもいいので、好みで変えてください。

picture2.cgi の文字化け修正

HTML コードを CGI でそのまま表示するとき、ひとつ問題があります。それは日本語の「２バイトコード」（半角英数以外の文字）の中に、半角の \ と同じコード（5C）が含まれると、5C の部分が「エスケープ文字」と解釈されて、文字が半分欠けた状態になり、その結果、文字化けになる、ということです。

デフォルトの oekaki.html のアプレットの使いかた解説の中では、「能\」、「ソ\」、「表\」、の３つの文字に \ を追加すると、文字化けが解消されます。

以上です。アップロードしたらパーミッションを 755 に変更するのを忘れずに。

コメント投稿画面の下部に、すでにあるコメントを表示

この追加機能は、最初は あけび さん作成のコードを使わせていただいていました。あけび さんのところでの公開が終了したので、書き換えました。

これは picture.cgi のほうを改造します。このファイルの「コメント投稿画面」のセクションの最後のほうに「EOH」とだけある行があります。この行の直前の「</CENTER>」を消し、「&foot;」とある行の前にあたる位置に次のように追加します。（行間設定とか追加になっています。適当にカスタマイズしてください。）

&comment_list;
if ($comlist ne '') {
  print "<table bgcolor=\"$BDcolor\" border=\"0\" width=\"384\" ";
  print "cellpadding=\"15\"><tr><td style=\"line-height:120%\">\n";
  print "$comlist\n";
  print "</td></tr></table>\n";
  }
print "</CENTER>\n";

ここでテーブルの幅をデフォルトのテキスト入力ボックスにあわせて「384」としていますが、この数字も、その他のテーブルのデザインも、自由にカスタマイズしてください。ただ、「"」を使うときは「\"」とします。

同時にこのファイルの末尾に新しいサブルーチン「&comment_list」を、 【 別ファイル 】 のように追加します。（基本しかわからないで書いているので。あけび さんのコードほどスマートではありません。）　この２つのコードは連動しているので両方正しく書かれていないと動作しないので注意してください。

管理モードでコメント投稿者のＩＰアドレスを表示

picture.cgi の「管理者削除処理」の部分を探します。その部分の 120 行目くらいにある、

print "<FONT SIZE=$moji1 COLOR=\"$DTcolor\">$date</FONT>\n";

の部分を、

print "<FONT SIZE=$moji1 COLOR=\"$DTcolor\">$date [$ip] $host</FONT>\n";

と書き換えます。

色と背景画像を日替りに

色や背景画像の設定は、スクリプトが作成する（吐き出す）HTML コードのカスタマイズにかかわってきますので、表示のカスタマイズがしてあると、そのまま「ここをこう変える」という説明では使えません。ですから原則だけを解説します。スクリプトのなかで色設定の変数などを検索して、その内容をどこで設定しているのか（最初に代入されるところ）を探し、そこで日替りの色を保持している変数を読み込ませます。ちょっと複雑になりますので、元のスクリプトはちゃんと保存しておいて、コピーを編集し、必ずローカルテストしてから使って下さい。

ここでの「日替り」は曜日によって変えるもので、１週間でループします。picture.cgi なら、コメントに「配色等のカスタマイズ」とある行のすぐ後にある$BACKGIF の設定の行はコメントアウトして、そこに各曜日の設定を追加します。

$today = lc substr(localtime,0,3);
$BACKGIF = $today . '.jpg';

%daycolor1 = (
"sun", "#cacac8",
"mon", "#c5cfcb",
"tue", "#bdb7b0",
"wed", "#bec8c9",
"thu", "#c2c2bd",
"fri", "#bec6b7",
"sat", "#bfbbb5"
);

%daycolor2 = (
"sun", "#eaeaea",
"mon", "#dfe8e4",
"tue", "#ebe6e2",
"wed", "#dce1e2",
"thu", "#e0e2dc",
"fri", "#e2e7d8",
"sat", "#e2e0dc"
);

上の例では、最初のところで壁紙を指定。次の表のようになっているところが、壁紙に合わせた背景色その１、下が背景色その２、です。数値は実際に使う壁紙に合わせて HTML で色指定するのと同じように書きます。このデータを入れておいたあとで、

$BDcolor = $daycolor1{$today};

と書くと背景色１のきょうの設定色が $BDcolor に入ります。色を使いたい場所を考えて、そこからスクリプトのすこし後のところにある、背景色やテーブルの色などの色設定にきょうの色を指定します。

背景用画像は上の例では JPEG ファイルで、（GIF でもスクリプトの拡張子のところを入れ替えるだけ）、sun.jpg, mon.jpg, tue.jpg, wed.jpg, thu.jpg, fri.jpg, sat,jpg の７種類を用意し、スクリプトのあるフォルダに入れておきます。

テーブル表示その他は変更なしで、背景画像だけ日替りにするなら、色データのリストはいりません。もとの設定を生かしたままで、上のコードの最初の 2 行だけ追加して、背景画像のセットといっしょに使ってください。

さらに、上にあるようにお絵かきアプレットの表示に picture2.cgi を使っている場合、こちらも連動して日替りの表示にすることができます。お絵かきアプレットそのものの枠線やボタンの色も色指定できるので、ここも連動させたほうがきれいです。しかし、アプレットの色指定のところでは、色を「#」なしの 6 桁の英数字で指定しなければならないので、最初にデータとして入れておくところは「#」抜きにしておきます。ですから、データ表はこんなふうに書きます。（合わせて使うふたつのスクリプトのデータの統一を取りたいときは、こっちの形式に合わせるのがわかりやすいと思います。上のほうに合わせて「#」をカットするとかそんなのもありますけど。）

%daycolor1 = (
"sun", "cacac8",
"mon", "c5cfcb",
"tue", "bdb7b0",
"wed", "bec8c9",
"thu", "c2c2bd",
"fri", "bec6b7",
"sat", "bfbbb5"
);

これを各パーツの色として変数にセットするとき、アプレットのパラメータならそのままでいいのですが、地の HTML 部分については下の 2 行目のように「#」を追加します。アプレットの色設定に使う色は、新しく変数を作って使います。下の例では「$baseC」。

$baseC = $daycolor1{$today};
$BDcolor= '#' . $daycolor2{$today};

アプレットの色指定は、パラメータのリストにこんなふうに追加します。

<param name="baseC" value="$baseC">
<param name="baseC2" value="$baseC2">

改造などで失敗してだいじなデータをなくしたりしないように、じゅうぶん気をつけてください。改造は自己責任です。

2002/10/26 - pre タグの使用やめ。日替り解説を追加。

(Last Modified: 2002/10/26)
    もどるreturn
 home