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

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

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

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

ごめんなさい。> All

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

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

最新版はこちらです。
インストール方法については AjaxChat/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

コメント

• かなり良い感じですね -- GuymHaga 2005-09-02 (金) 12:25:14
• うちの表紙に試しに設置して負荷テストしています。 -- GuymHaga 2005-09-02 (金) 14:14:51
• で、仕事中チャット（笑）のメンバーから上がっている要望は、「自動更新と手動更新の切り替え」と「表示ログ数指定」の機能でした。 -- GuymHaga 2005-09-02 (金) 14:15:54
• ご無沙汰してます。相変わらず日参してますが，いつも素通りでごめんなさい。チャットいただいて行きました。快適に動いているようです。ありがとうございます。 -- kenken 2005-09-03 (土) 19:27:25
• お久しぶりです！そちらでもチャット動いてますね〜。気づいた点があればぜひどうぞ。 -- nao-pon 2005-09-03 (土) 23:23:34
• だいぶエラー減りました。発言用のテキストエリアにフォーカスが移った場合の判断がすばらしい！ -- マグナムドライ 2005-09-04 (日) 03:55:33
• Ver 1.4さっそくいただいていきました。快調に動く姿をみて喜んでます。ありがとうございます。 -- kenken 2005-09-11 (日) 19:28:17
• すごいっすー！さっそくお持ち帰りしてごにょごにょやってみたいな、と思いました（笑） -- みるこ 2005-09-23 (金) 01:18:54
• 連投ごめんなさい（＾＾；　ところで、入室後の2秒ごとの更新って既存のチャットスクリプトなんかよりかなり頻繁な感じですが、サーバへの負荷はどーなんでしょう？ -- みるこ 2005-09-23 (金) 01:19:52
  • こんばんは。リロード方式のチャットに比べたら、サーバーへの負荷はかなり少ないと思います。 -- nao-pon 2005-09-23 (金) 22:32:30
• よく固まります。インストール方法はどこに書いてますか？ -- 通りすがりさん 2005-10-05 (水) 12:59:52
• 2.1にバージョンアップしました。今のところは問題ないようです（´∀｀） -- GuymHaga 2005-10-11 (火) 13:41:39
• 狭い画面でメンバー一覧を横にずらすと、メイン画面のスクロールバーがずれますね。このページのチャットで一覧を横に出すとわかりますが……。 -- GuymHaga 2005-10-11 (火) 13:43:29
  • 修正してみました。（Ver 2.12）
    http://hypweb.net/ajaxchat/ajaxchat.­js -- nao-pon 2005-10-12 (水) 08:57:28
• あと、うちの「全員へ」の部分には顔アイコンが出ませんがｗ -- GuymHaga 2005-10-11 (火) 13:44:18
  • 全員への部分の顔アイコンは Ver 2.11 からです。 whisper.png を imgs ディレクトリに放り込んでください。 -- nao-pon 2005-10-12 (水) 08:59:19
• 大変軽快で意外に高機能なチャットをありがとうございます。テスト運用させていただいてます。ところで、閲覧者数や閲覧者情報が自分のものしか表示されない（閲覧者数は常に１）のですが、これは現在の仕様なんでしょうか？ -- かず 2005-10-15 (土) 09:48:34
  • パーミッションが原因でしたね。 log, stay ディレクトリは、777 など httpd(Apache)がファイルを作成できる権限を与えてください。 -- nao-pon♦iq8llSWq9g 2005-10-15 (土) 09:59:52
• チャットでのご助言ありがとうございました。stayディレクトリのパーミッションで解決しました。 -- かず 2005-10-15 (土) 10:07:24
• このチャットの音は、モジラ&Firefox(Flashインストール済)では聞こえないのかな？聞こえる方いらっしゃいますか？ -- t_miyabi 2005-10-19 (水) 18:53:24
  • Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP; rv:1.7.12) Gecko/20050919 Firefox/1.0.7 で鳴ってます。 -- nao-pon(FF)♦iq8llSWq9g(«nao-pon) 2005-10-19 (水) 20:33:38
