27. サイト移転5： Joyful Note改造の続き

●参考にしたスプリクトやウェブサイトはページ下部にリンク。

　さて、CGI掲示板がひと息ついたので、それ以外のページ移転作業に入る。この機会にHTML4からHTML5へ書き換えようと思う。
　・・・果てた。確かにHTML5の方がコードがシンプルでわかりやすい。しかし廃止された要素とかもあり、200ページ以上をページごとにチェックしながら直していくのは疲れた。過去の人物写真はなるべく小さくトリミングもしたし。まあそんなでも2020年12月30日に、ようやくウェブサイト全体を新天地のXREA（エクスリア）へと移転した。暮れの忙しい時期に何やってんだと思わない事もなかったが。（移転後もHTML5への書き換えは細々と続け、すべて終わったのは2021年２月だった）

　サイト移転が済んだからには、残っている課題、RSS出力の作業を再開する。

8.　RSS配信については、KENTさんのTopics BoardがRSS付きである事に気付き、それを参考に。ただTopics Boardにレス機能は無いため、Joyful Noteに組み込むとレス記事（返信記事）を投稿した際には上手くいかないので、新規投稿の場合にのみRSS出力とした。
　RSS配信用のindex.xmlファイルを新規で作って、joyful.cgiと同じ階層に置く。中身は白紙で良い、パーミッションは606。
　init.cgiに、RSSの指定を入れる。

# -------- RSSフィード用：追加
# RSSを生成する（0=no 1=yes）：追加
$cf{rss_make} = 1;

#RSSの表示件数（好みの件数で）
$cf{rss_max} = 3;

# 掲示板説明文（RSS用に定義）
$cf{description} = '掲示板の新着情報';

# 掲示板のURLパス（フルパスで定義）
$cf{topiurl} = 'ここに掲示板のURLを入力';

# RSSのURLパス（フルパスで定義）
# 例 $cf{rssurl} = 'http://www.example.com/bbs/index.xml';
$cf{rssurl} = 'ここに入力';

# RSSのサーバパス（joyful.cgiから見た位置）
$cf{rssfile} = './index.xml';
# --------- /RSSフィード用 

regist.cgiの適当なところに以下を加える。

#-----------------------------------------------------------
#  RSS2.0 作成
#-----------------------------------------------------------
sub make_rss {
    my @data = @_;
    
    # RSS
    my $rss = <<EOM;
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
    <channel>
        <title>$cf{bbs_title}</title>
        <link>$cf{topiurl}</link>
        <description>$cf{description}</description>
        <language>ja</language>
        <generator>$cf{version}</generator>
EOM
    
    my $kazu = $cf{rss_max};
    my $r;
    
    for (@data[1..$kazu]) {
        my ($no,$reno,$date,$name,$eml,$sub,$com,$url,$host,$pw,$col,$ext,$w,$h,$chk) = split(/<>/);
        
        # 文字カット: description
        my $char = strcutbytes_utf8($com,150);
        
        $rss .= qq|\t\t<item>\n|;
        $rss .= qq|\t\t\t<title>$sub</title>\n|;
        $rss .= qq|\t\t\t<link>$cf{rssurl}\#$no</link>\n|;
        $rss .= qq|\t\t\t<description>$char</description>\n|;
        $rss .= qq|\t\t\t<pubDate>$date</pubDate>\n|;
        $rss .= qq|\t\t</item>\n|;
        
        $r;
        last if ($r >= $cf{rss_max});
    }
    $rss .= "\t</channel>\n</rss>\n";
    
    # RSS書込
    open(RSS,"> $cf{rssfile}") or error("write err: $cf{rssfile}");
    print RSS $rss;
    close(RSS);
}

またRSS出力の際にコメント文字数を一定の長さにするため、TOPICS BOARDのadmin.cgiの842行目あたりの# 文字カット for UTF-8 のサブルーチンもそのまま追加する。

投稿記事受付内、188行目あたり# 更新の項 close(DAT); の後に

make_rss(@data) if ($cf{rss_make} == 1); 

を追加。
RSSのアイコンを表示させたいのなら、それ用のアイコンをcmnフォルダに入れ、joyful.cgiで、記事表示部の111行目あたり#テンプレート読み込みの項に以下を追加。

	if ($cf{rss_make} == 1) {
	$tmpl =~ s|<!-- rss -->|<a href="$cf{rssurl}"><img src="$cf{cmnurl}/rss.png" class="icon"></a>|;
	}

　そしてテンプレートのbbs.htmlの上部に<!-- rss -->と書き加えておけば、RSS出力先のindex.xmlへリンクの付いたアイコンが表示される。

