CafeLogにタイトル一覧表示を追加(3)
CafeLogの作者の運営するKENT-WEBサイトより。『KENT-WEBはCGI/Perlプログラムを無料で配布する日本最大のサイトです。累計ダウンロード数は380,535,654回。』
その内訳が下図。




やはり掲示板が人気で、ブログをCGIで運用しようとする人はまだ少ないようですね。
もっとも、週間のダウンロードランキングは下記の通りですので、cafeLogが2位、累計では最下位に近くにいたSmartBlogが15位とそれぞれ躍進しています。
CGIの人気が掲示板からブログに移ってきているのですかね。


LinkViewerは累計のダウンロード数は68000弱でCafeLogの3.5倍程度です。意外に多いなぁと思いました。「意外に」という理由は、LinkViewerは10年位前に最後のアップデートがされて、その後まったく手が入っていないらです。CafeLogは今年に入ってもイメージファイルのアップデートに関する機能追加がされています。

実は僕の使っている二つのサーバー環境(AwardSpaceとSakura)で、LinkViewerはそのままでは動きませんでした。お約束の
①パーミッションの指定
②冒頭の行でのperlの在り処の指定
は当然行っていますが、こういうエラーになります。


このエラー上記の①や②をうっかり忘れた時に発生すると承知していましたが、今回は心当たりがありません。さらに不思議なのは LinkViewerの機能拡張版のCOSMO_NAVIも試していたのですが、こちらは問題無く動く。
「差は何だろうか ? 」と思案しました。
COSMO_NAVIの紹介のコメント欄に『スマホ画面に対応したレスポンシブデザイン対応です。』とありました。LinkViewerは見るからに古い画面デザインですから、レスポンシブ対応以前の古いCGIのようです。試しにCGIプログラムソースの文字コードを確認したら、COSMO_NAVIはUTF-8、LinkViewerはS-JISでした。どうもこれが怪しそうだなと考え、LinkViewerの文字コードをUTF-8に変更してみました(ついでに改行コードもLinuxスタイルに)。
やり方は使っているエディター次第ですが、例えばサクラエディターならこんな具合です。




動きました。しかし、まだ奇怪しい。
admin.cgiを起動して表示されるパスワードの入力画面です。


続いて、admin.cgiのデータの処理画面。


完全に文字化けしていますね。ただ、こちらはHTMLのmeta指定がs-jisになっているようだなと推測がつきます。
admin.cgiの一番最後に置かれているHTMLヘッダー作成の関数をチェック。
#-----------------------------------------------------------

