大福チャット(Ver3-HTML版)を激しく改造したい方へささげる。
javascriptがまったく分からない人はおととい来やがれやめたほうがいいです。危険です。
アプレットが正常に動かないどころかブラウザをクラッシュさせる可能性があります。
(経験者は語る)
<param name="size" value="******">で設定した値
<param name="fgcolor" value="******">で設定した値
<param name="bgcolor" value="******">で設定した値
ユーザーがが設定した値
チャットアプレットが出力する文字列
サーバーからのメッセージが変数text内に入っているときのtext
<span style="font-size:**pt;color:#******;"> サーバーからのメッセージ</span>
ユーザーの発言が変数text内に入っているときのtext
<span style="font-size:**pt;color:#******;">ユーザーメッセージ</span>
変数name
<span style="**pt;color:#******;>ハンドルネーム</span>
01ログイン・ログアウトの文字列を変更する。
01-01:****さんがログインしました。
function showServerMessage(text) {
writeText(text);
}
はい、これがサーバーからの文字列を描画する命令です。
textはこんな感じ。
<span style="font-size:**pt;color:#******;"> 〜〜さんがログインしました。 (01/01 0:01) *.*******.ne.jp</span>
ここで問題なのは、サーバーからのメッセージも、発言も全部同じ色だということである。
せっかくHTMLなんだから、もっとカラフルに行こうぜ。
ということで、スタイルタグを抜いて、一度テキストの部分だけ抜き出してみる。
まずは「〜〜さんがログインしました。」の「〜〜」を抜き出す。
function showServerMessage(text) {
if (text.indexOf("さんがログインしました。", 0) != -1){
text = text.substring(text.indexOf(">", 0)+1,text.indexOf("さんがログインしました。", 0));
writeText(text);
}
else{
writeText(text);
}
}
こうすると「〜〜」の部分だけしか表示されない。
01-02:最終的には
同じようにログアウトのときも、[********]へようこそのときも抜き出せるようにすると
function showServerMessage(text) {
var fg = 0;
if (text.indexOf("さんがログインしました。", 0) != -1){
fg = 1;
text = text.substring(text.indexOf(">", 0)+1,text.indexOf("さんがログインしました。", 0));
writeText(text);
}
if (text.indexOf("さんがログアウトしました。", 0) != -1){
fg = 1;
text = text.substring(text.indexOf(">", 0)+1,text.indexOf("さんがログアウトしました。", 0));
writeText(text);
}
if (text.indexOf("]へようこそ", 0) != -1){
fg = 1;
text = text.substring(text.indexOf("[", 0)+1,text.indexOf("]へようこそ", 0));
writeText(text);
}
if (fg == 0){
writeText(text);
}
}
こうなります。
01-03:で、あとはどうするの?
ほんの一例だけど、
function showServerMessage(text) {
var fg = 0;
if (text.indexOf("さんがログインしました。", 0) != -1){
fg = 1;
text = text.substring(text.indexOf(">", 0)+1,text.indexOf("さんがログインしました。", 0));
writeText("Log-in:"+text);
}
if (text.indexOf("さんがログアウトしました。", 0) != -1){
fg = 1;
text = text.substring(text.indexOf(">", 0)+1,text.indexOf("さんがログアウトしました。", 0));
writeText("Log-in:"+text);
}
if (text.indexOf("]へようこそ", 0) != -1){
fg = 1;
text = text.substring(text.indexOf("[", 0)+1,text.indexOf("]へようこそ", 0));
writeText("Welcome to "+text);
}
if (fg == 0){
writeText(text);
}
}
こうすると、
「〜〜さんがログインしました。 (01/01 0:01) *.*******.ne.jp」
→「Log-in:〜〜」
「〜〜さんがログアウトしました。 (01/01 0:01) *.*******.ne.jp」
→「Log-out:〜〜」
「[********]へようこそ」
→「Welcome to [********]」
となります。
赤い部分の""の中ではタグも使えます。また"なんとか"+text+"かんとか"という風な使い方も出来るので、カラフル、そしてクールなメッセージに出来る。
02:「ログを消去しました」と気を使ってみる。
function clearLog() {
if (window.view != null) {
window.view.document.body.innerHTML = "";
writeText("ログを消去しました");
}
}
赤い一行を加えるだけ。もちろん文字列部分はタグを使うことが出来る。
03:最終的大改造
var ans;
var dec = new Array(
"font-size:0.8em;color:#ffffff;background:#000000;",//ユーザー発言
"font-size:0.8em;color:#bbbb00;background:#00000;",//サーバー(ログイン、アウト)
"margin: 0px 5%;text-align:center;width:100%;font-size:0.8em;color:#ff0000;background:#333333;filter:alpha(opacity:70);",//ログ消去
"margin: 0px 5%;text-align:center;width:100%;font-size:0.8em;color:#ffffff;background:#0000dd;filter:alpha(opacity:70);");//ようこそメッセージ
"margin: 0px 5%;text-align:center;width:100%;font-size:0.8em;color:#ffffff;background:#00dd00;filter:alpha(opacity:70);");//サーバーからのメッセージ
function writeText(text,num) {
if (window.view != null) {
window.view.document.body.innerHTML += "<span style='"+dec[num]+"'>"+text + "</span><br>";
window.view.scrollBy(0, 10000);
}
}
// アプレットがサーバからのメッセージを表示する際に呼び出します。
function showServerMessage(text) {
var fg = 0;
if (text.indexOf("さんがログインしました。", 0) != -1){
fg = 1;
text = text.substring(text.indexOf(">", 0)+1,text.indexOf("さんがログインしました。", 0));
writeText(" Log-in : "+text+" ",1);
}
if (text.indexOf("さんがログアウトしました。", 0) != -1){
fg = 1;
text = text.substring(text.indexOf(">", 0)+1,text.indexOf("さんがログアウトしました。", 0));
writeText(" Log-out : "+text+" ",1);
}
if (text.indexOf("]へようこそ", 0) != -1){
fg = 1;
text = text.substring(text.indexOf("[", 0)+1,text.indexOf("]へようこそ", 0));
writeText("Welcome to : ["+text+"]",3);
}
if(text.match('エラー: サーバとの接続が切れました。'))
{
location.reload();
}
}
// アプレットがユーザのメッセージを表示する際に呼び出します。
function showClientMessage(name, text) {
writeText(name + " : " + text,0);
}
// アプレットがメンバー一覧を表示する際に呼び出します。
function showClientList() {
var clients = "<div style='font-size:0.8em;color:#ffffff;'><nobr>入室者リスト</nobr><br>";
for (var i = 0; i < showClientList.arguments.length; i++) {
clients += "<nobr>" + showClientList.arguments[i] + "</nobr><br>";
}
clients += i+"人です。</span><br>";
window.list.document.body.innerHTML = clients;
}
// アプレットがログのクリアを要求されたときに呼び出します。
function clearLog() {
if (window.view != null) {
window.view.document.body.innerHTML = "";
writeText("Log-cleared",2);
}
}
赤い部分が主な変更点。
3〜6行目のスタイルを変更することでいろいろな効果をつけられる。
あとは、大福チャット様の用意されているtemprate.htmに上記のスクリプトを書くか
javascript部分を全部消して.jsファイルを貼り付けるかです。
サンプルダウンロード(2,383bytes) 上で説明したものです。
サンプルダウンロード(4,001bytes) 現在当サイトで使用中のものです。
サンプル(HTMLファイル付き) これを使うと楽かも
Chatへ
Otherホーム