English Japanese 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 ディレクトリはサーバ上のどこでも構いません。
1行コメント機能を埋め込む 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 の好きなところ(下の方とか)に入れてください。
これだけで、静的 HTML ファイルが1行コメント機能に対応します。

<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> 中でも問題ありません)

データファイルのフォーマット

1行コメントの内容は、 ajaxcom-data ディレクトリにページごとのテキストファイルを生成して格納しています。 例えば、本ページのテキストファイルは works_ajax_ajaxcom_ajaxcom.html.txt というファイル名になっています。 UTF-8 エンコードのタブ区切りテキスト形式です。

カラム番号内容補足
第1カラムissued2006-03-03T05:11:21ZW3CDTF形式
第2カラムプロセスID72140特に利用しません
第3カラムIPハッシュ84682送信元IPアドレスからのハッシュ値(5桁)
第4カラムnameゆうすけお名前欄
第5カラムcontentお気軽にコメントお試し下さい。1行コメント欄

第3カラムのハッシュ値から送信元IPアドレスを逆算して割り出すことはほぼ不可能ですが、 例えば、イタズラの連続投稿が同一人物からのものかを判定するときなどに使います。

コメントの削除機能(管理者画面)はありません。
FTP で該当ファイルをダウンロードして、行単位でコメントを削除してください。
UTF-8 エンコードですので、編集時には 秀丸エディタ などのテキストエディタが必要です。
面倒なら、ファイル単位で削除しちゃう方が早いです。

出力される HTML のフォーマット

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">『コメント本文1件目』</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">『コメント本文2件目』</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』の日時表示フォーマットは、ブラウザ依存です。

更新履歴

2006/08/19
コメント中のURLに ~ @ * が含まれる場合も、自動リンクを有効にしました。 (thanks to Sibelianさん again)
ついでに同梱の JSON.pmモジュールも最新版に更新しておきました。
2006/08/18
アクセス元IPアドレスのハッシュ値計算が誤っていたので修正しました。 (thanks to Sibelianさん)
ついでに同梱の XML::TreePPXML::FeedPPモジュールも最新版に更新しておきました。
2006/05/29
URL 中に _ アンダーバーが入った場合の RSS/JSON ファイル出力をようやく修正しました。 (thanks to Indexさん)
2006/05/26
www.domain.name/index.html や www.domain.name/path/index.html への コメントのログファイル名を正規化しました。 URL 末尾に index.html を付ける付けないに関わらず、 ドキュメントルートの /index.html 用ログは _.txt、 下位ディレクトリの /path/index.html 用ログは path.txt というファイル名になります。
旧バージョンとは少し処理が変わるため、既に ajaxcom-data に入っている トラックバックのログが参照・表示できない場合があります。
参照できない場合は、ajaxcom-data 内にある該当ログの ファイル名を変更してください。 また、その場合は url.alias ファイル(URLとログファイル名の変換表/キャッシュ)を いったん削除する(クリアする)必要があります。 お手数をおかけします。m(..)m
2006/05/23
コメント中のURLの自動リンク機能について、& が含まれるURLでは & 以降がリンクされてませんでした。
修正しました。変更点は ajaxcom.js(中の1行)のみです。他のファイルは更新不要です。
なお、今回の配布バージョンから、 JSON.pmが添付なので、 別途インストールが不要になりました。ありがとうございます!>まかまかさん
2006/05/09
お試し投稿・練習・フリートーク用のページを作成しました。
2006/05/05
JSON モジュールまたは JSON::Syck モジュールがある場合は、 最新コメントのインデックスファイルを JSON形式 でも出力するようにしました。
2006/04/10
このページのドキュメントを追加・修正しました。
2006/04/01
url.alias ファイル(ページURLからajaxcom-dataデータファイル名への マッピングファイル)の重複チェック処理のバグを修正しました。
ajaxcom.cgi?__mode=rssで↓の RSS ファイルを再生成するようにしました。
データファイルを操作してコメントを削除した場合などに、RSS を更新できます。
なお、各ページごとの RSS でなくて、サイト内の全ページ一括の RSS です。
2006/03/16
ajaxcom-data/recent.xml に最新コメントの RSS を発行するようにしました。
コメント中に URL があると、自動的にそのコメントをリンクにするようにしました。
ただし、1コメントにつき、1リンクのみが有効です。
URLに『 #com-2006-03-16T09:33:34Z 』のように更新日時を付けると、該当のコメント表示に直行できるようにしました。
2006/03/06
最初のリリースバージョン

コメントはこちらへ by AjaxCom

※AjaxComに関するご意見・お問い合わせは↓こちらに。お試し投稿・練習はこちらの専用ページでお気軽にどうぞ。

その他のページへのリンク

このページへのトラックバック by AjaxTB

トラックバックURL:http://www.kawa.net/service/tb/ajaxtb.cgi/works/ajax/ajaxcom/ajaxcom.html

Kawa.netxp © Copyright 2006 Yusuke Kawasaki