• なるほど！MIMEとかかな？調べて見ないと！ありがとうございまーす。 -- t_miyabi 2005-10-20 (木) 09:02:23
• XOOPS環境ですが、Ver.2.1にアップグレードしたら、発言ボタンをクリックするとアクセス元IPアドレスが表示されるだけで、画面が返ってこなくなってしまいました。なぜだろう？投稿の書き込み処理はできてるのですが。 -- 通りすがりさん 2005-10-24 (月) 15:58:02
• 上記、 通りすがりさんです。ドメイン変更でIFRAME内で指定しているチャットシステムのURLが間違っているだけでした。大変失礼！ -- 通りすがりさん 2005-10-24 (月) 16:23:32
• ajaxchatいただきました。早速自分のサイトで」チャット会も開き大成功を収めました。ありがとうございました。 -- 通りすがりさん 2005-11-05 (土) 17:00:43
• 設置してみたのですが、発言しても、チャット画面は真っ白のままです。なぜでしょう？ -- 通りすがりさん 2005-12-24 (土) 19:39:30
• 上記、通りすがりです。index.htmlにリンクさせて、 log, stay ディレクトリのパーミッションを777にしたら、上手くいきました。初歩的段階でつまづいてました、すみません。 -- 通りすがりさん 2005-12-25 (日) 23:15:23
• ある程度のところで、ログの一部を過去ログ化することを考えないといけないな〜
  今調べたら、野ブタ。をプロデュース のチャットのログが 43MB ほどに膨らんでしまってる〜〜。
  かなり驚いた・・・。さて、どのように実現すべきかな？ここまで大きくなっちゃうとPHPにすべて読み込んで処理することは不可能だな・・・ははは・・・ -- nao-pon♦iq8llSWq9g 2006-01-06 (金) 21:15:23
• Ver 2.2 ajaxchat_2_2.zip を放ちました。 -- nao-pon♦iq8llSWq9g 2006-01-07 (土) 10:41:34
• おい -- akane 2006-01-12 (木) 17:46:02
•   いい -- akane 2006-01-12 (木) 17:46:47
• IE6だとサウンドが鳴りません。FireFoxだと問題なく鳴るんですが(>_<) -- 通りすがりさん 2006-01-19 (木) 16:06:31
• ↑のサウンドの問題ですがFlashプラグインをアンインストールして再起動後Flashを入れ直したら鳴るようになりました(>_<) -- 通りすがりさん 2006-01-23 (月) 13:46:36
• 使わせて頂いています。素晴らしいです。１つ要望として、サイト閲覧の際に自動で入退室する機能を挙げておきます。 -- Mayim 2006-01-25 (水) 19:04:39
• ii -- akane 2006-02-03 (金) 17:28:17
• キック申請機能を付けた ajaxchat_2_3.zip を放ちました。 -- nao-pon 2006-02-03 (金) 23:08:29
• こんばんわぁ　Zoopsのカスタムブロックに設置しようとしているのですが、表示されません。直打ちすると表示されるので設置は問題無いと思います。ブロックにiframe部分だけを打つと表示されます。javaの部分を入れると何も表示されない状態です。誰か助けて下さい。 -- 通りすがりさん 2006-02-05 (日) 17:29:51
• ↑少し間違えました。　直打ちすると１部だけ表示されます。宜しくお願いします。 -- 通りすがりさん 2006-02-05 (日) 17:32:05
• 消し方分からないので、何度もすみません。iframe部分だけを打つと一部カスタムブロックに表示されます。 -- 通りすがりさん 2006-02-05 (日) 17:34:30
• 慌てて間違ってばかり＾＾すみませんnao-ponさんZoopsじゃなくてXoopsです。 -- 通りすがりさん 2006-02-06 (月) 22:49:53
• カスタムブロックのコンテンツのタイプは HTMLタグ になってるかな？ -- nao-pon♦iq8llSWq9g 2006-02-07 (火) 19:33:08
• うわぁnao-ponさんレスすみません＾＾ローカルにアップして、呼び出し時　var ajaxchat_urlとiframe src="./ajaxchat.htm"にhttp://からのアドレスを書けば表示されました。お騒がせしました。それから要望なのですが、なりすましは回避できるのですが、多重は幾つでも出来るんです。クッキーから他のHNでの入室を拒否するなんてことは、お願い出来ないでしょうか。何時も素晴らしいスクリプトを有り難う御座います。ユーザ登録はしているのですがチャットページなので通りすがりで失礼しました。設置ページはPMいれておきます。 -- 通りすがりさん 2006-02-07 (火) 21:37:41
  • ハンドルネームを変更できないようにすることはできるけど、1台のパソコンを家族で共有してる時とか困るよね・・・。そもそも、クッキー消されたら終わりだし・・・。
    するなら、1台のパソコンで利用できるハンドルネームの数を制限するとかかな？考えがまだまとまらないけど。 -- nao-pon♦iq8llSWq9g 2006-02-08 (水) 09:01:40
