Ajax でチャットを作ってみた [nao-pon/blog/2005-08-27] - UsersWiki

Table of contents

- Ajax でチャットを作ってみた
- コメント

Ajax でチャットを作ってみた

動作例

サンプルチャットです。ご自由にお試しください。

JavaScript(Ajax) でチャットのプログラムを組み立ててみました。

きっかけは、yosha_01さんのディスカス
です。
はじめは、このディスカスをいじってみようと思ったのですが、汎用的なものを作ってみたかったので、最速インターフェース研究会-Ajaxを使ったシンプルなチャットを元にごにょごにょしてみました。

本当は、PukiWikiModのバグが上がってきているのでその修正をしなくてはいけないところなのですが、ついついこちらに走ってしまいました。

ごめんなさい。> All

このチャットは<iframe>呼び出しで、id を指定することにより、いくつでも部屋を作ることができます。
XOOPSのカスタムブロックに使ってもいいし、PukiWikiMod から呼び出して、ページごとに簡単に設置したりできます。

とりあえず、現状のものを置いておきますので、ごにょごにょしたい人は適当に使ってください。

最新版はこちらです。
インストール方法については readme をご覧ください。

PukiWikiMod用プラグイン
- chat.inc.php
  - ソース中で ajaxchat.htm のURLを指定しています。

環境に合わせて修正してください。

~~ajaxchat.zip~~
~~ajaxchat.js~~
- JavaScript でエラーが出ることがあったので修正しました。

さらにバージョンアップ 2005-08-30

~~ajaxchat_0.zip~~

またまたバージョンアップ 2005-08-31

~~ajaxchat_1.zip~~
- 内緒話＆入室者情報の管理をIPからIDに変更。

同一IPの別マシンを識別できるようになりました。

- 手元のパソコンとサーバーとの時間のずれを吸収するようにしました。
- 自動発言を今までの Enterキーに加え「、」「。」「スペース」の入力で行えるようにし、それぞれを選択できるようにしました。
- 改行ができるようになりました。
  - 自動発言の「Enter」をOFFにすることで改行できるようになります。
- Cookie を保存するかどうかを選択できるようにしました。
- 発言時に JavaScript のバージョンをチェックし、必要ならばキャッシュ更新を促すリンクをチャット画面に内緒話モードで表示するようにしました。

とりあえずこれで一段落? 2005-09-01

~~ajaxchat_1_1.zip~~
- 発言の色を設定できるようにしました。
- ログデータがないときにJavaScriptエラーになっていたのを修正しました。

~~ajaxchat_1_2.zip~~ - まだまだ、直すところがありました。
- 名前欄に ' とか " を入れた場合に正常に動作しなかったので修正。
- その他、細かいところをもろもろ修正。

早くFIXしたいな・・・ 2005-09-03

~~ajaxchat_1_22.zip~~
- 発言間隔が長い場合に「この間にx時間経ちました・・・」を表示するようにした。
- 発言用のテキストエリアにフォーカスが移った場合「入室」と判断するようにした。
- 入室・退室の[お知らせ]案内を出すようにした。
- JavaScriptエラーが出ることがある問題の対策をした。

いつまで続く？ (Ver 1.3) 2005-09-07

~~ajaxchat_1_3.zip~~
- 順番に遡って過去の発言を表示できるようにした。
- 過去の発言を閲覧中は、新しい発言があっても最下部まで自動スクロールしないようにした。
- その他、諸々修正。

まだまだ続く？ (Ver 1.4)2005-09-11

~~ajaxchat_1_4.zip~~
- フェイスマークを入力できるようにしました。
- 内緒話の時相手のID表示が自分のIDを表示していたのを修正しました。

ちょっとした変更 (Ver 1.5)2005-09-14

~~ajaxchat_1_5.zip~~
- 入退室情報のログへの記録方法を変更。(国際対応化への道？)
- 色指定を解除できるように。

ポップアップ対応 (Ver 1.6)

未公開です。
- 別窓でポップアップ出来るようにしてみました。
- サーバー負荷対策として、入室前は60秒チェックに。
- 「~さんが通り過ぎました。」とか表示上の微調整。

Opera に対応 (Ver 1.7)2005-09-23

~~ajaxchat_1_7.zip~~
- Operaの無料化記念として・・・
- 様々な微調整。
~~ajaxchat_1_7_1.zip 15:25:02~~
- FireFoxなどで、ログの部分読み込みに失敗していたので、修正しました。

