言葉の箱・チャット版
[beforeExec]
Fx.arc = 155541;
Fx.u = 27879;
Fx.timeCount = 0;
Lo.updateRes = function(){
Fx.kotobanoHako(Re.updateRes.responseText);
if(Fx.up) Fid("chatMsg").value = "";
};
Lo.cMaxNumUpdate = function(){};
msgDispShow = function(){
var a = Fid("msgDisp").style;
var f = a.display == "block";
a.display = f ? "none" : "block";
Fid("listDisp").style.display = f ? "block" : "none";
};

up2 = function(o,n){
clearInterval(Timer);
Fid("Led_0").className = "le2";
Fx.up = false;
Fx.editNum = n;
if(Fx.act != null) Fx.act.className = "snum";
Fx.act = o.previousSibling;
Fx.act.className = "act";
Fid("postButton").value = echo(Fx.act) + "(*^(^* ) 編集!";
Fx.e(Re_uri(n), "up2e");
Fid("chatMsg").focus();
};
Lo.up2e = function(){
var s = Re_com(Re.up2e.responseText);
var o = Fid("chatMsg");
o.value = s;
counter();
o.focus();
Fx.setTimer();
};
newPost = function(){
Fx.up = true;
Fid("postButton").value = "\(*⌒ー⌒*)/新規!";
var o = Fid("chatMsg");
o.value = "";
counter();
o.focus();
if(Fx.act != null) Fx.act.className = "snum";
Fx.act = null;
};

postSubmit = function(){
var str = Fid("chatMsg").value;
if(str == "" || str.length > 200){
alert(str == "" ? "白紙ですよ(^-^;" : "文字数が200を超えています(^-^;");
Fid("chatMsg").focus();
return;
}
var dat = Fx.up ? "article_id=" + Fx.arc +
"&poster_name=" + encodeURIComponent(Fx.handle) +
"&comment=" :
"mode=update&oid=" + Vis.oid + "&type=comments&id=" + Fx.editNum + "&text=";
dat += encodeURIComponent(str);
Fx.e("diary_" + (Fx.up ? "comment" : "editor"), dat, "updateRes");
};
counter = function(){
var n = Fid("chatMsg").value.length;
echo("cntInfo", " " + n);
};
loginCheck = function(){
Fx.e(Re_uri(Vis.oid == "nancyan" ? 29262 : 29261), "lc");
};
Lo.lc = function(){
var s = Re_com(Re.lc.responseText);
alert(s);
};
logoutSet = function(){
var n = 29262;
if(Vis.oid == "botanic" || window.name == "main_botanic") n = 29261;
Fx.e(Re_uri(n) + ";mode=update;text=0", "ls");
};
loginSet = function(){
var n = 29262;
if(Vis.oid == "botanic" || window.name == "main_botanic") n = 29261;
Fx.e(Re_uri(n) + ";mode=update;text=1", "ls");
};
Lo.ls = function(){};
Re_com = function(s){
s = s.replace(/\r?\n/g, "");
return s.match(/\x3ctextarea[^>]+>(.+?)\x3c\/textarea>/) ? RegExp.$1 : "";
};
Re_user = function(s){
s = s.match(/投稿者: ([^<]+)/) ? RegExp.$1 : "-";
return s.replace(/^\s+|\s+$/g, "");
};
Re_uri = function(n){
return "/cgi-bin/diary_editor.cgi?oid=" + Vis.oid + ";type=comments;id=" + n;
};

