ページへ戻る

− Links

 印刷 

Ajax でチャットを作ってみた :: XOOPS マニア

UsersWiki:nao-pon/blog/2005-08-27
ページ内コンテンツ
    • Ajax でチャットを作ってみた
      • さらにバージョンアップ 2005-08-30
      • またまたバージョンアップ 2005-08-31
      • とりあえずこれで一段落? 2005-09-01
      • 早くFIXしたいな・・・ 2005-09-03
      • いつまで続く？ (Ver 1.3) 2005-09-07
      • まだまだ続く？ (Ver 1.4)2005-09-11
      • ちょっとした変更 (Ver 1.5)2005-09-14
      • ポップアップ対応 (Ver 1.6)
      • Opera に対応 (Ver 1.7)2005-09-23
      • お知らせ音が鳴るようにしてみたり (Ver 1.8) 2005-09-27
      • 無視機能追加など (Ver 1.9) 2005-10-01
      • 閲覧者情報を右サイドへ (Ver 2.0) 2005-10-02
      • トリップ対応など (Ver 2.1) 2005-10-08
      • 過去ログ切り出し機能など (Ver 2.2) 2006-01-07
      • キック申請機能の追加など (Ver 2.3) 2006-02-03
      • (Ver 2.31)
      • (Ver 2.32)
      • (Ver 2.35)
      • CVS 最新版
    • コメント

Ajax でチャットを作ってみた anchor.png[1]

Tag: プログラミング[2]
動作例 anchor.png[3]

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

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

きっかけは、yosha_01さんのディスカス[4]

です。

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

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

ごめんなさい。> All

このチャットは<iframe>呼び出しで、id を指定することにより、いくつでも部屋を作ることができます。

XOOPS[6]のカスタムブロックに使ってもいいし、PukiWikiMod から呼び出して、ページごとに簡単に設置したりできます。

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

最新版はこちらです。

インストール方法については readme[7] をご覧ください。

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

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

Page Top

さらにバージョンアップ :) 2005-08-30 anchor.png[11]

Page Top

またまたバージョンアップ 2005-08-31 anchor.png[13]

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

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

とりあえずこれで一段落? 2005-09-01 anchor.png[15]

  • fileajaxchat_1_1.zip[16]
    • 発言の色を設定できるようにしました。
    • ログデータがないときにJavaScriptエラーになっていたのを修正しました。
  • fileajaxchat_1_2.zip[17] - まだまだ、直すところがありました。 :p
    • 名前欄に ' とか " を入れた場合に正常に動作しなかったので修正。
    • その他、細かいところをもろもろ修正。
Page Top

早くFIXしたいな・・・ 2005-09-03 anchor.png[18]

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

いつまで続く？ (Ver 1.3) 2005-09-07 anchor.png[20]

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

まだまだ続く？ (Ver 1.4)2005-09-11 anchor.png[22]

  • fileajaxchat_1_4.zip[23]
    • フェイスマークを入力できるようにしました。
    • 内緒話の時相手のID表示が自分のIDを表示していたのを修正しました。
Page Top

ちょっとした変更 (Ver 1.5)2005-09-14 anchor.png[24]

  • fileajaxchat_1_5.zip[25]
    • 入退室情報のログへの記録方法を変更。(国際対応化への道？)
    • 色指定を解除できるように。
Page Top

ポップアップ対応 (Ver 1.6) anchor.png[26]

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

Opera に対応 (Ver 1.7)2005-09-23 anchor.png[27]

  • fileajaxchat_1_7.zip[28]
    • Operaの無料化記念として・・・ :D
    • 様々な微調整。 ;)
  • fileajaxchat_1_7_1.zip[29] 15:25:02
    • FireFoxなどで、ログの部分読み込みに失敗していたので、修正しました。
Page Top

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

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

無視機能追加など (Ver 1.9) 2005-10-01 anchor.png[32]

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

閲覧者情報を右サイドへ (Ver 2.0) 2005-10-02 anchor.png[34]

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

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

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

トリップ対応など (Ver 2.1) 2005-10-08[36] anchor.png[37]

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