• お疲れ様です。最近は親子で交代して使うとか有りますから、その場合同じチャットを使うとまずいですね＾＾良いお考えが有れば宜しくお願いします。 -- 通りすがりさん 2006-02-08 (水) 20:14:51
• はじめまして。AjaxChatを私のサイトに設置させていただきました。とても軽くていいですね。で、設置の際に経験したことをご報告します。xoopsのカスタムブロックで呼び出したのですが、readmeをコピペしただけではうまくいかず、いろいろ調べてやってみましたら、JavaScriptのDocument.writeの中の</script>を<'+'/script>としたらうまくいきました。、</script>でJavaScriptのスクリプト記述部分が終了と認識されていたようです。以上ご報告まで。 -- emIku 2006-02-11 (土) 22:34:35
• AjaxChat、とても軽快で重宝しております。AjaxChatは改造しても構わないものでしょうか？ -- 通りすがりさん 2006-02-14 (火) 08:37:41
  • 元ネタのライセンスがはっきりしていないので、ライセンスは決めてないんですけど、改造して使って頂くのは問題ないです。 -- nao-pon 2006-02-18 (土) 01:07:19
• 亀ちゃん　ラブ -- あおい＋まきこ 2006-03-24 (金) 15:21:23
• 最新版の2.3で500エラー出ちゃうんですけど・・・なんでだろ？ -- 通りすがりさん 2006-04-05 (水) 18:39:21
• 入、入退、退で表示された経過が微妙に異なるのだけど、こういうものなのかな？ -- 通りすがりさん 2006-04-09 (日) 09:36:26
• 素晴らしいプログラムをありがとうございます！これって、別ウインドウで表示って事は可能でしょうか？そしたらそのウインドウだけ開きっぱなしにしておいて、自由にXoopsを見て回れますので・・・ -- 通りすがりさん 2006-04-30 (日) 17:02:54
• http://www.dos-v.biz/　にajaxchatいれてみたんですが、　どうやってwikiから呼び出すんですか？XOOPSマニアさんとこみたいに、ユーザーが自由にチャットページ作れるようにしたいんですが。 -- 通りすがりさん 2006-05-01 (月) 08:53:37
• ディスカスがうまく行かなかったので探してました。ありがとです。うちに帰ったらDLしようと思います。今会社なので。 -- Akibow 2006-05-18 (木) 15:14:06
• とても素敵なチャットです。それぞれの発言に日時がつかないでしょう？ -- 通りすがりさん 2006-05-30 (火) 11:48:09
• 発言にカーソル合わせると日時表示される！よくできてる！ -- 通りすがりさん 2006-05-30 (火) 16:37:07
• 発言があると，ウィンドウが点滅して知らせてくれる機能とかできませんでしょうか？ -- 通りすがりさん 2006-05-30 (火) 16:46:58
• 俺的xoopsで利用できている人いる？　チャット自体は見られるのだが、JavaScriptが使えん・・・。 -- 通りすがりさん 2006-07-18 (火) 23:14:13
• php-5.1.3とanhttpd1.42pで動作を試みているのですが、うまく行きません…。どなたか似たような環境で利用できている方いらっしゃいますか？ -- mesox 2006-08-05 (土) 18:32:43
• うちも2.31で500エラー出ちゃう・・・ -- 通りすがりさん 2006-08-18 (金) 16:39:34
• 原因は、.htaccessにありました。削除したら動きました。 -- 通りすがりさん 2006-08-18 (金) 20:18:55
• AjaxChat、愛用させていただいております。ただうちのサイトで使うと、入室読み込み時にパチャパチャと全部のログを読み込み、そのうえログがしょっちゅう消えます。また「最後の発言」が「NaN秒前」になってしまいます。ご教授お願いします。 -- きりたんぽ 2006-09-16 (土) 00:48:01
• あと表示時（入室前）にログが表示されません。 -- kirikiri 2006-09-17 (日) 02:26:10
• 最終発言: ログを読み込んでいます... 　で止まってしまい、チャットができません。入室時の音もならないのですが…。 -- 通りすがりさん 2006-09-20 (水) 13:49:29
• 愛用してます！ただ，たまに，更新できなくなることがあります。ログファイルを削除してやると，更新できるようになりますが，何故でしょうか？分かる方教えてください。 -- 通りすがりさん 2006-09-20 (水) 21:12:49
• 98SEやME＋IE6で文字化けします。対処方法ご教授下さい。 -- 通りすがりさん 2006-09-23 (土) 20:52:01
• ↑「Arial Unicode MS」というフォントをインストールすることにより、自己解決いたしました。 -- 通りすがりさん 2006-09-27 (水) 16:38:11
• Apache2.0.52で試していますが、お名前が「名無し」→「蜷咲┌縺」に文字化けします。 -- kazy 2006-10-12 (木) 12:33:36
• 接続状態がdisconnectになってしまいます。IISで動かしています。 -- 通りすがりさん 2006-10-12 (木) 15:44:35
• 伝言機能を付けてみました。あと、Win32環境で過去ログがうまく生成されない問題があるようです。こちらにサンプルとオリジナルとのdiffを置いてみましたので、もし良ければ参考にしてみてください。 -- mitty 2006-10-27 (金) 00:41:11
• 頂いて自鯖にあげたんですが、自鯖がHTTP1.1で通信しているのでブラウザ側を1.1で受けないようにしないと使えません。1.1対応って可能なんですか？ -- 通りよがりさん 2006-12-23 (土) 01:28:13
• 一部ログ削除って可能ですか？。不適切な部分だけ削除とか・・・現状、ログのテキスト編集でやっているのですが。 -- 通りすがりさん 2007-01-31 (水) 01:36:50
• 内緒でこのサイトでだけstyle.cssの#faceにwidth入れてあるなんて・・・ずるいです。(Firefoxユーザ) -- 通りすがりさん 2007-05-18 (金) 12:10:04
  • そういえば、CVSを修正してその後すっかり忘れてました。 Ver 2.32 としてパックして上げておきました。 -- nao-pon♦iq8llSWq9g 2007-05-18 (金) 16:13:31