　まあこれで新規投稿時にはRSS配信ができるようになった。
　で、仕上がった掲示板を見ていると、ふと思う。投稿の際に入力する暗証キー（ようはパスワード）、入力しても黒丸マークがでるだけで文字は見えない。入力ミスだってあるだろうし、入力した文字を表示できるようにしたら便利じゃないのかな？

9.　暗証キーを表示させる。
調べるとjavascript（ジャバスプリクト）でできるらしい。参考ページは見つかるが、それをどう掲示板に組み込めばいいんだ？ javascript・・私にはPerlよりも馴染みが無い。
参考ページを見ながら、新規投稿の方はそう悩まずにできた。テンプレートとbbs.jsに書き加えればいいのか。
掲示板トップ画面および、トピック画面からの新規投稿の暗証キーを表示させるのは、cmn/bbs.jsに以下を追加。

function pushHide() {
		var txtPass = document.getElementById("textPass");
		var btnPass = document.getElementById("buttonP");
		txtPass.style.paddingtop='10px';
		btnPass.style.paddingtop='10px';
		if (txtPass.type === "text") {
		txtPass.type = "password";
		btnPass.value = "暗証キーを表示";
		} else {
		txtPass.type = "text";
		btnPass.value = " 非表示にする  ";
		}
		}

で、bbs.htmlやtopic.htmlの新規投稿部分の暗証キーの

<input type="password" name="pwd" class="reg-num" maxlength="8">

の部分を以下に変える。

<input type="password" id="textPass" name="pwd" class="pass">
<input type="button" id="buttonP" value="暗証キーを表示" onclick="pushHide();"><br>

　しかし、掲載された親記事やレス記事の修正・削除の時に悩む。ウンウンうなって試してみるが、上手く行かない。ここは息子にヘルプしてもらう。前回、私がエラーで唸っていた頃「私はPerlは知らないからなぁ」と横で眺めていた息子だが、javascriptなら助け舟を出せる。ねー、ここをこうしたんいんだけど。
　んー、と私の示した参考記事を眺め、私の失敗したjsコードを見ながら「これはこの２行はいらないよ。この１行で・・など言いながらjsコードを修正してくれた。
jsファイルに追加。

function getId(ele){
	var bota = ele.id;
	var ban="ban"+bota.substr(4);
	var txtPass = document.getElementById(ban);
	var btnPass = document.getElementById(bota);
	if (txtPass.type === "text") {
		txtPass.type = "password";
		btnPass.value = "キーを表示";
	} else {
		txtPass.type = "text";
		btnPass.value = "キーを非表示";
	}
}

bbs.htmlのループ部分、前回で追加したところ、

<input type="hidden" name="no" value="!num!">
暗証キー <input type="password" name="pwd" size="4" maxlength="8">
<input type="submit" value="送信">

これを以下に変える。res.htmlについても同じ。

<input type="password" id="ban!num!" class="bango" name="pwd"><br>
<input type="button" id="bota!num!" class="botan" value="キーを表示" onclick="getId(this);">

　できた！ 息子よ、ありがとー！ 彼が大学生の時はWEB課題で簡単なCSSでつまづいていた時に私が教えたけど、今や私が教わる立場である。
キー入力欄のサイズについてはCSSで指定してほしい。

　そんなこんなで、なんとか改造終了。テストのためのローカル環境の掲示板のアクセスカウンターは900を超えてた。つまり私の試行回数。ちょっといじっては確認し、エラーしては直し、を繰り返すとそんな回数になってしまうわけだ。

そんなこんなで仕上がった はこちら
　スパムよけのため、aタグの直リンクでなくjavascriptリンクにしている。

　しかしこれで終わりにならなかった。十数年ぶりにスパム投稿が来た。
（まだ続くのか）

2021.3.23追記：気づいた。過去ログの親記事は文字色が黒だが、レス記事は指定文字色になってる。オリジナルを確認すると、

#過去ログ画面 の713行目あたり$restmpl;（レス記事）
$tmp =~ s/!comment!/<span style="color:$col[$col]">$com<\/span>/g;

723行目あたり$loop;（親記事）
$tmp =~ s/!comment!/$com/g;

となっていた。レス記事のみ文字色が指定されている形。
私は今までのログを合体させているので、以前の掲示板からの色味変更なども考え、$restmpl;の箇所を$loop;と同じにしてレス記事の色を抜いた。
逆に親記事にも文字色を残したいなら、ループ部分をレスループと同じようにすればいい。

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

【JavaScript】ボタンクリックでパスワードを表示・非表示を切り替える

　JavaScriptでidを取得する方法

　WEBサイト・ブログの為のHTMLソースコード変換

---