うらなか書房流コメント等設置方法
HTMLページにトラックバック、コメント、RSSを設置
Kawa.net xp
AjaxTB
トラックバック機能を静的HTMLページに追加するJavaScript
AjaxCom
静的HTMLページに1行コメントを書き込める掲示板
JavaScript版 RSSリーダー
自サイト内のRSSの内容をHP上に表示できるスクリプト
上記3点をダウンロードして使わせて頂きました(※)。設置手順なども上記HPに掲載されています(AjaxTB、ComではCGIを使います。RSSリーダーはjavascriptのみで動きます)。
ここでは、うちなりのカスタマイズ(というほどのものではないと思いますが)方法を書いておきます。
※ 現在はWordPressでサイトを作成しているので、これら3点は使用していません。
AjaxTB
トラックバック機能を静的HTMLページに追加するJavaScript
AjaxCom
静的HTMLページに1行コメントを書き込める掲示板
JavaScript版 RSSリーダー
自サイト内のRSSの内容をHP上に表示できるスクリプト
上記3点をダウンロードして使わせて頂きました(※)。設置手順なども上記HPに掲載されています(AjaxTB、ComではCGIを使います。RSSリーダーはjavascriptのみで動きます)。
ここでは、うちなりのカスタマイズ(というほどのものではないと思いますが)方法を書いておきます。
※ 現在はWordPressでサイトを作成しているので、これら3点は使用していません。
1.RSSリーダーのこと
設置の順番としては最後に行ったのですが、これについてのことが、私が調べた内で一番重要な情報かもしれない……と思えたので、真っ先に記しておくことにします。
上記「RSSリーダー」ページの下部に 応用例:自分のページに設置する手順 というのがありますので、まずそちらのソースをコピペします。
それから元のRSSページに戻って、自サイトのRSSファイルが RSS2.0 の場合、RSS2.0 を利用している場合 に従って該当部分を書きかえます。
これで内容が表示されるはずなんですが、うちの場合、何故かこの時点では「RSS」という文字があるばかりで、肝心の中身が表示されていませんでした。しかし背景色や文字の大きさをいじってみたら無事表示されました。
そしてここからが問題です。表示件数を制限する場合 というオプションのようなものがありまして、
上記ページには
var items = data["rdf:RDF"].item;
if ( items.length > 15 ) items.length = 15;
if ( items.length > 15 ) items.length = 15;
を「xml.parse()」の後に追加、と書いてありますが、この通りやると、RSS2.0 を利用している場合はエラーになるんじゃないかと思います(うちはなりました)。
結論としては、
RSS2.0 を利用していて、表示件数を制限したい場合
var items = data.rss.channel.item;
if ( items.length > 15 ) items.length = 15;
if ( items.length > 15 ) items.length = 15;
このソースを「var func = function ( data ) {」の次の行に追加、です。
あとその他、日時だとか説明文を足すには、ということがコメント欄に載っていますが、ここには[/item1/dc:date]←こんな感じで書いてあります。
これは日時だったら絶対「dc:date」という訳ではないみたいです(うちの場合は[/item1/pubDate]という書き方です)。
もし表示されなかったりエラーになったりしたら、自分のRSSファイルを開いてみて、要素名を確認してみるとよいかもしれません。
2.AjaxTB、AjaxComのこと
これらの設置は、説明に従ってやれば特に問題ないと思います。
それと私は、Kawa.netさんみたいにトラックバック先の画像を表示したかったので、ajaxTBページの 設定項目の編集 にある ajaxtb.js ファイルをこっそりダウンロードして、元のと入れ替えちゃいました。
ajaxtb.jsを開くと、割と上の方に AjaxTB.prototype.text_max_length = 100; という記述がありまして、これはトラックバックの説明文を何文字表示するかということを表しているみたいです。この数字を変えれば表示文字数を変更できるはずです……が、データファイルの方はこれをいくらいじっても変化なしです。
データファイルの方の説明文も、何文字以降はカット……というのがやりたくて、 misclib.pl というファイルをいじって出来るには出来たのですが、そうすると生成されるxmlファイルが何かおかしくなりました。文字コードの問題っぽいのですが、いろいろ調べたもののどうも上手くいかないので、いいや、手動でやれば……という結論に落ち着きました。
3.コメント、トラックバック件数表示のこと
コメントなどの件数が自動で更新され、そこにコメントページへのリンクが貼ってあるというのがやりたかったのですね。
で、データファイルを改めて確認してみると、投稿番号が振られている様子はなし。
これに番号を追加して、一番新しいものを表示する……とかいうやり方も探せばあるんだと思いますが、それには↑の misclib.pl ファイルをいじらないとならなそう…それはもうコリゴリってんで、自分で新しくこれ用のCGIを作ってみることにしました。
例:このページ用のCGIの中身
#!/usr/bin/perl
print “content-type: text/plainnn”;
#このページのデータファイルの指定
$open_file = “tb_list_aj.htm.txt”;
#データファイルのオープン
open(F, “$open_file”) || die print “0″ ; #データファイルがない場合は0とする
@logdata=<F>;
$nakami=@logdata; #配列の数(投稿数)を取得
close(F);
print $nakami;
exit;
1行目はお使いのサーバーによっては #!/usr/local/bin/perl と書く場合があります。
1行目以外の # で始まる文章は消しても平気です(消さなくても平気です)。
このCGIファイルはデータファイルと同じフォルダ内に作っています。
私はコメント・トラックバック用のページを別に作っている(この例ではtbフォルダの中のlistと名づけたフォルダの中に aj.htm というページを作ってそれをコメント用ページとしている)ので、このようなデータファイル名になっています。
私はこのCGIの名前を、データファイル名と同じにしています(この例では tb_list_aj.htm.cgi )。
これで、データファイルの中に何件のトラックバック、またはコメントがあるかという数字が、このCGIファイルに書き込まれた、ということになるらしいです。
それからその数字をhtml上に表示する手段を探しました。で検索してみた所、prototype.jsというライブラリを使えば出来るとのこと。
prototype.js をダウンロードしたら、一番下に↓を追加します。
function trackback(file)
{
var URL = file+(new Date()).getTime();
new Ajax.Updater(“tb”,URL, { method: “get” });
}
function comment(file)
{
var URL = file+(new Date()).getTime();
new Ajax.Updater(“com”,URL, { method: “get” });
}
それから、コメントなどの件数を表示させたいhtmlページに以下を書き足します。
※下記はaj.htm、prototype.js、tb、comフォルダが同じフォルダ内にあるものとしています
①<head></head>間に<script type=”text/javascript” src=”prototype.js”></script>
②<body>の中にonload=”trackback(‘tb/ajax-data/tb_list_aj.htm.cgi?cache=’);comment(‘com/ajaxcom-data/tb_list_aj.htm.cgi?cache=’);”
例:背景色黒のページにこれを足す場合
<body bgcolor=”black” onload=”trackback(‘tb/ajaxtb-data/tb_list_aj.htm.cgi?cache=’);comment(‘com/ajaxcom-data/tb_list_aj.htm.cgi?cache=’);”>
③<body></body>間のお好みの場所にコメント(<span id=”com”></span>) トラックバック(<span id=”tb”></span>)
これで出来上がりです。
ちなみに1~3までやるのに、私はカレコレ2週間ほど費やしてしまいました……。
試行錯誤の末、漸っと(一応)できた……という代物なので、これが最上の方法かと問われたらハナハダ自信がありません。
ただ、もしドナタかの参考になったらと思いまして、このようなページを作ってみました。お役に立ちましたら幸いです。