Qitailang's HP > webtech

「全てのページにコメントフォーム」の改造

2018/03/27

オートリンク機能を追加、削除確認ダイアログの位置ずれ解消

2017/02/01

コチラのサイトで「全てのページにコメントフォーム」を設置できるツールがダウンロードできる。CMSやブログには大抵備わっているお決まりの機能だが、普通のHTMLページに数行コードを書き加えるだけで実現できるのでとても便利そうだ。

うまくいくと、必要なファイルをアップロードして、設置したいHTMLに、

<link rel="stylesheet" href="commentform/commentform.css" type="text/css">
<div id="commentBox"></div>
<script type="text/javascript" src="commentform/commentform.js"></script>

というコードを加える。たったこれだけで作れてしまう。しかし、utf8版をダウンロードして設置してみたら、う〜っ、いきなり文字化け。自分はphpはほとんど分からないので、あきらめかけていたのだが「感」でなんとか解消できた (^^;

このツールのもう一つ残念なところは、せっかく多くのページにコメントを投稿してもらえるのに、投稿があったことを知らせるメール通知機能がない点だ。このままではコメントがあっても気づかなかったり、質問に対する回答のタイミングを失してしまう可能性がある。これもなんとか機能を追加することができた。その他にも少々気になるところがあったので改造した。

sample

気が向いたらダウンロードして、設置してみてください。設置方法はreadme.txtに書いています。

Download:commentform_modified.zip

以下は改造した内容です。仕組みについて興味のない方はスルーしてください。

utf8版の文字化け解消

オリジナルに含まれているのは、commentform.css、commentform.js、commentform.phpの3つだが、commentform.phpの32行目をコメントアウトするだけで解消できるようだ。
/*$value = mb_convert_encoding($value, "UTF-8", "EUC-JP");*/

スクリプトやcssを任意のフォルダにまとめる

インストール方法を読むと、上の3つのファイルはルート直下に置くことになっている。ログはルート直下の指定したフォルダの中に蓄積されるが、もしこのフォルダが存在しないと自動で作成してくれるようになっている。しかしそのためにはルートのパーミッションを777にしておかなければならない。これは気持ち悪い。というわけで、3つのファイルをどこかのフォルダーにまとめ、そのフォルダの中にさらにログ・ファイルを蓄積するフォルダを作成したい。3つのファイルをルート直下でなく/commentform/というフォルダにまとめることにした。

したがってフォームを設置するページにはオリジナルと違って下のようなコードを追加することになる

<link rel="stylesheet" href="/commentform/commentform.css" type="text/css">
<div id="commentBox"></div>
<script type="text/javascript" src="/commentform/commentform.js"></script>

改造は下の事項について書き換える。

commentform.php、commentform.js、設置するHTMLなどの中の /commentform.php、 /commentform.js、/commentform.css となっているところを、/commentform/commentform.php、 /commentform/commentform.js、/commentform/commentform.css のように書き換えればよいだけなのでそれほど数も多くないし、手作業でおこなった。

ログの保存フォルダは、/commentform/の中のさらに commentfiles/ とする。フォルダ名はcommentform.phpの13行目に指定してあるので適当に名前を変えてもよい。

$commentdir = 'commentfiles';

/commentform/のパーミッションを777にしておくと、データディレクトリは自動で作成してくれる。うまくいかなかったら自分でデータディレクトリを作成してパーミッションを777にしておく。

メール通知機能

commentform.phpの34行目あたり
data_save("$commentdir/$_REQUEST[file].dat", $Comment);
ここで投稿記事のログ保存が完了するようなので、この次にメール通知のためのスクリプトを書くことにする。メールには投稿のあったHTMLページの情報とコメント内容が送信されるのだが、この段階でそれらの内容は改変されているので、改変される前のものを退避しておく処理が必要だ。具体的には説明を省略するが、要は元のHTMLページ情報とコメント内容を$m_file、$m_commentに退避してあることとする。
data_save("$commentdir/$_REQUEST[file].dat", $Comment);

/*メール送信*/

/*サーバーURL、最後の / は不要*/
$myhost="http://hoge.co.jp";

mb_language("Japanese");
mb_internal_encoding("UTF-8");

$to      = 'to@hoge.co.jp';
$subject = 'コメントの投稿がありました。';
$body = 'Commented HTML : '.$myhost.$m_file. "\r\n====\r\n".$m_comment;
$headers = 'From: from@hoge.co.jp' . "\r\n";
mb_send_mail($to, $subject, $body, $headers);

ここで設置しているサーバーURLとメールアドレスを指定しておく。to@hoge.co.jpとfrom@hoge.co.jpは同じでもかまわない。YahooメールやGメールの場合、自動的に迷惑メールに振り分けられることもあるので、そのあたりは注意する。

投稿フォームとコメントのリストの順序を入れ替える

配布されているものは、コメントのリストの最後にフォームが表示される。この順序はこれはこれで意味があるとは思うのだが...つまり返信しようと思えばまず上にある、過去に投稿された記事に目を通すというのが手順のはずだから....しかし、投稿数が多くなるとフォームまでのページ内移動分が大きくなりスクロールするのが面倒だ。どうせ最近の記事は上の方に掲載されているのだから、最近の記事の近くにフォームがあった方がUI的に良いと思う。本当はページャー機能付きだといいのだがそこまでの改造は自分には無理ポ orz

とりあえず順序の入れ替えは簡単だ。 commentform.phpの52行目あたり

header("Content-type:text/html; charset=UTF-8");
の下に書かれている
foreach ($Comment as $line) {
...
_;
}
がコメントのリスト。その下の
echo <<<_
<form action="javascript:void(0)" name="commentform"
...
_;
までがフォームなので、ここの順序を入れ替えればよい。

commentの改行が反映されない

無手勝流で修正 (^^; commentform.jsの48行目あたり
url = url + '&comment=' + comment.value;

↓

url = url + '&comment=' + comment.value.replace( /\n/g , "___" ) ;
commentform.phpの190行目あたり
$buffer = preg_replace("/\n/", "", $buffer);

↓

$buffer = preg_replace("/\n/", "", $buffer);
$buffer = preg_replace("/___/", "<br>", $buffer);

細かい点


以下のフォームはテスト用ではありません。テストにはコチラをお使いください



Ida Qitailang