57←  home  →59
さ み だ れ 雑 記 ５８ ２０００年６月１９日
 
MacでWebサーバ（2）Freeboard2.2のカスタマイズ
 
 
 

ということで〜。先日、フクダさんとこのiMacにおじゃまして、始めてチャットなるものをいたしました。

結果は↑ですが、もともとは「掲示板」なので、あちこち画面が動いて面倒でした。
 

ということで〜。 Freeboard.cgi2.2のカスタマイズです。
　
同一画面に表示するタイプを作って見ました。iMac User御用達のPageMillなるものを使って：
 

Chatだよ〜 

お名前 

　ログを表示する　メインページにもどる 

名前　2000年6月18日23:00 

ちゃっとじゃ、ちゃっとじゃ 

　
見たいな「プロトタイプ」を作ってみました。

もちろんcomposer使ってもいいんですが〜。composerでは「入力画面」（formというが）が作れないんですよね〜。PageMillなら「挿入」の「フォーム」から、「名前」のとこが「テキストフィールド」メッセージ記入欄が「テキストエリア」。あと「送信ボタン」と「リセットボタン」で〜す。

ま〜こんなもんかな〜。さてそれで、テキスト・エディタで編集です。保存したhtmlファイルにはPageMillのアイコンがついていますので、お好きなテキスト・エディタのアイコンに放り込むなり、「モアイの技」を使うなりお好きにしてもらって、と。
 
 

<HTML> 
<HEAD> 
  <META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0J Mac"> 
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> 
  <TITLE>Untitled Document</TITLE> 
</HEAD> 
<BODY> 

<FORM ACTION="../freeboard.cgi" ENCTYPE="x-www-form-urlencoded" METHOD="POST"> 
<P><B><FONT SIZE="+3">Chatだよ〜</FONT></B></P> 

<P>お名前<INPUT NAME="name" TYPE="text" SIZE="30"></P> 

<P><TEXTAREA NAME="text" ROWS="3" COLS="52" 
></TEXTAREA></P> 

<P><INPUT NAME="name" TYPE="submit" VALUE="送信"><INPUT NAME="name" 
TYPE="reset" VALUE="リセット">　ログを表示する　メインページにもどる</P> 

<P><HR ALIGN=LEFT></P> 

<P>名前　2000年6月18日23:00</P> 

<P>ちゃっとじゃ、ちゃっとじゃ</P> 

<P><HR ALIGN=LEFT> 
</FORM> 

</BODY> 
</HTML>
　

下のがサンプルのnewmessage.htmlの<FORM>の部分です。
 
 

<FORM METHOD="POST" ACTION="../../freeboard.cgi"> 
お名前：<INPUT type="TEXT" name="NAME" size=40><p> 
メッセージ：<br> 
<TEXTAREA name="MSG" ROWS=6 COLS=60></TEXTAREA><p> 
<INPUT type="SUBMIT" value="Send"> 
<INPUT type="RESET" value="Reset"> 
</FORM>
　
PageMillには謎のENCTYPE="x-www-form-urlencoded"という部分があります。残していても別に悪さはしないとは思います。が、とっちゃいました。
ということで、メッセージ部分です。
 
 
<BLOCKQUOTE><P> 
<HR> 
<!-- borderline --><!--@ 
<B><FONT 
SIZE="+1">data_1　</FONT></B>さんからのメッセージです．<BR> 
<FONT SIZE="-1">(on this_Month/this_Day , this_Hour:this_Minute ) </FONT><BR> 
data_2 
<HR> 
@--><!-- borderline --><!-- borderline --> 
<HR> 
</BLOCKQUOTE>
　
がfreeboard.cgiが書き換える部分です。解説書によると

 

掲示板本体 = 1.掲示板の先頭部分+ "<!-- borderline -->" + "<!--@" + 2.メッセージの構成 + "@-->" + "<!-- borderline -->" + 3.実際のメッセージ + "<!-- borderline -->" + 4.掲示板の最後の部分 

