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

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 800DL [Info] fileajaxchat_2.35.zip 290DL [Info] filehypweb.net_whisper.png 231DL [Info] fileajaxchat_2.32.zip 875DL [Info] fileajaxchat_2.31.zip 1124DL [Info] fileajaxchat_2_3.zip 771DL [Info] fileajaxchat_2_2.zip 613DL [Info] fileajaxchat_2_1.zip 746DL [Info] filechat.inc.php 1898DL [Info] fileajaxchat_2_0.zip 555DL [Info] fileajaxchat_1_9.zip 558DL [Info] fileajaxchat_1_8.zip 550DL [Info] fileajaxchat_1_7_1.zip 534DL [Info] fileajaxchat_1_7.zip 532DL [Info] fileajaxchat_1_5.zip 564DL [Info] fileajaxchat_1_4.zip 507DL [Info] fileajaxchat_1_3.zip 533DL [Info] fileajaxchat_1_22.zip 592DL [Info] fileajaxchat_1_2.zip 546DL [Info] fileajaxchat_1_1.zip 541DL [Info] ... more 4 files. [ Show All ]
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 :ゲスト
Counter: 930, today: 1, yesterday: 1
Princeps date: 2006-08-06 (Sun) 03:32:43
Last-modified: 2020-06-04 (Thu) 22:19:33 (JST) (714d) by nao-pon
Links: nao-pon leco1 readme nao-pon​/blog​/2005-08-27のコメント一覧 通りすがりさん MySQLサーバーの電源を交換

Site admin: nao-pon

このページのTopへ
メインメニュー
ログイン

ユーザー名:


パスワード:





パスワード紛失  |新規登録
最近の更新
recent(20)
2022-05-03 2022-03-30 2022-03-28 2022-02-24 2022-01-17 2021-08-03 2021-07-01 2021-06-20 2021-06-15 2021-04-27 2021-03-17 2021-03-13 2021-02-23 2021-02-18 2021-02-15 2021-02-07 2021-01-27 2020-12-28 2020-12-15 2020-09-19
オンライン状況
189 人のユーザが現在オンラインです。 (1 人のユーザが UsersWiki を参照しています。)

登録ユーザ: 0
ゲスト: 189

もっと...
サイト情報
Web Services by Yahoo! JAPAN
楽天ウェブサービスセンター