Fx.show = function(){
if(Fx.p2 > 0){
Fx.num = Number(Fx.k[Fx.p1 - 1]) + Fx.st;
Fx.e(Re_uri(Fx.num));
}
};
Lo.entry = function(){
var s = Re.entry.responseText;
if(Fx.befStr != s){
Fx.befStr = s;
Fx.kotobanoHako(s);
}
};
Fx.kotobanoHako = function(s){
var s = s.replace(/\r?\n/g, "");
var max = s.match(/id="comments">コメント \((\d+)\)/) ? Number(RegExp.$1) : 0;
s = s.replace(/>\s+</g, "><");
s = s.replace(/(id="C\d+" )(target="_blank">葉月\x3c)/g, '$1href="/home/botanic/" $2');
s = s.replace(/(\x3cdiv class=)"comment_element">\x3ca[^>]+>編集\x3c\/a>\x3ca.+?id="C(\d+)" href="\/home\/([a-z]+)\/" [^>]+>(.+?)\x3c\/a>/g, "$1'u_$3'><button class='edit' title='もっと追加して♪' onclick='up2(this,$2);'>編集</button> \x3cspan class='Res'>R$2\x3c\/span> \x3cspan class='user'>$4\x3c\/span>");
var r = s.match(/\x3cdiv class='u_[a-z]+'>.+?\x3c\/div>/g);
r = r.slice(0, 10);
var cMaxNum = r[0].match(/R(\d+)/) ? RegExp.$1 : 0;
for(var i = 0; i < r.length; i++){
r[i] = r[i].replace(/>/, function(e0){
return "> \x3cspan class='snum' id='s" + max + "'>[ " + (max--) + " ]\x3c/span>";});
}
r = r.join("");
r = r.replace(/(\x3cspan class=")comment_body/g, "$1msg");
r = Fx.col(r);
echo("listDisp", r);
Fid("chatMsg").focus();
/* Fx.e(Re_uri(Fx.u) + ";mode=update;text=" + cMaxNum, "cMaxNumUpdate"); */
};
Fx.col = function(s){
var s = s.replace(/(\(\*\^\(\^\* \))/g, "\x3cspan class='kiss1'>$1\x3c\/span>");
s = s.replace(/(\( \*\^\)\^\*\)|^^|\(#\^\-\^#\))/g, "\x3cspan class='kiss2'>$1\x3c\/span>");
s = s.replace(/(\(\^\-\^y|\(\*\^\-\^\*\)|\(\*\^_\^\*\))/g, "\x3cspan class='kao1'>$1\x3c\/span>");
s = s.replace(/(愛|大好き)/g, "\x3cspan class='big'>$1\x3c\/span>");
return s;
};

Fx.kotoba = function(){
Fx.e("/home/botanic/diary/2009/01/1232370238.html");
};
led_loop = function(){
Fid("Led_0").className = Fid("Led_0").className == "le1" ? "le0" : "le1";
++Fx.timeCount;
if(Fx.timeCount == 5){
Fx.timeCount = 0;
Fx.setTimer2();
}
};
Fx.setTimer3 = function(){ Fid("Led_1").className = "le3"; };
Fx.setTimer2 = function(){
Fx.kotoba();
Fid("Led_1").className = "le4";
setTimeout("Fx.setTimer3()", 1500);
};

Fx.setTimer = function(){
Timer = setInterval("led_loop()", 1000);
Fx.timeCount = 0;
};

entry = function(){
Fx.leTimer = false;
if(Vis.login){
newPost();
if(Vis.oid == "nancyan" || Vis.oid == "botanic"){
Fid("postButton").disabled = false;
Fx.leTimer = true;
Fx.handle = Vis.oid == "nancyan" ? "なんちゃん" : "葉月";
Fx.you = Vis.oid == "nancyan" ? "葉月" : "なんちゃん";
Fx.befStr = "";
loginSet();
window.onunload = logoutSet;
Fx.setTimer();
}
Fx.kotoba();
echo("chatInfo", "\x3cspan>⇒\x3c/span> " + Fx.you + "はログイン中です");
} else {
Fid("noLogin").style.display = "block";
}
};

leTimerSet = function(){
var f = Fx.leTimer = !Fx.leTimer;
echo("leTimerButton", "自動更新の" + (f ? "停止" : "開始"));
Fid("leTimerButton").className = f ? "le5" : "le2";
f ? Fx.setTimer() : clearInterval(Timer);
};
window.onerror = function(){
return true;
};
[/beforeExec]
[cssText]

.logo1 { font-size:16pt; font-family:serif; color:blueviolet; }
.gif1 { border:1px solid #ccc; border-radius:.5em; -moz-border-radius:.5em; }

#linkDisp { width:30%; float:right; }
.lin { margin:0em .5em 1em .5em;
border:1px solid darkgreen; padding:.5em; border-radius:1em;
-moz-border-radius:1em;
}
.lin a { text-decoration:underline; }

.linkInfo {
margin:.5em 2em; border:1px dotted #ccc;
border-radius:.8em; -moz-border-radius:.8em; padding:.25em;
text-align:left;
color:#808080;
}
#hako { margin-right:30%;}
.t1,.t2 { width:100%; }
.td1 { width:100px; text-align:center; color:#808080; }
.td1 a { color:blueviolet; }
#chatMsg { width:96%; background-color:snow;
border:1px solid #ccc; border-radius:.25em; -moz-border-radius:.25em;
}
.infoMsg { margin-bottom:.5em; }
#listdisp { margin-top:1em; }
#listDisp div {
line-height:1.4em; padding:.5em 1em;
border-top:3px dotted #ccc; font-size:10.5pt;
}
#listDisp .user { color:darkgreen; }
.snum { background-color:yellow; }
.act { background-color:#ffefff; color:red; }
.edit { margin-left:.5em; color:blueviolet;}
#update { color:darkgreen; }
#noLogin { display:none; }
.m1 { text-align:center; margin-bottom:1em;
color:#808080;
}
.now { text-decoration:underline; color:red; }
#fx_link { margin:1em; border:1px dashed skyblue;
border-radius:.8em; -moz-border-radius:.8em;
padding:.5em 1em;
}
#me_link { margin:1em; border:1px dashed magenta;
border-radius:.8em; -moz-border-radius:.8em;
padding:.5em 1em;
}
div.u_hazuki span.msg, div.u_botanic span.msg { color:#896952; }
div.u_nancyan span.msg { color:#000; }
.kiss1 { color:red; }
.kiss2 { color:magenta; }
.kao1 { color:blueviolet; }
.big { font-size:13pt; color:#b22222; }
.le0 { color:#0a0; }
.le1 { color:#0c0; }
.le2 { color:magenta; }
.le3 { color:#00f; }
.le4 { color:#f00; }
.le5 { color:#000; }
[/cssText]
[body]
<$$div id="linkDisp">
<$$div class="m1"><$$br />
<$$a href="main.html?no=114">#114 言葉の箱・チャット版<$$/a><$$br />
<$$img src="http$$://www.geocities.jp/musicgarden_jp/gakusei_nancyan_hazuki.gif" alt="青春時代のなんちゃんと葉月" width="192" height="96" class="gif1" />

<$$div class="linkInfo">
⇒ <$$span id="Led_0" class="le0">■<$$/span><$$span id="Led_1" class="le3">■<$$/span> <button onclick="leTimerSet()" id="leTimerButton" class="le5">自動更新の停止</button>

<$$br /> 5秒毎に内容を取得して更新させています。ボタンでタイマーのオンオフができます。
<$$/div>
<$$img src="http$$://www.geocities.jp/musicgarden_jp/nancyann_hazuki_wedding.gif" alt="なんちゃんと葉月の晴れ姿" width="192" height="96" class="gif1" />
<$$div class="linkInfo" id="chatInfo">..<$$/div>
<$$div class="linkInfo">
⇒ <$$a href="main.html?no=115">#115 言葉の箱・閲覧版<$$/a><$$br />
⇒ <$$a href="main.html?no=116&uri=/home/botanic/diary/2009/01/1232370238.html">#116 言葉の箱・編集<$$/a><$$br />
⇒ <$$a href="main.html?no=117">#117 言葉の箱・過去ログ<$$/a>
<$$/div>
【<$$a href="main.html?no=103&uri=/home/nancyan/diary/2008/05/1212187516.html">#103でソースを読んでみる<$$/a>】<$$br />
<$$br />

<$$img src="http$$://www.geocities.jp/musicgarden_jp/nancyan_hazuki.gif" alt="" class="gif1" /><$$br /><$$br />
言葉の箱のコメントノート(^-^y<$$/div>
<$$div id="fx_link"><$$/div>
<$$div id="me_link"><$$/div>
<$$/div>
<$$div id="hako">
<table class="t1"><tbody><tr><td class="td1">
<$$img src="http$$://www.geocities.jp/musicgarden_jp/hazuki_utau.gif" alt="心を込めて歌うリトル葉月" /><$$br />[ <$$a href="javascript:newPost();" title="黒板消しだよ!うぅ!">(ノ><)ノCLS<$$/a> ]</td><td class="td2">
<table class="t2"><tbody><tr><td class="logo1">なんちゃんと葉月の言葉の箱</td></tr>
<tr><td>
<$$form accept-charset="UTF-8">
<$$textarea id="chatMsg" cols="50" rows="3" onkeypress="counter()" onchange="counter()" onclick="counter()"><$$/textarea>
<$$div class="formButton"><$$input type="button" value="\(*⌒ー⌒*)/新規!" onclick="postSubmit()" id="postButton" disabled="disabled" title="言葉よ飛んでいけ~~" /> 文字数 :
<$$span id="cntInfo">0<$$/span>/200(max)
<$$/div>
<$$/form>
</td></tr></tbody></table></td>
</tr>
</tbody></table>
<$$div class="infoMsg">
 <$$a href="javascript:msgDispShow();">仕様<$$/a> |
検証用 ⇒
<$$a href="javascript:loginCheck()">loginCheck<$$/a>
<$$/div>
<$$div id="msgDisp" style="display:none;">
■フラグの設定<$$br />
 ・R29259 : 葉月の更新フラグ Fx.h2<$$br />
 ・R29260 : なんちゃんの更新フラグ Fx.n2<$$br />
 ・R29261 : 葉月のチャット要求フラグ Fx.h1<$$br />
 ・R29262 : なんちゃんのチャット要求フラグ Fx.n1<$$br />

 ・ページ構築時にkeyを用いて取得してFxに保存しておく。同時に相手の更新フラグをクリアする。<$$br />
 ・チャットを要求するとフラグがセットされる。相手のフラグがセットするまでタイマー割り込みで状態を取得する。<$$br />
 ・チャットの解除も相手に分かるようにする。<$$br />
<$$br />
■定数・変数・関数<$$br />
 ・Fx.arc : 言葉の箱の記事番号 (155541)<$$br />
 ・Fx.up : 新規コメントの投稿時にtrue、編集時にfalseとなる。<$$br />
 ・Vis.oid : nancyan | botanic<$$br />
 ・Fx.handle : なんちゃん | 葉月<$$br />
 ・Fx.n1 : 0 | 1 | 2 ⇒ なんちゃん専用ログイン・チャット要求変数。<$$br />
 ・Fx.h1 : 上と同じ(葉月専用)<$$br />
 ・Fx.n2 : 0 : 1 ⇒ なんちゃん専用更新フラグ<$$br />
 ・Fx.h2 : 上と同じ(葉月専用)<$$br />
<$$/div>
<$$div id="listDisp"><$$/div>

<$$div id="noLogin">
<$$img src="files/yukikko2b.gif" alt="" /><$$br />
 ログインしないと表示できない仕様です。諦めて下さい(^-^;
<$$/div>
<$$/div>
[/body]
[exec]
document.title = "言葉の箱・チャット版";
Fx.footerAdd = "(C)2007-2009 日記「春を待つ君に」の言葉の箱より 葉月 \x3ca href='/home/botanic/diary/2009/01/1232370238.html' target='_blank'>diary\x3c/a> \x3ca href='main.html?no=103&uri=/home/botanic/diary/2009/01/1232370238.html'>#103\x3c/a> \x3ca href='/home/botanic/' target='_blank'>botanic@eclat\x3c/a> \x3cbr />";
entry();
[/exec]