お知らせ音が鳴るようにしてみたり (Ver 1.8) 2005-09-27

~~ajaxchat_1_8.zip~~
- 入室・退室・発言時に音で知らせるようにしてみた。
- 詳細設定ボタンを追加。
  - 音のON・OFFなども設定できるようにしました。
- Ver 1.7 で不具合のあった、入室者情報を修正。
- ajaxchat.htm から ajaxchat.js へ移動できるものは、移動しました。(まだ、続行中)
- その他諸々修正してます。

無視機能追加など (Ver 1.9) 2005-10-01

~~ajaxchat_1_9.zip~~
- 特定の発言者を無視(発言を表示しない)できる機能を追加しました。
- ajaxchat.htm をスリム化
- 内緒時のサウンド追加
- その他諸々調整

閲覧者情報を右サイドへ (Ver 2.0) 2005-10-02

~~ajaxchat_2_0.zip~~
- 閲覧者情報を上部または右サイド表示に切り替えられるようにしました。
  - 初期状態を右サイドにしたい場合は、<iframe> 呼び出しの ajaxchat.htm のパラメーターに staypos=r を追加してください。

ajaxchat.htm?id=1&staypos=r てな具合です。

- 内緒話中は、入室者欄の名前を反転表示するようにしました。
- その他、あちこちら微調整。

トリップ対応など (Ver 2.1) 2005-10-08

~~ajaxchat_2_1.zip~~
- 成りすまし防止に効果のあるトリップに対応しました。
  - 名前欄に名前#任意の文字列と入力すると、チャット画面の名前の下にトリップが表示されます。
- ユーザーが、入室・退室・経過時間のシステム通知をON・OFFできるようにしました。詳細設定で設定できます。
- その他、微妙に修正多数。

過去ログ切り出し機能など (Ver 2.2) 2006-01-07

~~ajaxchat_2_2.zip~~
- ログが大きくなった時に過去ログとして切り出すようにしました。

新たに bak ディレクトリが追加されています。パーミッションを 777等にしてください。

- - 既定では、ログのサイズが約1MBを越えると、50KBを残して過去ログとして bak/bak_[ID]_]TIMESTUMP].utxt というファイルを作成します。

キック申請機能の追加など (Ver 2.3) 2006-02-03

~~ajaxchat_2_3.zip~~
- キック申請機能の追加。
- 諸々バグ修正。

(Ver 2.31)

(Ver 2.32)

style.css の修正など

~~ajaxchat_2.32.zip~~

(Ver 2.35)

言語ファイル "es", "pt"(by leco) を追加。

ajaxchat_2.35.zip

CVS 最新版

Show recent 15 comments. Go to the comment page.

