Lace :: ajax　:: ブラウザで使えるサクサクチャット

2006/5/23 (Tue) at 10:37 am

ブラウザで動作する軽快なチャットプログラムです。百聞は一見にしかず。

「ajaxってなんジャックス？」というベタなギャグをカマしている場合ではありません！

ajax = Asynchronous JavaScript + XML

Javascript + xmlにphpやcssを組み合わせてつくるエッジなウェブアプリケーションをさいきんはこう呼ぶらしいです。というわけでajaxの代表選手をひとつ入れてみたのでその紹介です。

チャットするためのウェブアプリケーション。従来のリロードタイプよりもずっと軽快でFlashのチャットよりもカスタマイズ容易。ちょっと書き換えるだけで日本語も使えるようになりました。とりあえずデモをご覧下さいといいたいのですがその前にひとつ注意事項を。

【Laceのデモで遊ぶときの注意】

人に見られて困るような内容をデモで入力しないこと。

現在のバージョンの仕様では、チャットのログが永遠に残るようになっています。実際に導入する際にはひと工夫カスタマイズが必要でしょう。パス制限するとか、ログを見られないようにするとか。こちらでは「とりあえず日本語を使えるようしてみた状態」のデモなのでデフォルト状態です。毎時0分にログを初期化するようにcronを動かしているだけです。

チャットに入力後、次のゼロ分までは誰かに見られる可能性があります。ゼロ分を超えると自動的に消えます。デモで遊んでいるときに運悪くゼロ分になると、とつぜんチャット画面がリセットされます。というベータな仕様になっておりますが、軽快感は十分にわかると思うんでちょっと遊んでみてください。それではこちらから↓

日本語動作確認デモのurl:

lace DEMO

サーバ移転に伴い、デモは終了しました。

※別窓で開きます。

【LACEシステム要件】

PHP 4.3.10以上（5含む）
Apache 1.3系、2.0系いずれも可
日本語動かすにはmbstringモジュール必要。

【インストール及び日本語化クイックガイド】

※そのままでは日本語モジバケします。

1. 本家からlace-0.1.5.zipをダウンロード＆解凍

ダウンロードページurl: http://socket7.net/lace/
2006年5月23日時点の最新バージョンは0.1.5。

2. 解凍してできたフォルダの中にあるwwwフォルダを好きな名前に変える。このフォルダがインストール先のディレクトリ名となる。

（設定例）フォルダ名: lace
インストール先url: http://www.myserver.com/lace/

laceフォルダ内のconfig.phpをテキストエディタで開き以下の２行を環境に合わせて設定

インストール先を絶対urlで書く↓
[line 29] define('LACE_URL_ABS', 'http://www.myserver.com/lace/');

上に書いた文字列から「http://ホスト名」を除いた文字列を書く↓
[line 33] define('LACE_URL_REL', '/lace/');

どちらも最後に "/（スラッシュ）" 必須。

3. 英語のままでよければこのまま "lace" フォルダをアップロード

日本語化するなら以下を書き換える。とりあえず動くか見たいという場合は日本語化はスキップしてアップロードしてもよい（私ならそうする）。

lace.phpの以下の部分を書き換える。1カ所。

[line 30] デフォルト↓
header('Content-type: text/html; charset=utf-8');
[line 30] 書き換え後↓
header('Content-type: text/html;');

index.phpの以下の部分を書き換える。2カ所。

[line 63] デフォルト↓
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
[line 63] 書き換え後↓
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

[line 66] デフォルト↓
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
[line 66] 書き換え後↓
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />

index.phpは文字コードeucで保存する。← 忘れずに！

日本語化作戦以上。たぶん。

※補足する。lace.phpのヘッダのcharset宣言であるが、最初ここをeuc-jpと指定したら、win-xpのieのみハングした。javascriptのせい？よくわからないです。んで、charset指定をブランクにしたら動いた。なので上の設定例ではブランクにせよとなっているが、ここらへんの挙動はサーバによって異なるのかもしれない。各自研究して下さい。