# HTMLヘッダー
#-----------------------------------------------------------
sub header {
my $ttl = shift;

print "Content-type: text/html\n\n";
print <<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">

やっぱりs-jisになっていました。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


と変更しました。

何故cgiの文字コードがs-jisだと500番のエラーになるのかの理由は不明です。「レスポンシブ対応でないCGIは動かしてやらない」なんていう変なサーバーがあるとは思えません。
ググってみると「.htaccessでAddDefaultCharset shift_jisを指定すればOK」というような記述がありましたが、これは逆にUTF-8がディフォルトのCafeLogなどを動かすのに問題となりそうです。結局、LinkViewerをUTF-8対応させるしかなさそうです。
まあ、何とか問題は解決しましたが、その後のCGIの変更より、この動かすまでの方が大変でしたね(^^;;;。

「cgi s-jis 動かない 500」で検索してみました。要するにshift_jisは古く、10年位前からUTF-8が標準の世界に変わってしまったということは分かるが、何故shift_jisだとperlのCGIが動かないのかは不明ですね。今回、悪戦苦闘する中、参考にしたサイトをご紹介しておきます。

2021年に、CGIの文字コードのお話を(Shift-JISのCGIが文字化け)
kent QA
さくらサーバーで枯れたCGIを動かそうとするも500エラー
VPSでShift-jisなどのCGIが文字化けする場合にチェックするべきところ
Fedoraで自宅サーバー構築 CGIの文字コードについて
2023.10.30 00:20 | pmlink.png 固定リンク | folder.png ソフトウェア
CafeLogにタイトル一覧表示を追加(2)
以下のperlのコードは前回の最後に紹介したBingAIのソースコードをベースに作成したものです。
#!/usr/bin/perl
use strict;
use warnings;
my $filename = './award/cafe/admin/data/page.dat';
my $filename1 = './award/linkv/data/log.cgi';

open (FILE, $filename) or die "Can't open $filename";
my @buffers = ;
my $lines = @buffers;
close FILE;

open(IN, "<$filename") or die "Could not open file '$filename'";
open(OUT, ">$filename1") or die "Could not open file '$filename1'";
my $head = 0;

while (my $row = ) {
# 入力データを一行読み込む
chomp $row;
# タブで分割する
my @fields = split /\t/, $row;
# 番号0, 日時A, タイトルを取り出す
my ($num, $date_a, $title) = @fields[0, 1, 3];
# 日時Aを年.月.日の形式から年月日の形式に変換する
my $date_b = $date_a;
$date_b =~ s/\.//g;
# 日時Aを年.月.日の形式から年,月,日の形式に変換する
my $date_c = $date_a;
$date_c =~ s/\./,/g;
# 変換後のデータを出力する
if ($head == 0) {
print OUT "$num<>admin<>$lines\n";
# print "$num<>admin<>$lines\n";
$head = 1;
}
print OUT "$num<>0<>$title<>http://mimizukobo.atwebpages.com/archives/day/$date_b-1.html<>$date_a<><><><>$date_c<>\n";
# print "$num<>0<>$title<>http://mimizukobo.atwebpages.com/archives/day/$date_b-1.html<>$date_a<><><><>$date_c<>\n";
}
close(IN);
close(OUT);


コメント行を入れて40行弱。ヘッダー部分の編集はもっと手抜きできますので、20行強のプログラムを走らせれば、LinkViewを使ってCafelogにタイトル一覧表示させることが出来ます。
プログラムはCafeLogの出力するpage.datを読み込み、その内容を編集し、ListViewerがタイトル一覧を編集出力するためのデータファイル(log.cgi)自動的に作成しています。
Perlを使えば、編集そのものは数行で済みますので、楽ですね。

テンプレートファイルを編集すると、こんな感じでタイトル一覧が表示されます。


このプログラム、次のような指示書によりBingAIが出力したものです。
perlを使い、
番号0\t日時A\t時刻\tタイトル\t数字\tカテゴリ数字\t数字\t数字\t\nとなっているデータを一行単位に読み取り、
番号<>0<>タイトル<>http://mimizukobo.atwebpages.com/archives/day/日時B-1.html<>日時A<><><><>日時C<>\n
という具合に変換し、印字するプログラムを作成して下さい。
日時Aは年.月.日
日時Bは年月日(20230101という具合に年月日の数字をくっつけて、区切りの/は無し)
日時Cは年,月,日
とします。
また、先頭には読み取った一行を使い
番号0<>admin<>番号0\n
という行を追加して下さい。


この位に丁寧な説明だと、BingAIでもperlプログラミングしてくれます。perlに慣れている人だと「自分でプログラミングした方が速いよ」といわれそうですね。また、前回書いたように完全なコードではありません。上記例のようにWhileループを補ってやる必要があります。
僕の場合はPerlには慣れていないので、インタネットでサンプル捜しし、適当に修正する手間が省けるので、助かりました。

データファイル(log.cgi)のhtml(listv.html)出力はadmin.cgiを使い、行います。
admin.cgiを起動すると次のような画面が表示されます。


最新の記事を選び、プルダウンメニューで「修正」を選び、実行(送信する)。


修正用の画面が表示されますので、そのまま「送信する」させます。
これで最新のタイトル一覧画面用のHTMLが生成され、表示できるようになります。

この方法はListViewer側のCGIの変更は不要で、上記のperlスクリプトをWindows環境で実行させるだけです。簡単でいいのですが、サイトで更新されたpage.datをダウンロードし、スクリプトが変換したlog.cgiをサイトにアップロードする必要があるなど多少手間がかかります。

という訳で、admin.cgiに上記のコードを追加すれば、楽を出来そうなので、やってみることにしました。「実行」というプルダウンメニューを用意し、クリックすればHTMLが生成されるという方式にしました。


このため、admin.cgiに手を入れた内容です。

最初の関数 sub admin_mode の判定分岐部分の最後に以下を追加。
# 実行
} elsif ($in{job} eq "exec") {
my $filename = 'page.dat';
open(IN,"<../admin/data/$filename") or &error("open err: '$filename'");
open(DAT,"> $cf{logfile}") or &error("open err: $cf{logfile}");
my $headerkey = 0;
while (my $row = ) {
chomp $row;
my @fields = split("\t", $row);
my $dateA = $fields[1];
my $dateB = $dateA;
$dateB =~ s/\.//g;
my $dateC = $dateA;
$dateC =~ s/\./,/g;
my $url = "http://mimizukobo.atwebpages.com/archives/day/$dateB-1.html";
my $cate = 7 - $fields[5];
if ($headerkey == 0) {
my $num = $fields[0];
my $new_row1 = "$num<>admin<>$num\n";
print DAT "$new_row1";
$headerkey = 1;
}
my $num1 = 7 - $fields[5];
my $new_row = "$fields[0]<>$num1<>$fields[3]<>$url<>$dateA<><><><>$dateC<>\n";
print DAT "$new_row";
}
close(IN);
close(DAT);

# 日付取得
my ($date,$time,$mark) = &get_time;
# データ読み込み
my (@data,%data,%cate);
open(DAT,"+< $cf{logfile}") or &error("open err: $cf{logfile}");
eval "flock(DAT, 2);";
my $top = ;
while() {
chomp;
my ($no,$cate,$sub,$url,$com,$date,$time,$host,$mk) = split(/<>/);
$mk ||= '2000,01,01';
push(@data,"$_\n");
$data{$cate} .= "$sub<>$url<>$com<>$mk\t";
# カテゴリデータ認識
$cate{$cate}++;
}

chomp($top);
my ($num, $ip, $all) = split(/<>/, $top);
my $all = @data;
# マスタデータ更新
unshift(@data,"$num<>$ip<>$all<>\n");
seek(DAT, 0, 0);
print DAT @data;
truncate(DAT, tell(DAT));
close(DAT);

# HTML更新
&renew_html(\%data,\%cate,$all,$date);
}

前半部分は最初に紹介したスクリプトを簡略化したもの。後半部分はHTML更新を行うための関数を呼び出すためのデータを生成しています(こちらは削除処理のコードをほとんどそのまま流用)。

直後の管理画面のプルダウンメニューを次の通り変更します。
if (!$cf{reg_type}) {
print qq|


あと、これ以外にJcodeを呼び出す部分(4箇所)をコメントアウトしています。修正機能を使わなければ不要ですが、一応対応しました。
実はこの日本語コードの問題が今回の対応で一番手こずりました。詳しくは次回に。
CafeLogにタイトル一覧表示を追加(1)
今、このブログをパソコンでご覧の方は、画面の右側、プロフィールの上に「記事一覧」というリンクが登場したことに、気づかれたかもしれません(スマホの場合は記事が終わったあとのサイトの紹介部分に表示されます)。
「レコ芸難民のためのリンク集」の作成中に、CafeLogのソースコードを眺め、記事のタイトル一覧を作れないかなと考えました。
CafeLogの作者が公開しているLinkViewというリンク管理用のCGIを使って簡単に出来ましたので、何回かに分け、ご紹介します。

旧みみず工房では、タイトル一覧をRubyスクリプリトで自作したので、好きなように設定出来ました。



こんな感じですね。

CafeLogにはタイトル一覧を表示する機能はありません。
既成のスクリプトなので、CGIを改造し、機能追加する必要があります。

CafeLogの場合、html生成用の出力定義ファイル(index.dat、page.dat)を使い、プログラミングすれば、同じようなことが出来そうです。テンプレートファイルを用意し、定義ファイルからタイトル一覧htmlを自動生成することになります。
同様の処理をするCGIを捜せば、手抜きすることが出来ると考えました(^^;;;。kentさんのサイトを捜してみたら、LinkVisorというリンク集を作成するCGIがありました。


このCGIは、ご覧のように、画面上部のボックスに入力されたリンクデータを、自動的に、画面下部のリンク一覧として、作成(追加)するためものです。リンクデータはカテゴリ別に分類することが出来ます。
みみず工房のタイトル一覧としては入力側の機能は不要ですが、リンク一覧を作成する出力側の機能はそのまま使えそうです。
ご覧のように上部分を削除し、下部のみ残せばカテゴリ別のタイトル一覧となります。まさに手抜きの目的通りです。これは使えるかなと考え、早速、中身をチェック。


ListVisorのルートディクトリーです。
LinkVisorはCafeLogと同じようにデータファイルからテンプレートファイルを編集して、linlv.htmlとして出力し、表示させるという方式をとっています。この方式はhtmlが表示される度に、毎回CGIが走ることがないので、ホストの負荷を下げるには有効ですね。
admin.cgiとlinkv.cgiがテキストボックスからの入力を受け、リンクデータを編集し、画面下部に出力するためのcgiです。linkv.cgiは誰でもリンクを登録出来るようにするためのもので、設定を訪問者が登録可能とした場合のみ有効になります。初期時のフォームの設定は設定は次の通りでした。
<form action="./linkv.cgi" method="post">


では、管理者のみ指定した場合どうなるか。
admin.cgiが動くようです。リンク集リストの出力など共通の処理はinit.cgiにまとめられています。

admin.cgiの中を見てみました。分かりやすい作りとなっていて、リンクの編集はdata_addという関数で処理しているようです。log.cgi(リストデータです)を読み込んで、リンク用htmlを吐き出しているだけ。
ということは、このlog.cgiを作り出してやれば、ほとんどcgiを弄ることなしに処理出来そうです。


これは、CafeLog(ブログ用のCGI)のデータディレクトリーです。index.datとpage.datを使えば、100%、リンクを復元出来そうです。

00016 2023.09.08 14:32 『レコ芸』難民のためのリンク集 1 6 0 1
00014 2023.09.04 18:43 『レコ芸』難民のために 2 1 7 0 1
00013 2023.08.20 21:03 トゥーランドット 1 7 0 1
00012 2023.07.07 14:58 『レコ芸』難民(^^;;;のために 1 7 0 1
・・・・・

これがpage.dat。

00003 top:page-5.html cat:2-1.html day:20230402-1.html mon:202304-2.html
00005 top:page-4.html cat:7-2.html day:20230406-1.html mon:202304-1.html
00013 top:index.html cat:7-1.html day:20230820-1.html mon:202308-1.html
00009 top:page-3.html cat:6-1.html day:20230508-1.html mon:202305-1.html
・・・・・

これがindex.dat。

変換後のlog.cgiはこんな形です。
00016<>admin<>15<>
00016<>1<>『レコ芸』難民のためのリンク集<>http://mimizukobo.atwebpages.com/archives/day/20230908-1.html<>2023.09.08<><><><>2023,09,08<>
00014<>0<>『レコ芸』難民のために 2<>http://mimizukobo.atwebpages.com/archives/day/20230904-1.html<>2023.09.04<><><><>2023,09,04<>
00013<>0<>トゥーランドット<>http://mimizukobo.atwebpages.com/archives/day/20230820-1.html<>2023.08.20<><><><>2023,08,20<>
00012<>0<>『レコ芸』難民(^^;;;のために<>http://mimizukobo.atwebpages.com/archives/day/20230707-1.html<>2023.07.07<><><><>2023,07,07<>


BingAIを利用したら、簡単に出来ました。
#!/usr/bin/perl

#!/usr/bin/perl
use strict;
use warnings;

# 入力データを一行読み込む
my $line = ;
chomp $line;

# タブで分割する
my @fields = split /\t/, $line;

# 番号0, 日時A, タイトルを取り出す
my ($num, $date_a, $title) = @fields[0, 1, 3];

# 日時Aを年.月.日の形式から年月日の形式に変換する
my $date_b = $date_a;
$date_b =~ s/\.//g;

# 日時Aを年.月.日の形式から年,月,日の形式に変換する
my $date_c = $date_a;
$date_c =~ s/\./,/g;

# 変換後のデータを出力する
print "$num<>admin<>$num\n";
print "$num<>0<>$title<>http://mimizukobo.atwebpages.com/archives/day/$date_b-1.html<>$date_a<><><><>$date_c<>\n";


そのままでは使えませんが、多少変更したら、上手く動くようになりました。動かすのに苦労したのは日本語の文字コードの取り扱いです。Perlプログラミング部分は楽をできました。『バカとAIは使いよう』ですね。

詳細は次回以降、ご紹介します。
2023.09.23 03:45 | pmlink.png 固定リンク | folder.png ソフトウェア
『レコ芸』難民のためのリンク集
前回、『このブログのサイド画面トップに「レコ芸難民救済のためのリンク集」作ってみますかね(^^;;;(^^;;;(^^;;;。』と書きましたが、案外簡単に出来ました(^^)。



パソコンやタブレットの横幅の大きい画面でご覧の方は画面の左上に同じものが表示されていると思います。
スマホでは最新の記事が三つ続いた後にパソコンのサイド画面が表示されます。まあ、3記事分スクロールさせるのは大変ですので、スマホの場合は、リンクをお気に入りのアイコンに変え、画面のどこかに置くという方法が賢明です。

今年の3月から、みみず工房の記事ページをブログ形式に変え、トップ画面にするよう変更しました。
この時、既成のプログサービスを行うサービスの使用も検討しましたが、「自由が効かないのはいやだな」と考え、kentさんのブログページ作成用CGIを使ううことにしました。「いざとなれば、CGIを変更すれば、自由に変えられる」と考えたからです。

というわけで、初めて「自由に変えられる」かどうか確認するチャンスとなりました。
使っているCGIはCafeLogというものです。ブログとしての標準的機能は十分であり、パソコンとスマホの両方に表示可能なレスポンシブ対応されいます。CGIとしてのソースは全て公開されていますから、自由に編集することが可能です。画面(HTML)とCSSがテンプレート式であり、簡単な修正であれば、このテンプレートを修正するだけで対応できます。

今回はこの方法で対応しました。


これがテンプレートの在り処です。


今回はこのindex.htmlを修正するだけで対応できました。


これが修正部分です。<div class="sidebody">とあるのがサイド画面に表示するためのstyle sheetの指定。<!-- links -->という部分がcgiで設定しているリンクです。リンクは管理画面で自由に設定出来ます。従って、リンク先のサイトを容易に変更することが出来ます。
その下の<div class="side-ttl">旧サイトへのリンク</div>以下の部分は以前はCGIのリンクの機能を使って表示させていたのですが、上記変更に伴い、ダイレクトにサイド画面に書き込むよう変更しました。

「レコ芸難民のための」変更は以上の通りですが、HTMLの知識があれば簡単に出来る内容ですので、このCGIプログラムは便利ですね。作者のkentさんに感謝です。
Bing AI

Bing AIはチャットGPTの最新版のエンジン(GPT4)を使ったマイクソフト版のチャットAIです。

Bing AIとチャットGPT機能的はチャット部分のカスタマイズは多少違うらしいが、AI機能については同じGPT4を使っているので、AIとして見れば、同じです。もちろん、自己学習方法、個人情報保護、不正行為防止などの観点では、相違点はあるはずです。


「GPT4を使ったチャットGPTは有料ですが、Bing AIは無料です」ということなので、試してみました。利用にはマイクロソフトのIDが必要です。オープニング画面はこんな感じです。



実際の画面のやりとりはこんなスナップショットとなりますが、文字が見えにくいので、Copy&Pasteします。

最初に、前回の記事から、以下の文章の添削をお願いをしてみました。

ご覧のようにこの場面ではテルラムント側は赤、国王側は緑のガウンを着ています。このガウンですが、裏返すと色を変えることが出来ます。これが演出上の有力な武器として使われます。」を添削して下さい。


BingAIの回答です。

この文章は、日本語で書かれていますね。ご質問の意図が正確に理解できていないため、回答に不足があるかもしれません。もう少し詳しくお話しいただけますか?例えば、この文章は何に関するものでしょうか?


質問の背景を訊ねてくるとは。なかなかシッカリしていますね。
「いけシャアシャアと嘘をつく」という批判に応え、改良されたようです。
そこで、

オペラの演出です。


と教えてやる。
すると、

なるほど、オペラの演出についてのご質問ですね。この文章は、オペラ「ローエングリン」の演出についての説明だったようです。ご覧のように、この場面ではテルラムント側は赤、国王側は緑のガウンを着ています。このガウンは、裏返すと色を変えることができるため、演出上の有力な武器として使われます。12 このような演出は、オペラにおいてよく用いられる手法です。3


やりますね。立派。一回目では答えず、確認するための情報を得てから、添削を開始するあたりは賢明な振る舞いです。
こちらが「オペラの演出」と答えただけで、ローエングリンを推察したのも素晴らしい。クラシック音楽に精通しているのだねぇ。凄いものです。

添削結果も概ね妥当だと思います。文章の区切りの変更も添削後の方が良いと思います。また、「演出上の有力な武器」という表現はもっと平板な表現にされるかと予想していましたが、そのまま残して、その後に「このような演出は、オペラにおいてよく用いられる手法です。」と補ったのはなかなかの力量ですね。感心しました。
小文字の数字(12など)は参考にしたリンクを示しています。この内容も妥当でした。

使えると分かったので、次なる実験。フェークニュースを見破れるかどうかです。


これは最近、ツイッターで出回っている変な木の怪情報です。
僕の参加しているライングループでも、早速、情報通の方が投稿してくれました。
この情報の真偽をBingAIに聞いてみました。

マハメル(宝塔花)について教えて下さい。



「マハメル(宝塔花)」は、ヒマラヤのチベットに400年に一度咲くと言われる吉祥花で、開運招福の花として有名です1。花の形は、宝塔のような形をしていることから「宝塔花」とも呼ばれます2。

ただし、この話は都市伝説であり、実際には400年に一度咲くわけではないとされています2。また、この花が咲く場所や時期についても、諸説あるようです1。

以上、参考になれば幸いです。


というお答えでした。
リンク先はこちら。全部トイッター系の怪しげな情報ばかりですね。
アメバブログ
togetter
twitter

一方ライン仲間のチャットでは、こういう具合でした。

17:24 これは…怪しいようですね??ブログ掲載禁止??ですね、
17:26 この宝塔花(ほうとうか)、(ほんとうか?)
17:26 軽いオヤジギャグ??です。
17:29 オ?、さすが(さすが)ですね?


一番信用できそうなのは「この宝塔花(ほうとうか)、(ほんとうか?)」というオヤジギャグ。さすが日本のオヤジは凄い。楽々とフェーク情報を分析。鮮やかな手さばきで分析してみせてくれました。

フェークの次は、フェークのようだが、実は正しい情報。「宝塔花」で盛り上がった後の、ラインチャットでのやりとりです。

17:36 それでは真実を…今が満開です
17:36 画像
17:37 滋賀県のささき神社に咲く、なんじゃもんじゃの木です。


画像はこちら


BingAIに質問してみました。

なんじゃもんじゃの木とはなんじゃ。


「なんじゃもんじゃ」とは、特定の場所に生えている見慣れない立派な植物、怪木や珍木に対して地元の人々が付けた愛称で、特定の植物の種名ではありません1。一般的には、「ヒトツバタゴ」を指すことが多いようです12。ただし、地域によっては、他の樹種を指す場合もあるようです3。

以上、参考になれば幸いです。


だそうです。正しい情報がある質問をすると、ちゃんと対応出来ています。

リンク先はこちら。
WikiPediaナンジャモンジャ
WikiPediaヒトツバタゴ
BOTANICA
こやつもWikiPedia頼みなのだねぇ(^^;;;。

ちなみに、ラインチャットの状況。

17:49 BingAIに座布団一枚
17:51 何でもんじゃが入るのですかね、
17:51 正式名称はヒトツバタゴなんですよね。
なんじゃもんじゃの木は愛称なんですよね。
昔日立のコマーシャルで、この木なんの木気になる木の歌があり、なぜか私それをなんじゃもんじゃの木と認識していました。(笑)
17:52 愛称ですか。
17:59 近くでは、茅ヶ崎市の成就院にもあるもんじゃ、…座布団??
18:00 これ散歩の途中に寄った記憶があります。確かにもんじゃの木とか案内してあったと思います。


こんな具合に盛り上がりましたよ。

BingAIは正しい情報が存在する質問であれば、正しい回答は出来るようです(当たり前ですね^^;;;)。インタネットではプログラミングに関して、正しい情報が十分にありますので、その質問をしてみることにしました。長くなったので、続きは次回に。

- CafeLog -