• ホント初歩的な質問ですんません＞＜；　xoopsのカスタムブロック上では、動かせたのですが、Wiki上でajaxchatを動かせません。どうすれば、ajaxchatをModやxp上で動かすことが出来るんですか？　2週間近く延々悩み続けてもう限界ですorz -- ど素人さん 2007-08-11 (土) 17:41:38
• すいません。上の件、自己解決しました。プラグインディレクトリのread meの存在に気づいてませんでした:D 　どうもおさわがせしました。 -- ど素人さん 2007-08-13 (月) 15:28:22
• chatをインストールさせていただいたのですが、文字化けがひどすぎて使い物になりません 　何か良い対処法は、無いでしょうか？ -- 通りすがりさん 2007-08-15 (水) 14:59:10
• ↑環境は、PHP4.3MySQL4.1　です。 -- 通りすがりさん 2007-08-15 (水) 15:00:16
• すべての発言に名前を表示できるようにしてくれませんか？ -- 通りすがりさん 2007-08-19 (日) 23:42:42
• 今のままだと大人数で会話する際に不便なので -- 通りすがりさん 2007-08-20 (月) 00:10:50
• すごくいいです。改造してアバターチャットを作ってみました。 -- 通りすがりさん 2007-09-07 (金) 01:55:55
• 携帯でログを表示したり、発言したりできないかなとw -- 通りすがりさん 2007-09-09 (Sun) 16:26:52
•   サウンドに関しての問題です。私がここのサンプルチャットを利用する時には音がしましたが、自分で設置したチャットでは音がしません。そこで、こちらの掲示板内容（先輩だちが書いたヒント）にあわせっていろいろ試してみましたがやはり原因が見つからないのです。それでも、私はやはり自分が設置する時にとこかでミスをしてるんじゃないかと思いこちらでヒントを探るに参りました。誰かさんがいいヒントをくれませんか？助かります！ -- koko 2007-10-09 (火) 06:45:29
• ↑の原因の一つを見つけました。私のネットシステムのばいは契約のとおり限れたファイル種類しかリモートできません。そこで、ajachatのファイル.ｈtaccesがリモート範囲外でしたとおもわれます。もし、サウンドの不具合がこの原因だとしたら、私の係数のばいはどんな方法で解決できるでしょうか？忙しいところだと思いますが、ぜひ、教えてください！おねがいします！;( あ、そうだ、こちらのサイトとバナーリンクをしたいですが自分で作ってもよろしいですか？（私の理解ではこちらのサバーアイコンは-h.--というアイコン？）できればこちにある物を使用したいですが… -- koko 2007-10-09 (火) 11:47:02
• これに簡易的なものでいいから携帯にも対応したら最高なんですけどねー -- 通りすがりさん 2008-11-20 (木) 16:02:27

似たような BLOG