過去ログ切り出し機能など (Ver 2.2) 2006-01-07 anchor.png[39]

  • fileajaxchat_2_2.zip[40]
    • ログが大きくなった時に過去ログとして切り出すようにしました。

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

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

キック申請機能の追加など (Ver 2.3) 2006-02-03 anchor.png[41]

Page Top

(Ver 2.31) anchor.png[43]

Page Top

(Ver 2.32) anchor.png[44]

style.css の修正など

Page Top

(Ver 2.35) anchor.png[46]

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

Page Top

コメント anchor.png[51]

最新の15件を表示しています。 コメントページを参照[52]

  • emIku さん＠2006-02-11、情報ありがとうございます。PHPからajaxchatを読んでいるページをFirefoxでみたときにチャット画面がでない症状があったのですが、ご指摘の修正を加えることで表示されました -- 通りすがりさん[53] 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しかいれていないのですが -- 通りすがりさん[53] 2009-07-05 (日) 10:50:07
    • Firefox 3.0.11, 3.5 でテストしてみましたが特に問題はないようです。やはり、アドオンの絡みかも。 :thinking: -- nao-pon[54] 2009-07-06 (月) 08:33:21
  • すみません、nao-pon[54]さんわざわざご確認いただいたのですね。検証ありがとうございました。アドオン絡みじゃぁどうしようもないですね（＞＜。。 -- 通りすがりさん[53] 2009-08-09 (日) 00:52:25
  • Xoops[6]でのカスタムブロックへの設置に苦労しましたが、上の方にあったコメントで「JavaScriptのDocument.writeの中の</script>を<'+'/script>」とすれば良い、というのを見てその通りにしたら、無事設置できました！　ところで、サイドブロックに表示したいため、横２列の状態ではなく縦に並ぶレイアウトを初期状態にできればと思うのですが… -- 通りすがりさん[53] 2009-10-10 (土) 16:47:49
  • すみません、説明よく読んでませんでした。ajaxchat_stayposを変えれば、レイアウト変えられたんですね。 -- 通りすがりさん[53] 2009-10-21 (水) 13:04:14
  • 非常に可愛い感じに仕上がっていて、楽しく使わせて頂いています。お願いがありますが、文字のサイズを変更と、行間を少し広げたい野ですが。何処をいじったら良いのでしょうか？それと、発言時の文字サイズの変化や、出来れば太字・傾斜文字など使えたらうれしいのですが。チャベリぐらいの感じにしあがりませんか？ -- 通りすがりさん[53] 2009-10-25 (日) 08:53:05
    • 文字サイズの変更と行間の調整は、CSS(style.css) で調整します。43行目あたりからの
      Everything is expanded.Everything is shortened.
      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[54] 2009-10-28 (水) 22:39:31
  • 早速ありがとうございます。とにかく一度試してみますね。ありがとうございました。 -- 通りすがりさん[53] 2009-10-29 (木) 11:33:57
  • 早速やって見ましたら、文字も大きくできました。ありがとうございました。 -- 通りすがりさん[53] 2009-10-31 (土) 10:54:58
  • もう一つお願いがあるのですが、外ロムを禁止する、あるいは全てのロムを削除し新たに入室したところからしか見えないようにはできませんでしょうか？無理でしたら仕方がありませんが、教えて頂けたら幸いです。 -- 通りすがりさん[53] 2009-10-31 (土) 10:57:37
  • teste -- leco1[55] 2010-01-17 (日) 02:01:06
  • ajaxchatをxoopscubuモジュールにして下さい。 -- 通りすがりさん[53] 2010-01-19 (火) 21:47:27
  • いつもお世話になっています、最新版２．３５を使わせて頂きましたが、全て英語表記になっていました、日本語表記は無いのでしょうか？それと、どう設定しても参加者が表示されません。どうしたら表示出来るか教えてください。あと、ここにある絵文字等をチャットに入れることはできませんか？教えたくれたら幸いです。 -- 通りすがりさん[53] 2010-02-03 (水) 12:52:01
  • フレーム処理が無料サーバーに消されて　発言ボックスが表示されません　NOフレームバージョンお願いします -- 通りすがりさん[53] 2010-04-02 (金) 02:14:23
  • 私もROM禁が出来るようになって欲しいです！　この機能さえ実装されれば是非とも使いたい……。 -- てすたー 2010-07-28 (水) 16:02:44
  • 初めまして。お名前のところにxoops[6]のログインユーザー名が自動で入りませんか？ -- katsumi 2011-09-03 (土) 19:29:40
