自動更新WebPage

もどる




これはAccessページ
に置いてあるおたすけ板というQ&AのCGI掲示板の最新書き込みのタイトル部分だけを別ページに表示しているもので、常に最新書き込みのタイトルを表示するようになっています。
このページを書いたのは2002/06/17なんですが上の日付時刻部分に注目してください。
全部最近の時刻になってるでしょ?

おたすけ板は毎日活発に書き込みのある掲示板なので、タイトルだけを表示するページの内容も開く(更新する)たびに内容は変わってきます。
という事は例えズボラでページの更新をしないWebページでも常に、というより刻々と変化するページのように見せる事ができる訳でいわば究極の自動更新ページなんです。
JavaScriptを止めているページでは表示されませんが…




【原理】
<SCRIPT type="text/javascript" src="../../cgi-bin/otasuke/pen.js">

このページのソースを見ていただければ分かりますが上のような1行があるだけなんです。
ここでは相対パスで書いていますがもちろん絶対パスでも可。

それじゃぁ、そのpen.jsというファイルはなんなのか?
document.write('あいうえお')
みたいな事を書いてあるただのテキストファイルに過ぎません。


ここからはCGIの説明になりますが、対象となる掲示板CGIの新規書き込みプロセスの中に
pen.js を開け
pen.js にCGI掲示板の必要データにdocument.write(' ')をつけて書け
pen.js 保存しろ
と書いてpen.jsを書き換えているだけなんです。
当然ファイルネームは何でも構いません。

表示したいページに
<SCRIPT type="text/javascript" src="ファイルのパス">
と書くだけです。


対象となるCGIは掲示板に限らず日記でも何でも自由ですが、これらのCGIを自分で全部書く人はまれで普通はフリーのCGIをもらってきて設置していると思います。
ですからその中で新規書き込みがどこで行われているのかという事を見つけ出す事がまず第一歩。








ややこしいかも知れませんが具体的な例でお話しましょう。

$p_file = './pen.js';            #切り出しファイル
$max_line = 4;                    #切り出しライン数




#★js切り出し
sub kiridasi {
        @js = &read_file($p_file);
        local($no,$res,$lx,$tn,$title,$name,$email,$date,$act) = split(/<>/, $kiji_data);
        $url = "<A HREF=\"cgi-bin/otasuke/flashbbs.cgi?id=$ID&md=viw&no=$no&tn=$tn\">";
        $new_line = "document.write(\'<FONT size=\"2\" COLOR=\"$em_color\">$date
               </FONT><FONT size=\"2\">  <B>$name</B> :  $url$title</A></FONT><br>\')";
        unshift (@js,"$new_line\n");
        if (@js > $max_line) { pop(@js); }
        &write_file($p_file,@js);
}
前半2行は変数で、この切出し専用のファイルのパス、 最大何行を記録するかを参照する部分です。
PerlではVBと違って変数は特に最初に宣言する必要なく、いきなり $*** と書くだけで使えてしまいます。

&read_file($p_file)
&**** というのはサブスクリプトを呼び出す書き方で、一般にファイル呼び出し、ファイル書き込みのプロセスはサブに書いてありますのでそれを使ってしまいます。

local( ) の部分、本来のCGIで使っているデータを分解して各変数に代入します。
$new_line の行、ここで頭に document.write をくっつけて必要なデータだけを1行に作ります。
unshift  ファイルの先頭に新しい書き込みの行を入れます
if 行で最大表示数を判断して余分な古いデータ行をはじき出します。
&write_file 書き出しのサブを呼び出して書き出します。


あまり意味がないかも知れませんが実際に書き出されたpen.jsの内容は以下のようになります
document.write('<FONT size="2" COLOR="#FF0000">2002/4/30 15:57</FONT><FONT size="2"> <B>かおり</B> : <A HREF="cgi-bin/otasuke/flashbbs.cgi?id=&md=viw&no=5578&tn=5476">ありがとうございました。</A></FONT><br>')
document.write('<FONT COLOR="#FF0000">(2002/4/30 15:25)</FONT> <B>イケガミ</B> : <A HREF="cgi-bin/otasuke/flashbbs.cgi?id=&md=viw&no=5577&tn=5514">Re[5]:合計行も明細に表示させる</A><br>')
document.write('<FONT COLOR="#FF0000">(2002/4/30 15:20)</FONT> <B>こま</B> : <A HREF="cgi-bin/otasuke/flashbbs.cgi?id=&md=viw&no=5576&tn=5476">Re[7]:クエリーのデザイン画面のメニューバーです。</A><br>')
document.write('<FONT COLOR="#FF0000">(2002/4/30 15:19)</FONT> <B>janglish</B> : <A HREF="cgi-bin/otasuke/flashbbs.cgi?id=&md=viw&no=5575&tn=5532">みなさまありがとうございました。</A><br>')

document.write が4箇所できている事がお分かりでしょうか?
つまり4行分のデータなんです。

ここには表示されていませんが本体のCGIの中の新規書き込みを処理している部分に
   &kiridasi
という行を追加してこのサブを呼び出し、処理させているんです。

表示する側のページではTableの中に入れるなりして自由な表示方法を取れば良い訳で、私が使っているAccessページではJavaScriptを使って破線で囲っています。

このやり方はCGI-PLANTさんの「切って出し日記」を利用させて頂いているので同じ手法をまねさせていただいたものです。