動作しない原因がわからなかったので、設置を諦めます、サポートしないならしないできちんと書いておいてくれたら、無駄な時間をかけずに済みました -- 通りすがりさん 2008-12-14 (日) 23:56:28
- 手が回らなくてすみません。無駄な時間をとらせてしまいましたか・・・ -- nao-pon 2008-12-16 (火) 17:57:22
動作環境を、解りやすく掲示しておくべきじゃないのか？動かないというコメントの数倍、設置に悩んだ人居ますよ？ -- 通りすがりさん 2008-12-17 (水) 11:11:41
- readme に書きました。 -- nao-pon 2008-12-17 (水) 12:10:01
いつもつかわせていただいてます。ありがとうございます -- 通りすがりさん 2009-06-19 (金) 23:38:36
emIku さん＠2006-02-11、情報ありがとうございます。PHPからajaxchatを読んでいるページをFirefoxでみたときにチャット画面がでない症状があったのですが、ご指摘の修正を加えることで表示されました -- 通りすがりさん 2009-06-20 (土) 00:12:48
Firefoxで上のサンプルも含めて表示されなくなりましたね。本体は3.5にしてないので、何かアドオンと衝突しているのか……Drag&DropZones 1.2.5、FEBE 6.1、IE Tab、Java Quick Starter 1.0、Skype extension for Firefox 3.3.0.3290しかいれていないのですが -- 通りすがりさん 2009-07-05 (日) 10:50:07
- Firefox 3.0.11, 3.5 でテストしてみましたが特に問題はないようです。やはり、アドオンの絡みかも。 -- nao-pon 2009-07-06 (月) 08:33:21
すみません、nao-ponさんわざわざご確認いただいたのですね。検証ありがとうございました。アドオン絡みじゃぁどうしようもないですね（＞＜。。 -- 通りすがりさん 2009-08-09 (日) 00:52:25
Xoopsでのカスタムブロックへの設置に苦労しましたが、上の方にあったコメントで「JavaScriptのDocument.writeの中の</script>を<'+'/script>」とすれば良い、というのを見てその通りにしたら、無事設置できました！　ところで、サイドブロックに表示したいため、横２列の状態ではなく縦に並ぶレイアウトを初期状態にできればと思うのですが… -- 通りすがりさん 2009-10-10 (土) 16:47:49
すみません、説明よく読んでませんでした。ajaxchat_stayposを変えれば、レイアウト変えられたんですね。 -- 通りすがりさん 2009-10-21 (水) 13:04:14
非常に可愛い感じに仕上がっていて、楽しく使わせて頂いています。お願いがありますが、文字のサイズを変更と、行間を少し広げたい野ですが。何処をいじったら良いのでしょうか？それと、発言時の文字サイズの変化や、出来れば太字・傾斜文字など使えたらうれしいのですが。チャベリぐらいの感じにしあがりませんか？ -- 通りすがりさん 2009-10-25 (日) 08:53:05
- 文字サイズの変更と行間の調整は、CSS(style.css) で調整します。43行目あたりからの
  43 44 45 46 47 48 49
  - | ! - | | !
  input, textarea, td { font-size:12px; } td { padding: 0px 2px 0px 2px; line-height: 1.2em; }
  で調整してください。
  ＜発言時の文字サイズの変化や、太字・傾斜文字＞などは対応するのは難しいです。 -- nao-pon 2009-10-28 (水) 22:39:31
早速ありがとうございます。とにかく一度試してみますね。ありがとうございました。 -- 通りすがりさん 2009-10-29 (木) 11:33:57
早速やって見ましたら、文字も大きくできました。ありがとうございました。 -- 通りすがりさん 2009-10-31 (土) 10:54:58
もう一つお願いがあるのですが、外ロムを禁止する、あるいは全てのロムを削除し新たに入室したところからしか見えないようにはできませんでしょうか？無理でしたら仕方がありませんが、教えて頂けたら幸いです。 -- 通りすがりさん 2009-10-31 (土) 10:57:37
teste -- leco1 2010-01-17 (日) 02:01:06
ajaxchatをxoopscubuモジュールにして下さい。 -- 通りすがりさん 2010-01-19 (火) 21:47:27
いつもお世話になっています、最新版２．３５を使わせて頂きましたが、全て英語表記になっていました、日本語表記は無いのでしょうか？それと、どう設定しても参加者が表示されません。どうしたら表示出来るか教えてください。あと、ここにある絵文字等をチャットに入れることはできませんか？教えたくれたら幸いです。 -- 通りすがりさん 2010-02-03 (水) 12:52:01

Name:

Attach file:

ajaxchat_2.35.zip 20DL [Info]

fusen.dat 423DL [Info]

hypweb.net_whisper.png 85DL [Info]

ajaxchat_2.32.zip 722DL [Info]

ajaxchat_2.31.zip 1019DL [Info]

ajaxchat_2_3.zip 617DL [Info]

ajaxchat_2_2.zip 481DL [Info]

ajaxchat_2_1.zip 609DL [Info]

chat.inc.php 971DL [Info]

ajaxchat_2_0.zip 415DL [Info]

ajaxchat_1_9.zip 423DL [Info]

ajaxchat_1_8.zip 415DL [Info]

ajaxchat_1_7_1.zip 400DL [Info]

ajaxchat_1_7.zip 388DL [Info]

ajaxchat_1_5.zip 412DL [Info]

ajaxchat_1_4.zip 375DL [Info]

ajaxchat_1_3.zip 404DL [Info]

ajaxchat_1_22.zip 452DL [Info]

ajaxchat_1_2.zip 425DL [Info]

ajaxchat_1_1.zip 405DL [Info] ... more 4 files. [ Show All ]

Comments list

Install AjaxChat

leco1 Posted on 2010-1-17 2:15 | Last modified

Hi
Detete this in script to set ajaxchat in iframe

');
//-->

Thanks

Re: nao-pon/blog/2005-08-27

