JavaScript Chat

概要

  • Webサイトにチャットを貼り付けるキットです。
  • LingrComライブラリを使って作りました。
  • "Lingr"のサービスを利用しています。

サンプル

設置すると、こんな感じになります。

ダウンロード

chat_v0051.zip (13KB)

設置方法

  1. Lingrのサービスを利用するため、まずLingrのサイトでAPIキーを取得してください。

    まず、Lingrのサイトの右上の"sign up"でアカウントを作成し、 次にAPIのページで 利用規約(日本語訳はこちら) を読んで承諾の上で"Create an API key"をクリックすると、APIキーが表示されるはず。

    取得したAPIキーを、scripts/cgi/ses.cgi の3行目のxxxxxxの部分に書き込みます。 
    $apikey = "xxxxxx";
  2. cgiファイルのアップロード、パスの設定、実行権限の付与を行います。

    scripts/cgi ディレクトリ以下のファイルをサーバ側のcgi実行可能なディレクトリにアップロードし、 そのディレクトリのパスをlingrcom.jsファイルの下記の行に設定します。パスの最後の"/"も必要です。 利用元のhtmlファイル、jsファイル、scriptsディレクトリをすべて同じ階層に設置する場合は初期設定のままでOKです。 
    var lingrcom_cgipath = "./scripts/cgi/";
    cgiディレクトリ以下のすべてのファイルに実行権限を付与します。

    .htaccessファイルは、XREAの自動広告挿入の影響で、cgiで出力するContent-Typeが書き換えられてしまう問題を回避するためのものです。XREA以外ではたぶん不要です。

  3. Lingrで部屋を作成し、ルームIDを得ます。

    Lingrのサイトで、sign inした状態で、 "Create a new room"のリンクから部屋を作成します。作成した部屋のアドレスの最後の"/"から後の部分が、ルームIDです。

    取得したルームIDを、chat.heml の下記の行の'ルームid'の部分に書き込みます。 
    <body onload="cc=new ChatCtrl('cc','ルームID');cc.start();" onunload="cc.end();">
  4. htmlファイル、jsファイル、cssファイルをアップロードし、動作を確認します。

    サーバへ、chat.html, chat.js, lingrcom.js, chat.css の4つのファイルをアップロードします。 これまでの設定が正しければ、chat.htmlにアクセスすればチャットが動作するはずです。

カスタマイズ

chat.htmlファイルには、必要最低限の要素を記述しています。body内部に任意のコンテンツを追加できます。その際、<div id="chatwrap"></div>の部分は変更しないでください。

チャットのサイズ、デザインはchat.cssファイルを編集することでカスタマイズできます。どの要素が何を意味するかは、chat.cssファイルのコメントを参考にしてください。

chat.ccsへの変更は、chat_sample.htmlファイルを開くことで、オフラインでも確認できます。

コメント、バグ報告等

このチャットを設置したら、ぜひ日記のコメント欄へご報告ください。

バグ報告等もこちらにお願いします。

更新履歴

  • 2007/05/06 ver 0.01
  • 2007/05/09 ver 0.02 UIと制御部分のクラスを分離
  • 2007/05/12 ver 0.03 lingrcom.jsの差し替え．autolink機能追加
  • 2007/05/14 ver 0.04 lingrcom.jsの差し替え．起動部分の非同期化
  • 2007/05/17 ver 0.05 Javascriptからチャット用HTMLをすべて生成するように変更
  • 2008/01/20 ver 0.051 Operaで正常に動作するよう修正