ミケネコ研究所 / CommuniCa5.0 / 見栄え の カスタマイズ
CommuniCa 5.0
見栄え のカスタマイズ

CommuniCa を使うと、どんな感じのチャットになるのでしょう？

CommuniCa を使ったチャットの一例です。

談話室

なにか書いていってね。
名前 名前の色は？
メッセージをどうぞ。 [ クッキー有効 無効 ]

[12/14 07:29]サーブル : まあ、そういうことです。
[11/04 06:46]サーブル : おやすみなさーい
[11/03 00:31]サーブル : そろそろ寝ますね。
[11/03 00:31]サーブル : はぁ眠い。
[11/03 00:31]サーブル : うまく動いてるかな。

上の例は、まあ何もしなかった場合の設置例です。すこし見栄えを変えると、下のようになります。

ちょっとチューンされた談話室

なんか書いていってね。
▼発言(M) : 名前 名前の色は？


リンク: Ａさん - Ｂさん - Ｃさん 　クッキー: 有効 無効
サーブル > まあ、そういうことです。 (12月14日 07時29分)
サーブル > おやすみなさーい (11月04日 06時46分)
サーブル > そろそろ寝ますね。 (11月03日 00時31分)
サーブル > はぁ眠い。 (11月03日 00時31分)
サーブル > うまく動いてるかな。 (11月03日 00時31分)

見栄えを決定する要素は、次の４種類あります。CommuniCa では、これらすべてがカスタマイズ可能です。

1. 「談話室」など、HTML の部分
INDEX に戻るリンクを付け加えたり、他のチャットへのダイレクトリンクをたくさん書いたり・・・。ふつうのホームページを編集する感覚で書きかえられます。

2. 「名前」やメッセージなど、フォームの部分
もうちょっとフォームの幅を広げたい、色数を増やしたい、などが、ふつうのホームページを編集する感覚で書きかえられます。

3. 「日付」や名前など、ログの部分
日付けに「曜日」を入れたい。名前はもうちょっと大きいフォントで表示したい、など、自由な CGI チャット／掲示板の設計が出来ます。これにより、Web裏技など、他の CGI チャット／掲示板をエミュレーションすることも可能です。

4. 「プレビューモード」や「不正な HTML です」などの、ダイアログの部分
CommuniCa が表示する全てのシステムメッセージを、自由に変更できます。

カスタマイズは、CommuniCa ゲートウェイの１ファイルだけで行います。たとえば、ミケネコチャットなら mikechat1.cgi です。ほかのファイルは触りません。

以下は、ゲートウェイに mikechat1.cgi を使ったものとして説明します。mikechat1.cgi は、あなたが実際に使っているファイル名に、読み替えてください。

1. HTML のカスタマイズ

ゲートウェイファイル（例 mikechat1.cgi） を、EUC コードの読めるエディタで開いてください。 ちょっと下にスクロールすると、下のような部分が見えてきます。 
#********************************************************************
####    =====================================================    ####
####                   HTML カスタマイズ                         ####
####    =====================================================    ####
#******************************************************CommuniCa*5***

# ここで、ＨＴＭＬ を記述します。自由に設計してください。
# [注意！]
#	「$（ドル）」記号で始まる文字は、だいじな変数です。
#	間違って消してしまうと、CommuniCa が動かなくなる恐れがあります。
<< "----- ----- ----- HTML ----- ----- -----";
<HTML>
<HEAD>
	<!--鴬鵜-->
	<TITLE>談話室</TITLE>
</HEAD>
  ・
  ・
  ・
</BODY>
</HTML>
----- ----- ----- HTML ----- ----- -----

----- HTML ----- 〜 ----- HTML ----- の範囲で、自由に HTML を編集してください。

ただし、$name や、@message など、半角「$」や半角「@」で始まるアルファベット続きは、CommuniCa 内部で使用している変数です。これらをいじってしまうと、CommuniCa が正常に動かなくなる恐れがありますので、気を付けてください。同様に、HTML 内に、半角「$」や半角「@」の文字は使えません。どうしても使いたいときは、「\$」や「\@」のように、直前に \ を入れると使えます。

2. フォームの部分のカスタマイズ

フォーム部分も、「HTML カスタマイズ」で編集する部分に含まれていますので、同じように編集してください。CommuniCa内部で使用している変数（半角「$」や半角「@」で始まるアルファベット続き）は、不用意にいじらないでください。

3. ログの見栄えのカスタマイズ

これは、上の２つより、ちょっと難しいかも？

mikechat1.cgi をＥＵＣエディタで開いてください。 ファイルなかほどに、次のような部分があります

#********************************************************************
####    =====================================================    ####
####                      HTMLの修飾                             ####
####    =====================================================    ####
#******************************************************CommuniCa*5***
#	ただ、入力された通りに映すだけでは芸が無いでしょう。
#	ここで、各種設定を行う事で、きめ細かなカスタマイズが出来ます。
  ・
  ・
  ・
  ・
#********************************************************************
#● ログ設計
#どういう風に書き込むのか、設計してください。
  ・
  ・
  ・
  ・
#さあ、設定してください！（改行文字は無視されます。）
<< "----- ----- WRITE TYPE ----- -----";

[$mon/$day $hour:$min]$name :$DATA{'msg'}<BR>

----- ----- WRITE TYPE ----- -----

なにやら、説明書きがたくさんありますが、重要なのは、赤い部分１行です。ここを書きかえることによって、いろんなチャット（伝言板）を作ることができます。

まずは、日付けの形式を [06/01 23:56] から、[98年06月01日(木) 23時56分21秒] に変更してみましょう。上の赤い行を、次で置き換えます。 

[$year年$mon月$day日($day_name_jp) $hour時$min分$sec秒]$name :$DATA{'msg'}<BR>
これで、日付け部分がぐっと詳細になります。ほかにも、$name の前後を font size タグで囲めば、名前を大きくしたりもできます。自由に設計して、オリジナルのボードを作ってください。

4. 「プレビューモード」や「不正な HTML です」などの、ダイアログの部分

CommuniCa で使われる *全ての* ダイアログをカスタマイズできます。

ダイアログとは、

などのシステムメッセージが表示される部分です。 

#-------------------------------------------------------------------#
#       =====================================================       #
#                      ダイアログのカスタマイズ                     #
#       =====================================================       #
#-----------------------------------------------------[CommuniCa 5]-#

ダイアログのカスタマイズと書かれたセクション以降の HTML を自由にカスタマイズして下さい。ただし、$ で始まる変数部分を不用意にいじらないようにして下さい。もし動かなくなったら、初期状態に戻してみてください。同様に、メッセージ部分もカスタマイズすることができます。

CommuniCa ホームページ https://mikenekolab.org/~lab/cgi/communica/
お問い合わせ <lab@mikeneko.ne.jp>