となります。 
　1,4の部分は完全に自由に変更できます。（もちろんhtmlの書式として、ですが。）3.の部分はいじる必要はありません。 
　2の部分は、投稿されたメッセージをどのように表示するかを決定するテンプレートです。この中に特別な文字列を仕込んでおけば、それが実際に投稿されたデータと置き替わって、掲示板に追加するメッセージが作られます。この部分が"<!--@"と"@-->"で囲まれているのは、Webブラウザからは見えないようにするためです。
　
ということでhtmlの知識がないと、少し理解しにくいので解説すると、

htmlでコメントを書くのには、<!--ここコメント-->のようにします。
この手法がコメントを書く以外にも使われます。「コメント」部分はブラウザは無視します。無視されるコメント部分を、この場合はfreeboard.cgiが書き換えて、ブラウザに渡すわけです。（というよりは、freeboard.cgiがブラウザより先に、freeboard.htmlを読み込んで、書き換え、ファイルを保存する。書き換えられたファイルをブラウザが読むのでしょうが。。。多分）

で、

<!-- borderline -->
<!--@freeboard.cgiが書き換える部分@-->
<!-- borderline -->
<!-- borderline -->

が基本形です。

書き込みが重なると

<!-- borderline -->
<!--@freeboard.cgiが書き換える部分@-->
<!-- borderline -->
書き込み３
<!-- borderline -->
書き込み２
<! -- borderline -->
書き込み１
<!-- borderline -->

というように書き込まれていくわけです。（<!--で始まる箇所はブラウザにとってはコメント行でした・・くどい？）

で〜。

色々実験して、さて公開するぞという場合、テスト時の書き込み部分は消せばいいんですが、その場合、最後の<!-- borderline -->は１行では動きません。「基本形」のように２行必要ですのでご注意を！

ということで〜
 
 

<P><HR ALIGN=LEFT></P> 

<P>名前　2000年6月18日23:00</P> 

<P>ちゃっとじゃ、ちゃっとじゃ</P> 

<P><HR ALIGN=LEFT>
　
の部分を、まず
 
<!-- borderline --> 
<!--@ 
<P><HR ALIGN=LEFT></P> 

<P>名前　2000年6月18日23:00</P> 

<P>ちゃっとじゃ、ちゃっとじゃ</P> 
@--> 
<!-- borderline --> 
<!-- borderline --> 
<P><HR ALIGN=LEFT>
　
と書き換えます。次に、freeboard.cgiでの「書き換えルール」は
 
 
・data_1,data_2,data_3...のように、data_?の形式で番号をつけてください。フォームで記入されたデータが上から順番に置き換えられます。 
・this_Year　年(例：97) 
・this_Month　月(07) 
・this_Day　日(29) 
・this_Hour　時間(22) 
・this_Minute　分(05) 
・this_Second　秒(20) 
・current_date　日付全体(1997年 7月 28日 月曜日 7:24:26 PM)　注：ここではマックの日付＆時間コントロールパネルで設定した表記が使われます。また、これ以外では曜日の表示はできません。 
・client_address　投稿者のIPアドレスまたはドメインネーム 
・user_agent　投稿者が使っているブラウザの名前
　
ということなので
 
<!-- borderline --> 
<!--@ 
<P><HR ALIGN=LEFT></P> 

<P>data_1　this_Year年this_Month月this_Day日this_Hour:this_Second</P> 

<P>data_2</P> 
@--> 
<!-- borderline --> 
<!-- borderline --> 
<P><HR ALIGN=LEFT>
　
と書き換えます。

あと、「ログを表示する」とか「トップページにもどる」にリンクをつけます。別にPageMillでつけてもいいようなもんですが、使い慣れないものPageMillよりテキストエディタの方がかんたん。（まだリンク先のファイル作ってないんだもん〜）

と、いうことで〜
 
 

<HTML> 
<HEAD> 
  <META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0J Mac"> 
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> 
  <TITLE>Untitled Document</TITLE> 
</HEAD> 
<BODY bgcolor=white> 

<P><B><FONT SIZE="+3">Chatだよ〜</FONT></B></P> 

<!--ここがデータ転送部分--> 
<FORM ACTION="../freeboard.cgi" ENCTYPE="x-www-form-urlencoded" METHOD="POST"> 
<P>お名前<INPUT NAME="name" TYPE="text" SIZE="30"></P> 
<P><TEXTAREA NAME="text" ROWS="3" COLS="52" 
></TEXTAREA></P> 
<P><INPUT NAME="name" TYPE="submit" VALUE="送信"><INPUT NAME="name" 
TYPE="reset" VALUE="リセット">　<a href=./log.html>ログを表示する</a>　<a href=../index.html>メインページにもどる</a></P> 
</form> 
<!--データ転送部分終わり--> 