leco1 Posted on 2010-1-17 2:49

How is this possible to configure the ajaxchat to English?

Re: nao-pon/blog/2005-08-27

nao-pon Posted on 2010-1-17 22:11

Hi, leco1!

Please add a parameter "var ajaxchat_lang = 'en';" into HTML. with next load.js.

load.js

(Ex.)

 
 
-
|
|
|
|
|
|
|
|
|
!

<!--========== AjaxChat ==========-->
<script type="text/javascript">
<!--
 
	var ajaxchat_url     = './';
	var ajaxchat_id      = 1;
	var ajaxchat_staypos = 'r';
	var ajaxchat_height  = 400;
	var ajaxchat_cookie_domainlevel_up = "off";
	var ajaxchat_lang    = 'en';
	
	document.write('<script type="text/javascript" src="'+ajaxchat_url+'load.js"><'+'/script>');
//-->
</script>
<noscript>
    <iframe src="./ajaxchat.htm" width="100%" height="50" style="border:none;" frameborder="0" border="0" allowtransparency="true" scrolling="no"></iframe>
</noscript>
<!--========== AjaxChat ==========-->

Re: nao-pon/blog/2005-08-27

leco1 Posted on 2010-1-20 10:23 | Last modified

Hi non-pon

I downloaded this file load.js and update module.
Then, i used this script in the custom block but the chat does not appear

<!--========== AjaxChat ==========--> <script type="text/javascript">
<!--
 
 	var ajaxchat_url     = 'http://------/-----/ajaxchat/ajaxchat.htm';
 	var ajaxchat_id      = 1;
 	var ajaxchat_staypos = 'r';
 	var ajaxchat_height  = 400;
 	var ajaxchat_cookie_domainlevel_up = "off";
 	var ajaxchat_lang    = 'en';
 	
 	document.write('<script type="text/javascript" src="'+ajaxchat_url+'load.js"><'+'/script>');
 //-->
 
</script> <noscript>
 
    <iframe src="http://-----/----/ajaxchat/ajaxchat.htm" width="100%" height="50" style="border:none;" frameborder="0" border="0" allowtransparency="true" scrolling="no"></iframe>
 
</noscript> <!--========== AjaxChat ==========-->

Please check where the error

Thanks

Re: nao-pon/blog/2005-08-27

nao-pon Posted on 2010-1-20 10:37

May be...

var ajaxchat_url     = 'http://xoopersbr.com/modules/ajaxchat/';

<iframe src="http://xoopersbr.com/modules/ajaxchat/ajaxchat.htm" width="100%" height="50" style="border:none;" frameborder="0" border="0" allowtransparency="true" scrolling="no"></iframe>

:thumb_up:

Re: nao-pon/blog/2005-08-27

leco1 Posted on 2010-1-20 10:45 | Last modified

Thanks non-pon
Now ok
You do not have the translation into English, as translated from Japanese to Portuguese and very complicated for us Westerners

Re: nao-pon/blog/2005-08-27

nao-pon Posted on 2010-1-20 12:07

I visited your site. And, it knew AjaxChat to be old.

Please download a new version from CVS to use the language switch function.

http://cvs.sourceforge.jp/cgi-bin/viewcvs.cgi/hypweb/ajaxchat.tar.gz?view=tar

It is difficult for me to write English contents. Because my English ability is low.

I am always looking for the person who helps. :-D

Re: nao-pon/blog/2005-08-27

leco1 Posted on 2010-1-20 23:02

Hi nan-pon

I downloaded this pack and i will update ajaxchat in http://bit.ly/6B6iD6 (xoopersbr.com.)

Use this to translate to english from japonese:

http://bit.ly/4qDkU5 (translate.google.com)|en|

I used the xoops of xoops.org but, after testing the xoopscube realized that this is much better, especially in relation to available module.

I use xoops from long time and the modules developed by the Japaneses, especially the suits D3, are the best.

Thanks

Re: nao-pon/blog/2005-08-27

え Posted on 2010-2-10 23:44

ユーザー名をXoopsIDで自動的に表示するようにしたいのですができますか？

9 displayed (9 hits) View more comments...

Post a new comment

Page Info
Page Name :	nao-pon/blog/2005-08-27
Page aliases :	None
Page owner :	nao-pon
Can Read
Groups :	All visitors
Users :	All visitors
Can Edit
Groups :	No one
Users :	nao-pon@携帯