4. laceフォルダをftpにてサーバへアップロード＆パーミッション設定

chmod 777(or 707 or 700) /lace/data
chmod 777(or 707 or 700) /lace/data/activity.dat
chmod 777(or 707 or 700) /lace/data/lace.dat
chmod 777(or 707 or 700) /lace/data/log.dat
chmod 777(or 707 or 700) /lace/data/logs

以上で完了です。

ブラウザからlaceフォルダにアクセスしてみましょう。

どうですか？

言い忘れましたが、shift_jisでやりたい人はそれでもよいでしょう。上の設定はeucになっています。以上はとりあえず動かしてみようというだけのミニマムなやり方です。私のサーバではこれで動いていますが、環境によって結果が異なるようです。昨日、友人に勧めてみたらそこのサーバではチャットの挙動がへんでした。入力後リターンキーを押してもチャットウインドウに文字が入らないのです。なぜだかわかりません。とりあえずうちの環境はこちら↓

（サーバ環境） Apache2.x
PHP 5.0.4
phpの内部エンコーディング外部エンコーディング共にeuc。

タイトルを変えたり、デザインをカスタマイズしたりするのは、config.php及びスタイルシートを編集することによって行えます。

-=-=-=-

Javascriptが出た頃というのは「おもしろいけど使えないツール」だと私は思っていました。クライアント環境に依存するというのが私は好きになれなくて、これは学ぶ価値が薄いのではないかと思っていましたが少し考えを変える必要があるのかも。

Laceに代表されるajax系ウェブアプリケーションは続々とたくさん出ているようで、エッジな方々はいろいろと試されているようです。リロードせずに動くというのがよいですね。Active-Xでやるしかなかった様々なことをやれそうです。セッションという概念がないというのが画期的だなぁと思います。

ほとんどの仕事現場では100%シュアな動作が求められるわけで、いくら動きが軽快で使いやすくても使えない人が出てくる（「クライアント環境に依存する」）というのは依然ネックではありますが、Javascriptをdisableにしている人の数は昔ほどに多くありませんし、もしかしたらこれは学ぶ価値がある世界なのかなと予感させるものであるように私には感じられました。

前のエントリへ次のエントリへ

ira

2006/5/24, 10:27 AM

すすめられた友人です:)

さくさく動いてよかったのに惜しいです。

フジイ

2006/5/24, 5:06 PM

もういっぺんやったら入るかもよ。

BATISTA

2009/9/16, 11:59 PM

参考になりました。トラックバックさせて頂きます。

ふ

2009/9/17, 2:46 PM

どうもです。この記事を書いたのはずいぶん古いんで、あまり参考にならなかったかも。いまなら文字コードは普通にutf-8ですよね。。

コメント・プリーズ！

お名前 (your name)

(required)

url

(optional) ※公開されます。

メールアドレス (email)

(optional) ※公開されません。管理者にだけわかります。

コメント (comment)

(required)

クッキーにお名前、url、メールアドレスを保存する。

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『<』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

海外産リアルタイムチャット「Lace」 - MAHOROBATISTA
日本のチャットスクリプトではないんですが、海外ではそこそこ有名なチャット、Laceを紹介します。LaceはPHPで書かれており、もちろんAjaxに対応し...

2009/9/16, 11:35 PM

PROFILE

藤居ヒロヤ。ウェブデザイナー／ウェブディレクター。ウェブデザインオフィス、3OT NET主宰。名古屋市中区。「優しいデザイン」「激しいデザイン」「正しいデザイン」「セクシーなデザイン」「泣けるデザイン」「もっともなデザイン」... 。あなただけのウェブデザインを丹精込めておつくり致します。見積り依頼等、お気軽にお問い合わせ下さい。

www. http://www.3ot.net/
email. admin [atmark] 3ot.net
phone. 052 323 7376

お問い合わせフォーム

ウェブデザイナーの日記

Lace :: ajax :: ブラウザで使えるサクサクチャット

Lace :: ajax　:: ブラウザで使えるサクサクチャット