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.

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
- -- 通りすがりさん 2011-05-06 (金) 21:36:23
早速やって見ましたら、文字も大きくできました。ありがとうございました。 -- 通りすがりさん 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
フレーム処理が無料サーバーに消されて　発言ボックスが表示されません　NOフレームバージョンお願いします -- 通りすがりさん 2010-04-02 (金) 02:14:23
私もROM禁が出来るようになって欲しいです！　この機能さえ実装されれば是非とも使いたい……。 -- てすたー 2010-07-28 (水) 16:02:44
初めまして。お名前のところにxoopsのログインユーザー名が自動で入りませんか？ -- katsumi 2011-09-03 (土) 19:29:40

Name:

Attach file:

fusen.dat 727DL [Info]

ajaxchat_2.35.zip 268DL [Info]

hypweb.net_whisper.png 211DL [Info]

ajaxchat_2.32.zip 858DL [Info]

ajaxchat_2.31.zip 1106DL [Info]

ajaxchat_2_3.zip 753DL [Info]

ajaxchat_2_2.zip 595DL [Info]

ajaxchat_2_1.zip 729DL [Info]

chat.inc.php 1763DL [Info]

ajaxchat_2_0.zip 538DL [Info]

ajaxchat_1_9.zip 542DL [Info]

ajaxchat_1_8.zip 532DL [Info]

ajaxchat_1_7_1.zip 518DL [Info]

ajaxchat_1_7.zip 515DL [Info]

ajaxchat_1_5.zip 547DL [Info]

ajaxchat_1_4.zip 489DL [Info]

ajaxchat_1_3.zip 516DL [Info]

ajaxchat_1_22.zip 572DL [Info]

ajaxchat_1_2.zip 529DL [Info]

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

Comments list

1 displayed (11 hits) View more comments...

Posts tree

Help - Install pligin ajaxchat (leco1, 2011-5-8 0:04)

Help - Install pligin ajaxchat

leco1 Posted on 2011-5-8 0:04 | Last modified

Hello naon-pon

I installed the plugin of the chat and chat in side html xpwiki and frame chat appeared when I put # chat on the wiki.

After that, I changed the file in line 88 to ajaxchat.js to lang = 'pt';

In the index.html page set up:

<script type="text/javascript">
<! -

ajaxchat_url var = 'http://bit.ly/mrqONX (filosofia.myht.org)
ajaxchat_id var = 1;
ajaxchat_staypos var = 'r ';
ajaxchat_height var = 400;
ajaxchat_cookie_domainlevel_up var = "off";
ajaxchat_lang var = 'pt';

document.write ('<script type="text/javascript" src="'+ajaxchat_url+'load.js"> <'+'/ script>');
//-->
</ script>
<noscript>
<iframe src = "http://bit.ly/kFQGSd (filosofia.myht.org)" width = "100%" height = "50"style = "border: none;" frameborder = "0" border = "0 "allowtransparency = " true "scrolling =" no "> </ iframe>
</ noscript>

Unfortunately, the chat keeps appearing in Japanese and will not appear in Portuguese.

Please check what is wrong.

Note: i use ajaxchat 235

greetings

1 displayed (11 hits) View more comments...

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@携帯