<!--ここからデータ表示部--> 

<!-- borderline --> 
<!--@ 
<P><HR ALIGN=LEFT></P> 
<P>data_1　this_Year年this_Month月this_Day日this_Hour:this_Second</P> 
<P>data_2</P> 
@--> 
<!-- borderline --> 
<!-- borderline --> 
<P><HR ALIGN=LEFT> 
<!--データ表示部分終わり--> 

</BODY> 
</HTML>
　
で、できちゃった〜。
あと、ちゃんと設定。preference.txtのは解説よんでもらえればそれでいいのですが。。。
 
 
1.top file :<freeboard.html> 
2.redirect file :<freeboard.html> 
3.log file :<log.html> 
4.tag 　　　　 :<off> 
5.append type :<above> 
6.number of message :<15> 
7.access log :<off> 
8.access log file :<accesslog.html> 
9.access log length :<40>
　
1.のtop fileがfreeboard.cgiが書き換えるファイルです。必ずしもtopでなくても（最初に表示しなくても）かまいません。
2.のredirect file　がデータを送った後にブラウザが表示するファイルです。別ファイルにすると「同じ内容の２度送り」を少なくできるようですが〜。あれは誰でも１回はするみたい〜。
今回は1.2.ともに<chat.html>です。
3.は<html>とだけ書いたテキストファイル。で十分だそうだが、とりあえず、サンプルをそのまま使う。サンプルは
 
 
<HTML> 
<HEAD> 
   <TITLE> Log </TITLE> 
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> 
</HEAD> 
<body bgcolor="#FFFFFF" > 
<P><CENTER><B><FONT SIZE="+1">今までのログ</FONT></B></CENTER></P> 
このページは上から下へ更新されています．<P><P>
　
ぐらいかな〜。（</html>とhtmlを終わらせてはならない）

で、試運転。と〜

例によって、不都合が〜。

最悪の不都合はMacのIE4.5でページを更新しようとすると
 
 

Error

An Error occurred

text items 4 thru -2 of ""を取り出すことができません。
　
というエラー表示が〜〜起こる場合もあるし起こらない場合もある、と〜。不思議〜。

URLは：http://192.168.1.6/freeboard.cgi　となっているのでfreeboard.cgiが文句言っているんだろうけど、分からん〜。

う〜ん。。NN4.5,IE5ではまともなのじゃ〜。知らん。

ということで〜。

もう一つの不具合は、freeboard.cgiで書き換えられる部分が異様に間延びするのである。

これは「生成されたhtml」を読んでみると、

<!--@
<P><HR ALIGN=LEFT></P>
<P>data_1　this_Year年this_Month月this_Day日this_Hour:this_Second</P>
<P>data_2</P>
@-->

の「改行箇所」が<BR>に書き換えられていました。そりゃ間延びもするわいな〜。

と、そうこうするうちに、IE4.5でも何も入力されていない状態で「送信」ボタンを押すと無事更新されることを発見。

んじゃ、「送信」ボタンを「送信・更新」ボタンにしちゃえ。おお解決！

と、いうことで〜。iMacにWindowsからおじゃましてチェックすると〜。あ〜んれ？こんどはWindowsのネスケの4で「送信・更新」ボタンが効かない！！！

んが〜・・・・・・と。<META HTTP-EQUIV="Pragma" CONTENT="no-cache">というおまじないをかけたら解決。

ふぅ〜。readmeに書いてありました・・・奥が深いな〜。。。。。

と、いうことで〜ぇ！！
 
 
 

<HTML> 
<HEAD> 
　<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> 
　<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
　<TITLE>チャット</TITLE> 
</HEAD> 
<BODY bgcolor=beige> 

<P><B><FONT SIZE="+3">Chatだよ〜</FONT></B></p> 

