hypweb.net
XOOPSマニア  最新情報のRSS(サイト全体)
［　自宅サーバーWebRing ┃前 ｜ID=54 前後5表示 ｜次 ┃乱移動 ｜サイト一覧　］

20年1月20日(Mon) 17時59分
TOP » UsersWiki » nao-pon » blog » 2005-08-27
Table of contents

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

動作例 anchor.png

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

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

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

です。

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

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

ごめんなさい。> All

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

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

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

最新版はこちらです。

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

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

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

Page Top

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

Page Top

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page Top

(Ver 2.31) anchor.png

Page Top

(Ver 2.32) anchor.png

style.css の修正など

Page Top

(Ver 2.35) anchor.png

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

Page Top

CVS 最新版 anchor.png

Page Top

コメント anchor.png

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 でテストしてみましたが特に問題はないようです。やはり、アドオンの絡みかも。 :thinking: -- 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行目あたりからの
      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 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
  • フレーム処理が無料サーバーに消されて　発言ボックスが表示されません　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:
filefusen.dat 724DL [Info] fileajaxchat_2.35.zip 267DL [Info] filehypweb.net_whisper.png 210DL [Info] fileajaxchat_2.32.zip 855DL [Info] fileajaxchat_2.31.zip 1105DL [Info] fileajaxchat_2_3.zip 752DL [Info] fileajaxchat_2_2.zip 594DL [Info] fileajaxchat_2_1.zip 728DL [Info] filechat.inc.php 1754DL [Info] fileajaxchat_2_0.zip 537DL [Info] fileajaxchat_1_9.zip 541DL [Info] fileajaxchat_1_8.zip 531DL [Info] fileajaxchat_1_7_1.zip 517DL [Info] fileajaxchat_1_7.zip 514DL [Info] fileajaxchat_1_5.zip 546DL [Info] fileajaxchat_1_4.zip 486DL [Info] fileajaxchat_1_3.zip 515DL [Info] fileajaxchat_1_22.zip 572DL [Info] fileajaxchat_1_2.zip 528DL [Info] fileajaxchat_1_1.zip 522DL [Info] ... more 4 files. [ Show All ]

Comments list

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

Posts tree

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:

<!--========== AjaxChat ==========-->
<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>
<!--========== AjaxChat ==========-->

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...

Post a new comment

Subject
guestname
Body

Go to richer form
Front page   Freeze Diff Backup Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
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@携帯
Counter: 42904, today: 7, yesterday: 8
Princeps date: 2006-08-06 (Sun) 03:32:43
Last-modified: 2019-12-24 (Tue) 01:11:03 (JST) (27d) by 通りすがりさん
Links: nao-pon leco1 readme nao-pon​/blog​/2005-08-27のコメント一覧 日曜日 土曜日 金曜日 木曜日 水曜日 火曜日 月曜日 2009年 通りすがりさん MySQLサーバーの電源を交換

Site admin: nao-pon

このページのTopへ
ログイン
ユーザ名:

パスワード:

オートログイン

Basic 認証 | SSLログイン

Register now! | Lost Password?


メインメニュー
 共有ホルダ   共有ホルダを開く
UsersWiki メニュー
recent(20)
2019-12-24
  • nao-pon/​blog/​2005-08-27
2019-12-23 2019-12-05 2019-11-04 2019-10-19 2019-09-17 2019-07-01 2019-06-27 2019-06-19 2019-03-12 2018-04-05 2017-10-25 2017-04-21 2017-04-19 2017-03-16 2017-03-05 2017-02-21
AjaxTree
UsersWiki (1148)
付箋メニュー
Fusen(Tag) menu 
Tag Editor
Color: BG:
Name:  Connect line ID:
 
[Dust] [Trns.] [List] [Help]  Search:
id.1:
通りすがりさん : : 10/03/11 23:11

jhgfhlk

id.2:
通りすがりさん : : 11/03/02 10:47

aaaa

baka

id.3:
通りすがりさん : : 14/03/22 19:24

aaa

id.4:
通りすがりさん : : 18/11/04 20:10

aaa

id.5:
通りすがりさん : : 19/02/06 05:58

おはようございます

id.6:
通りすがりさん : : 19/02/06 05:59

おはようございます

id.7:
通りすがりさん : : 19/12/24 01:11

あああ

ブックマーク
Please log in to use it.
[Login]
サイト内 Wiki
☆ 検索 ☆



高度な検索(サイト内)
FireFox検索プラグイン
オンライン状況
合計 38 人がオンライン中 :-)
(UsersWiki : 2 人)

登録ユーザ: 0 & ゲスト: 38

もっと...
サイト情報
管理人

nao-pon		 

登録ユーザ数: 4634 人


Web Services by Yahoo! JAPAN
楽天ウェブサービスセンター
Amazon.co.jpアソシエイト
現在ページのQRコード
現在ページのQRコード
[携帯対応]
参照元情報
Detail...