26. サイト移転4： Joyful Note改造

（2021.3.9）
　　●参考にしたスプリクトやWebサイトはページ下部に。

　もっと具体的に書いた方がいいのかなぁと思って、コードを追記。３月12日

　さて、ローカル環境が整ったので、これで思う存分「エラー」がでても気にせずに掲示板プログラムを改造できる。いや、エラー出したいわけじゃないけど。
　まずはローカル環境にオリジナルのJoyful Noteを設置する。初投稿が2020年10月12日で、色々書き込みテストで問題ないのを確認してから改造に入る。モバイルファーストという時勢のため、CSSはモバイル表示を先に書き換えた。また掲示板表示画面はテンプレート式なので、レイアウトはHTMLを自分の好みに変える。
　そしてCGIの改造。私はPerlの知識なんてほぼ無い。今までだってせいぜいレイアウト変えたりした程度。CGIの記述の意味がわからないから、ネットの検索でひたすら調べてなんとなくアタリを付けて書いたりする程度。人様の作ったスプリクトをチョロチョロいじるのが精一杯。Perlチートシートなんてものを見つけて、プリントアウトしてスプリクトを必死に解読するとか。

　当然、今回も検索するのだが、出てくる結果は古い。改造のベースのバージョンが古くて有益ではない。古いバージョンではファイル構成が違うのだ。全盛期（ひと昔以上だよね）と違い、今時はCGI掲示板をわざわざ設置しようなんて思う人は少ないから、当然新しい情報も少ない。
　そして社会人１年目の息子はシステムエンジニアの卵だが、Javaとjavascriptしか分からない。あ、あと卒業制作で使ったSwiftかな。
　それでも可能性を信じて、ひたすら単語を変えて検索し、Joyful Noteの改造版をダウンロード。スプリクトを開いて参考になりそうな部分を探し出す。

　Joyful Note7.2の改造。やりたかったのは、
1. カウンタ付けたい
2. 留意事項をポップアップではなくしたい。ファイルの最大投稿サイズをバイト表示ではなく、MB表示にしたい
3. 新規書き込みを、普段は閉じた状態にしたい
4. 記事ごとに修正・削除ボタンを付けたい
5. レス記事にも返信ボタンを付けたい
6. メールアドレスを名前じゃなくてアイコンへのリンクにしたい
7. 過去ログでも添付ファイルを表示したい
8. RSSを付けたい
　ざっと書けば、こんな所。

1.　Joyful Noteは、アクセスカウンタが無かった。以前はあったようだが、廃止されたよう。YY-BOARDの方はカウンタがついていたので、それを参考にinit.cgiとjoyful.cgiに書き加えるので簡単。後はカウンタ付けたいテンプレートのbss.htmlに記述加えるだけ。

2.　留意事項、は言葉が堅いので「使い方」にする。またポップアップウィンドウで開く形だとブラウザ側で拒否設定にしている場合があるから、テンプレートのbbs.htmlの記述を変えて通常リンクにする。
ファイルの最大投稿サイズ、単位がバイトでは感覚的に分かりづらいのでMB（メガバイト）表示に。 joyful.cgiの留意事項表示504行目あたり close(IN); の後に、 
my $size;
	$size = ($cf{maxdata} / 1048576) . 'MB';
	$tmpl =~ s/!maxdata!/$size/g;
なお、その下のバイト表示は#でコメントアウトしておく。
# $tmpl =~ s/!maxdata!/$cf{maxdata}バイト/g;
バイト数をMB分の1048576（1024バイト=1KB、1024KB=1MB、だから1024×1024=1048576が1MB）で割った変数を指定してるわけです。これはTRANSFORMさんのJoyful Note v 7.21 PLUSを参考にさせていただいた。

3.　私以外で書き込む人なんて滅多に無いので、新規書き込みフォームはボタンクリックで開くようにした。これはオリジナルのトピック表示の際の形を参考にする。

4.　オリジナルはページ下部に記事Noを入力して修正・削除する形だが、これを利用して各記事ごとにそのボタンを付ける。bbs.htmlの記事No入力の部分を各記事のNoを代入する形にすればいいのでは？と思い、
オリジナルの
<form action="!regist_cgi!" method="post">
処理 <select name="mode">
<option value="log_edit">修正</option>
<option value="log_dele">削除</option>
</select>
記事No <input type="text" name="no" size="3" style="ime-mode:inactive">
暗証キー <input type="password" name="pwd" size="4" maxlength="8">
<input type="submit" value="送信">
</form>
６行目を、 
<input type="hidden" name="no" value="!num!">
とし、 <!-- loop --> から <!-- /loop --> までの間の希望する所に入れる。そして上記コードで指定したregist.cgiを認識させるために、joyful.cgiの記事表示部、189行目あたりmy $tmp = $loop; 以下に
$tmp =~ s/!regist_cgi!/$cf{regist_cgi}/g;
を追加しておく。
レス記事についてもres.htmlを同様にする。joyful.cgiは175行目あたりの
my $tmp = $resloop; 以下。 なお過去ログにはこの編集ボタンは不要なので、新たにpast_res.htmlを作り、それをpast.html内で読み込む形にする。joyful.cgiの#過去ログ画面、675行目あたり、
open(IN,"$cf{tmpldir}/res.html") or error("open err: res.html");
を、
open(IN,"$cf{tmpldir}/past_res.html") or error("open err: past_res.html");
と、すれば良い。

