Kawa.netxp
[ajax] AjaxCom／静的HTMLページに1行コメントを書き込める掲示板
Kawa.netxp
[ajax] AjaxCom／静的HTMLページに1行コメントを書き込める掲示板
AjaxCom は、静的HTMLページに1行コメントを書き込める掲示板機能を追加できます。
このページも単なるHTMLファイルですが、
【コメントはこちらへ】のエリアにメッセージを書き込めます。
サーバ側の CGI を起動するのはコメント書き込み時のみで、毎回のコメント表示時は CGI 不要のため、サーバ負荷も軽いです。
新着コメントは、
RSS形式 および
JSON形式 でも
参照できます。
この RSS ファイル・JSON ファイルは、
ajaxcom.cgi?__mode=rss
にアクセスすると、強制更新できます。
コメントの送信・表示には ajax（responseText）を利用しています。
お試し投稿・練習・フリートーク用のページを作成しました。
⇒こちらへ
ダウンロードはこちら： ajaxcom-20060919.zip ZIP
Perl 5.005／5.6.x／5.8.x で利用できます。
(本サイトでも 5.005 を使っています)
本サイトも OS 入れ替えで、ついに Perl 5.8.8 になりました。
先日、たまたま見てみた FreeBSD も今は Perl 5.8.x が載っているんですね。
Encode 常備で use warnings が使えたり our が使えたりと、
やはり言語標準コア機能だけで比べても 5.8.x 系は便利なので、
もういい加減 5.005/5.6.x 系は切り捨てられていくのか。。。
AjaxCom については、今後も 5.005 でも動くようにしたいと思います。
ダウンロードした ZIP ファイルをウェブサーバにアップロードしてご利用下さい。
ajaxcom.cgi と ajaxcom-data だけは、パーミションは変更する必要があります。
com/ajaxcom.cgi パーミション 755 (rwxr-xr-x) com/ajaxcom.css com/ajaxcom.js com/ajaxcom-lang-ja.js com/cgi-lib/ajaxcom-main.pl com/cgi-lib/KCatch.pm com/cgi-lib/misclib.pl com/cgi-lib/XML/TreePP.pm com/cgi-lib/XML/FeedPP.pm com/cgi-lib/JSON.pm com/cgi-lib/JSON/Converter.pm com/cgi-lib/JSON/Parser.pm com/ajaxcom-data/ パーミション 777 (rwxrwxrwx) com/ajaxcom-data/.exist ダミーファイル
com ディレクトリはサーバ上のどこでも構いません。
１行コメント機能を埋め込む HTML ファイル類とは別の場所の方が分かりやすそうです。
インストール環境ごとの設定項目として
ajaxcom.js
の編集が必要です。下記の行を書き換えて下さい。
/service/com/ が、インストール先ディレクトリです。
AjaxCom.prototype.url_receive = '/service/com/ajaxcom-data';
AjaxCom.prototype.url_post = '/service/com/ajaxcom.cgi';
同様に、ajaxcom-main.pl の設定項目を変更します。
$URL_ROOT は、ご利用のドメイン名（トップページURL末尾の / を除いたもの）を指定します。
$DOC_ROOT は、その DocumentRoot（サーバ上の絶対パス）を指定します。
（絶対パスがご不明な場合は、そういえば、相対パス "../" 等でも動くかもしれません）
my $URL_ROOT = "http://www.kawa.net";
my $DOC_ROOT = "/home10/u-suke/www.kawa.net";
フォーム中の［送信］ボタンなどのテキスト類を変更したい場合は、
ajaxcom-lang-ja.js
の内容を書き換えて下さい。
AjaxCom.prototype.form_name = 'お名前：';
AjaxCom.prototype.form_content = '1行コメント：';
AjaxCom.prototype.form_submit = '送信';
AjaxCom.prototype.content_left = '『';
AjaxCom.prototype.content_right = '』';
AjaxCom.prototype.error_name = 'お名前欄が入力されていません。';
AjaxCom.prototype.error_content = '1行コメント欄が入力されていません。';
AjaxCom.prototype.error_post = 'コメントの送信に失敗しました。';
AjaxCom.prototype.error_receive = 'コメントはまだありません。';
Language Kit 風に別ファイル化してみたのはただの趣味なので、実際のところ ajaxcom.js 本体の該当部分を書き換えても構いません。
以下のタグをページ HTML の好きなところ（下の方とか）に入れてください。
これだけで、静的 HTML ファイルが１行コメント機能に対応します。
<link rel="stylesheet" type="text/css" href="http://domain.name/service/com/ajaxcom.css">
<script src="http://domain.name/service/com/ajaxcom.js"></script>
<script src="http://domain.name/service/com/ajaxcom-lang-ja.js" charset="UTF-8"></script>
<div id="ajaxcom_here"></div>
<script>(new AjaxCom("ajaxcom_here")).load();</script>
※ Ajaxcom でなくて、AjaxCom でした。（2006/04/10 修正済）
http://domain.name/service/com/ の部分は、ajaxcom のインストール先パスを指定します。
(new AjaxCom("ajaxcom_here")).load()
の部分が重要で、ここで ajax の処理を起動しています。
冒頭3行については、<head>〜</head> 中でも構いません。
(<body>〜</body> 中でも問題ありません)
１行コメントの内容は、 ajaxcom-data ディレクトリにページごとのテキストファイルを生成して格納しています。 例えば、本ページのテキストファイルは works_ajax_ajaxcom_ajaxcom.html.txt というファイル名になっています。 UTF-8 エンコードのタブ区切りテキスト形式です。
| カラム番号 | 内容 | 例 | 補足 |
|---|---|---|---|
| 第1カラム | issued | 2006-03-03T05:11:21Z | W3CDTF形式 |
| 第2カラム | プロセスID | 72140 | 特に利用しません |
| 第3カラム | IPハッシュ | 84682 | 送信元IPアドレスからのハッシュ値(5桁) |
| 第4カラム | name | ゆうすけ | お名前欄 |
| 第5カラム | content | お気軽にコメントお試し下さい。 | 1行コメント欄 |
第3カラムのハッシュ値から送信元IPアドレスを逆算して割り出すことはほぼ不可能ですが、 例えば、イタズラの連続投稿が同一人物からのものかを判定するときなどに使います。
コメントの削除機能（管理者画面）はありません。
FTP で該当ファイルをダウンロードして、行単位でコメントを削除してください。
UTF-8 エンコードですので、編集時には
秀丸エディタ
などのテキストエディタが必要です。
面倒なら、ファイル単位で削除しちゃう方が早いです。
AjaxCom は、document.createElement() などの DOM 操作で HTML を作成していきます。
以下のような HTML コード相当になります。（クリックや送信のイベント類は省略しています）
スタイルシート記述時の参考にしてください。
<form>
<p>
<span class="ajaxcom_name">お名前：<input name="name" type="text"></span>
<span class="ajaxcom_content">1行コメント：<input name="content" type="text"></span>
<span class="ajaxcom_submit"><input value="送信" name="submit_btn" type="submit"></span>
</p>
<ul>
<li>
<a name="com-2006-05-09T10:43:31Z"></a>
<span class="ajaxcom_name">お名前</span>
<span class="ajaxcom_content">『コメント本文１件目』</span>
<span class="ajaxcom_issued">2006年5月9日 19:43:31</span>
</li>
<li>
<a name="com-2006-05-09T03:49:16Z"></a>
<span class="ajaxcom_name">お名前</span>
<span class="ajaxcom_content">『コメント本文２件目』</span>
<span class="ajaxcom_issued">2006年5月9日 12:49:16</span>
</li>
</ul>
</form>
</div>
『com-2006-05-09T10:43:31Z』の部分は W3CDTF フォーマットで日時(GMT)が入ります。
『2006年5月9日 19:43:31』の日時表示フォーマットは、ブラウザ依存です。
※AjaxComに関するご意見・お問い合わせは↓こちらに。お試し投稿・練習はこちらの専用ページでお気軽にどうぞ。
トラックバックURL：http://www.kawa.net/service/tb/ajaxtb.cgi/works/ajax/ajaxcom/ajaxcom.html
Kawa.netxp © Copyright 2006 Yusuke Kawasaki