お名前:
Last-modified: 2020-06-04 (木) 22:19:33 (JST) (1419d) by nao-pon
ページ別名: 未設定
ページオーナー: nao-pon
サイト管理者: nao-pon

Links list

(This host) = https://xoops.hypweb.net

  1. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#m2bbad77
  2. (This host)/modules/UsersWiki/index.php?cmd=lsx&rtag=%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0
  3. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#k494c56b
  4. http://www.x-groupware.org/x/xoops/modules/discuss/
  5. http://la.ma.la/blog/diary_200507290022.htm
  6. (This host)/modules/xpwiki/127.html
  7. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27/readme
  8. (This host)/modules/UsersWiki/gate.php/chat.inc.php?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=chat.inc.php
  9. (This host)/modules/UsersWiki/gate.php/ajaxchat.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat.zip
  10. (This host)/modules/UsersWiki/gate.php/ajaxchat.js?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat.js
  11. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#od5cc45e
  12. (This host)/modules/UsersWiki/gate.php/ajaxchat_0.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_0.zip
  13. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#j4cc7fca
  14. (This host)/modules/UsersWiki/gate.php/ajaxchat_1.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1.zip
  15. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#ga5d2236
  16. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_1.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_1.zip
  17. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_2.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_2.zip
  18. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#b539037f
  19. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_22.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_22.zip
  20. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#ta6575f1
  21. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_3.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_3.zip
  22. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#v8cecce2
  23. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_4.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_4.zip
  24. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#ocac84ad
  25. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_5.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_5.zip
  26. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#ed9f82d0
  27. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#r8f97b40
  28. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_7.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_7.zip
  29. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_7_1.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_7_1.zip
  30. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#wab5592e
  31. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_8.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_8.zip
  32. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#ac187727
  33. (This host)/modules/UsersWiki/gate.php/ajaxchat_1_9.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_1_9.zip
  34. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#u168d218
  35. (This host)/modules/UsersWiki/gate.php/ajaxchat_2_0.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_2_0.zip
  36. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-10-08
  37. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#ccc5d575
  38. (This host)/modules/UsersWiki/gate.php/ajaxchat_2_1.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_2_1.zip
  39. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#qea89cff
  40. (This host)/modules/UsersWiki/gate.php/ajaxchat_2_2.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_2_2.zip
  41. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#v5d75054
  42. (This host)/modules/UsersWiki/gate.php/ajaxchat_2_3.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_2_3.zip
  43. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#t22a08f3
  44. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#jcc5d129
  45. (This host)/modules/UsersWiki/gate.php/ajaxchat_2.32.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_2.32.zip
  46. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#h2276fb8
  47. (This host)/modules/UsersWiki/gate.php/ajaxchat_2.35.zip?way=attach&_noumb&refer=nao-pon%2Fblog%2F2005-08-27&openfile=ajaxchat_2.35.zip
  48. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#ofaab2cb
  49. http://cvs.sourceforge.jp/cgi-bin/viewcvs.cgi/hypweb/ajaxchat.tar.gz?view=tar
  50. http://hypweb.net/cvs2cl/ajaxchat.txt
  51. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-08-27#a2e5853c
  52. (This host)/modules/UsersWiki/person/%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88/nao-pon/blog/2005-08-27
  53. (This host)/modules/UsersWiki/person/%E9%80%9A%E3%82%8A%E3%81%99%E3%81%8C%E3%82%8A%E3%81%95%E3%82%93
  54. (This host)/modules/UsersWiki/person/nao-pon
  55. (This host)/modules/UsersWiki/person/leco1