ウェブデザイナーの日記

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

2006.05.23 10:05

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

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

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

ajax = Asynchronous JavaScript + XML

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

Lace
http://socket7.net/lace/

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

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

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

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

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

日本語動作確認デモのurl:
http://www.3ot.net/cgi-bin/lace/
※別窓で開きます。

【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をテキストエディタで開き以下の2行を環境に合わせて設定

インストール先を絶対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にしている人の数は昔ほどに多くありませんし、もしかしたらこれは学ぶ価値がある世界なのかなと予感させるものであるように私には感じられました。

, , , ,

ウェブデザイナーの日記 [コメント (2) :: トラックバック (0) ]

このエントリーのトラックバックURL:
http://blog.3ot.net/ping/770

ira (2006年05月24日 10:27)

すすめられた友人です:)
さくさく動いてよかったのに惜しいです。

フジイ (2006年05月24日 17:06)

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