<!--ここからデータ転送部分--> 
<FORM ACTION="../freeboard.cgi" METHOD="POST"> 
<P>お名前　<INPUT NAME="name" TYPE="text" SIZE="30"></P> 
<P><TEXTAREA NAME="text" ROWS="4" COLS="60" 
></TEXTAREA></P> 
<P><INPUT NAME="name" TYPE="submit" VALUE="送信・更新"><INPUT NAME="name" 
TYPE="reset" VALUE="リセット">　<a href=./log.html>ログを表示する</a>　<a href=../index.html>メインページにもどる</a></P> 
</form> 
<!--データ転送部分終わり--> 

<!--ここからデータ表示部--> 
<!-- borderline --> 
<!--@<HR><font color=blue>data_1</font>　<font size=-1>20this_Year年this_Month月this_Day日this_Hour:this_Second</font> 
data_2@--> 
<!-- borderline --> 
<!-- borderline --> 
<HR> 
<!--データ表示部分終わり-->
　
無事カスタマイズ解決〜。

んで〜、いろいろカスタマイズできます。このページの「発言かきかき」風にするには
 
 

<!--ここからデータ表示部--> 
<table border width="100%" bgcolor=white> 
<!-- borderline --> 
<!--@<tr><td><font color=blue>data_1</font><br><font size=-1>20this_Year年this_Month月this_Day日this_Hour:this_Second</font></td> 
<td>data_2</td></tr>@--> 
<!-- borderline --> 
<!-- borderline --> 
</table> 
<!--データ表示部分終わり-->
　
のようにtableを使います。

あと、チャットには普通「自動更新機能」がついていますので、つけようかな〜という人は、

<meta http-equiv="refresh" content="60">とすれば60秒後に
<meta http-equiv="refresh" content="15">とすれば15秒後にrefreshしてくれます。

ちなみに

<meta http-equiv="refresh" content="60; URL=dokosoko">

とすればdokosokoへ飛びます。 freeboard.cgiのchatのサンプルに「絵文字選択」がありましたので、それを使わせていただくと
 
 

<HTML> 
<HEAD> 
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> 
  <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
  <TITLE>チャット</TITLE> 
</HEAD> 
<BODY bgcolor=beige> 

<P><B><FONT SIZE="+3">Chatだよ〜</FONT></B></p> 

<!--ここからデータ転送部分--> 
<FORM ACTION="../freeboard.cgi" METHOD="POST"> 
<P>お名前　<INPUT NAME="name" TYPE="text" SIZE="30">　<select name="face"> 
<option value=" "> 
<option value="(^^)">(^^) 
<option value="(^^)/">(^^)/ 
<option value="(^_^)">(^_^) 
<option value="(^o^)">(^o^) 
<option value="(*^^*)">(*^^*) 
<option value="(^^;">(^^; 
<option value="(^-^;)">(^-^;) 
<option value="(^o^;)">(^o^;) 
<option value="(?_?)">(?_?) 
<option value="(..;">(..; 
<option value="m(__)m">m(__)m 
<option value="<(_ _)>"><(_ _)> 
<option value="(>_<)">(>_<) 
<option value="(;_;)">(;_;) 
<option value="(--;">(--; 
</select></P> 
<P><TEXTAREA NAME="text" ROWS="4" COLS="60"></TEXTAREA></P> 
<P><INPUT NAME="name" TYPE="submit" VALUE="送信・更新"><INPUT NAME="name"　TYPE="reset" VALUE="リセット">　<a href=./log.html>ログを表示する</a>　<a href=../index.html>メインページにもどる</a></P> 
</form> 
<!--データ転送部分終わり--> 

<!--ここからデータ表示部--> 
<!-- borderline --> 
<!--@<HR><font color=blue>data_1</font>　<font size=-1>20this_Year年this_Month月this_Day日this_Hour:this_Second</font> 
data_3data_2@--> 
<!-- borderline --> 
<!-- borderline --> 
<HR> 
<!--データ表示部分終わり--> 
 
 
のようになります。

だらだら書きましたが、「プログラム」ってこんなもんだろうな〜。

「こんなもん」というのは

１．とりあえずやってみる
２．問題が起こったら悩む
３．解決法は限定しない
４．結果オーライ

ぐらいかな〜。一番大切なのは、１かな？３かな？

 
んじゃまたでした。
 
 

 
 
 

57←  home  →59