5.　レス記事にも返信ボタンを付けたい、と思う。思うが、これは上手くいかなかった。ずいぶん試してみたが、どうやら私にはお手上げで、あきらめた。

6.　メールアドレスをURLのようにアイコンへのリンクにした。フリー画像のアイコンを使ってみたが、のちにスパム書き込みがあった事で今後スパムメールが来る可能性を考え、メール表示は削除する。（これについては後日）

7.　オリジナルでは過去ログは添付ファイルが削除される。おそらくはデータが膨大になる事を憂慮しての事だろう。が、私は残したかった。どうせ、たいして量が増えると思わないし。とりあえずregist.cgiの101行目あたり、添付ファイル削除の項を#でコメントアウトする。
# 添付ファイル削除
#    if ($ex2) {
#    unlink("$cf{imgdir}/$no2$ex2") if ($ex2);
#    unlink("$cf{imgdir}/$no2-s$ex2") if ($ex2 && -f "$cf{imgdir}/$no2-s$ex2");
#    }
 　オリジナルの現行ログでの表示方法を移植して色々試したが、エラーばかり。他の手はと、掛け軸掲示板さんのkakejiku.cgiでの過去ログ画面を参考にさせていただいた。
joyful.cgiの過去ログ画面647行目あたり
$res{$reno} .= "$no<>$reno<>$date<>$nam<>$eml<>$sub<>$com<>$url<>$col\0";
を、 
  $res{$reno} .= "$no<>$reno<>$date<>$nam<>$eml<>$sub<>$com<>$url<>$hos<>$pw<>$col<>$ext<>$w<>$h<>$chk<>\0";
と、する。
同じく710行目あたり
my ($no,$reno,$date,$nam,$eml,$sub,$com,$url,$col) = split(/<>/, $log);
を、
my ($no,$reno,$date,$nam,$eml,$sub,$com,$url,$hos,$pw,$col,$ext,$w,$h,$chk) = split(/<>/, $log);
また表示形式は、オリジナルjoyful.cgiの添付リンクの項を参考にする。
joyful.cgiの過去ログ画面、706行と717行あたりにある
$url = qq|<a href="$url" target="_blank"><img src="$cf{cmnurl}/home.png" class="icon" alt="Home"></a>| if ($url);
の後に、それぞれ以下を加える。 
my $w_att;
        if ($ext =~ /(jpg|png|gif)/) {  #画像の時
            $w_att .=  "<img src=\"$cf{imgurl}/$no-s$ext\"><br>";
            }    
        elsif ($ext =~ /pdf/) {  #画像以外の時
			my $size = -s "$cf{imgdir}/$no$ext" || 0;
			my $msize = sprintf ("%.1f", $size / 1048576).' MB';
			my $ksize = sprintf ("%.1f", $size / 1024) .' KB';
		if ($size > 1048576) {$w_att .= qq|<p><b>[<a href="$cf{imgurl}/$no$ext" target="_blank">添付ファイル：PDF</a>] $msize</b></p>|;}
		else {
			$w_att .= qq|<p><b>[<a href="$cf{imgurl}/$no$ext" target="_blank">添付ファイル：PDF</a>] $ksize</b></p>|;
        }
    }
自分が使用する上で画像は３種、テキストはPDFのみなので、上記のようになっている。
その後に添付ファイルを表示するために、追加後にある
my $tmp = $restmpl; と
my $tmp = $loop; に、
$tmp =~ s/!w_att!/$w_att/g;
を加える。
そしてpast.htmlと、4.で作っておいたpast_res.htmlの !comment! の後あたりに
!w_att!
を書き加える。
ローカルでテストしては直し、の繰り返しで上記のように落ち着いた。
　結局ローカルで過去ログの添付ファイル表示に成功したのは11月10日だった。
（さらっと書いたが、実際にはエラー、エラーで、ぐわああああっ！とわめきながら、ブツブツとあそこをこうすれば・・なんてつぶやきながら、ほぼ家事は最低限でやってた）

　とりあえず、ここまででWeb上にテスト掲示板を作り、運用してみる。文章の読みやすさなどline-heightやpadding等、CSSも変えてみる。問題なさそうなので本番の掲示板を設置し、以前のログを読み込ませ、初投稿が11月27日。ローカルでの初投稿からひと月半か。
（もっと効率のいい方法があるんじゃないかと思うが、私にはこれで精一杯だ。はっきり言って自分でコードを晒すなんて非常に恥ずかしい。ど素人なのに。このページ書くのにcodeタグなんて、初めて使ったわ。つーか、codeタグの存在自体、知らなかったし）

　RSSについては参考になりそうなものが見つからず、ひとまず後に置いとこう、というわけでその後は掲示板以外のウェブサイトのページを移転させる事に集中する。
（まだ続くが、結果の はこちら。
スパム対策のため、aタグでなく、javascriptでリンクしている）

ありがたく参考にさせていただいた
　Kent Web さんの Joyful Note

　TRANSFORM さんの Joyful Note v 7.21 PLUS

　
　　これもjavascriptでリンクしている。


おもちゃ箱top
←前へ　　　次へ→