apeboard+ と言う優れた掲示板があります。これはPerl上で動作するCGI掲示板スクリプトで、 掲示板のデザインを自分で簡単に出来るようにしたものです。

従来型のCGI掲示板スクリプトは、掲示板のデザインがCGIスクリプトの中に組み込まれていたので、 デザイン変更が難しかったのですが、apeboard+ はデザインされたHTMLを読み込む形式なので、 CGIスクリプト（perl）の知識が全く必要ありませんし、デザイン変更による致命的なミスを犯す率もかなり小さいと思います。

apeboard+ のマニュアルにも、「自分でデザインしたHTMLのファイルを使用して表示するため、 ある程度自由にデザインできます。そのため、HTMLファイルの作り方によっては日記帳や更新情報ページ、 リンク集などいろいろな使い方ができます。なお、デザインしたHTMLファイルをapeskinといい、 多くのユーザーの方が公開して下さってますので、それを使用することもできます。」 と書かれています。つまりHTMLを作れればapeakin を作れるので、見栄えがオリジナルな掲示板をホームページに設置、 及び配布できる訳なんです。

しかしHTMLエディタでapeskin を作ると、上手くいかない場合もあるようで、 そのためにテキストエディタでHTMLを製作する知識があった方が良いようです。 なんとも Challange HP にピッタリな材料でですね。

１．Perl5で書かれたCGIを利用できるサーバー。

２．2apes.com で配布しているCGIスクリプト。
　・apeboard_plus.cgi
　・apeboardp_mt.cgi
　・boardini.cgi
　・apeboard.dat
　・jcode.pl　（既存のを利用できます）

これらは 2apes.com で無料配布されています。スキン配布サイトのスキンには含まれていません。

３．ルール通りに各自が作ったapeakin 。
　・apeskin.html
　・res_file.html
　・skinini.cgi

apeskin.html と res_file.html が掲示板のデザインになります。 2apes.com より本体をダウンロードすると、 ノーマルのスキンが含まれていますが、削除して構いませんし、それを改造しても良いでしょう。 skinini.cgi は、本体より手に入れて、スキンの設定を行うものです。

2apes.com のサイトが分り難いという人もいるので、CGIをダウンロードするページへの進み方を書いておきます。

2apes.com のサイトが表示されたら、 上にあるメニューの [PRODUCTS] をクリックし、 表示されたメニューから apeboard+ の中の、apeboard+ Download をクリックし、 ダウンロードページを表示します。ダウンロードできるものが幾つかありますが、 Windowsなら通常 「apeboard+ Ver 1.05 [SJIS版]」になります。

＋ apeboard+ のデザイン変更

apeboard+ のデザインは、apeskin をデータとして読み込んで行うものです。 従ってCGI本体の変更はほぼ無いです。考え方は外部スタイルシートと似てて、 apeboard+ も apeskin を変更すると掲示板のデザインが変更されます。

またapeskin はあくまでデザインデータなので、areskin をデザインをする際は、 スタイルシートを使う場合でも、全てareskin に書き込んでおいた方が良いです。 わざわざ外部CSSファイルとareskin ファイルの2枚に分ける必要はないです。


＋ apeskin のベースHTMLを用意する

apeskinの製作は、本体をダウンロードした時に付いてくるものを利用するのが 良いと思います。本体には apeboard+ に必要なものが全て入ってます


＋ 不要な部分を外す

まずスキンの中で不要なものを考えましょう。例えばアイコンを付けたくないや、 メールアドレスをBBSに載せるのはウィルスメールを受け取る率が上がるので、 利用者のために外すとか、タイトルは付けたくないとか、色々考えて下さい。

必要なものと不要なものが決まったら、apeskin.html と res_file.html を改造します。 res_file.html は返事用で、apeskin.html と違うデザインも可能です。

外すものは、まずメッセージ用フォームから取り掛かると分りやすいです。 例えばここのBBSは、メールフォームとアイコンを挿入するのを外しています。 外す場合は、<tr> から </tr>まで外すのが良いでしょう。

メッセージ用フォームで外したものがある場合は、それに対応するメッセージ表示部分も外す事になります。 メッセージ表示部は返信メッセージ表示部もありますので注意して下さい。

例えば本体に付いてくる apeskin でメールフォームを外すのは、25〜28行目の <tr> から </tr>までを apeskin と res_file で削除します。

メッセージ表示部分は、77行目 mail<!--s-->|と、　96行目 resmail<!--s-->|を　 apeskin と res_file で削除すれば良いわけです。
（CGIやHTMLを変更は、行数の分るテキストエディタで行った方が楽です。）

このようにメールアドレス入力フォームを外したら、メッセージ表示部分でも、 メールアドレスの掲載表示が出ないように、どちらも削除するようにします。 下は入力フォームと表示部分の連動を書いたものです。

意味	表示部分の記号	入力フォーム部分	削除
記事の番号	idnum<!--s-->	（CGIより入力）	可
タイトル	subject<!--s-->	Subject: の入力フォーム	可
日付	date<!--s-->	（CGIより入力）	可
名前	name<!--s-->	Name:　の入力フォーム	可
メール	mail<!--s-->	Mail:　の入力フォーム	可
サイトURL	url<!--s-->	URL:　の入力フォーム	可
アイコン	icon<!--s-->	Horoscope:　の選択フォーム	可
メッセージ	message<!--s-->	Message:　の入力フォーム	可

ここで通常外さないのはメッセージ部分ですね。 またメッセージフォーム部分にあるクッキーとパスワードも外しは可能です。 このようにして不要な部分を省いていくと、ソースが見やすくなりますね。

もう1つ絶対に外せないのが、2apes.com のCGI著作権表示です。 各自で作ったスキンの著作権は別途書き足します。


＋ デザインと配置

HTMLをデザインするのはテーブルを使うのが良いです。必要なものを各セルに入れていけば良いですね。 配置変更もできますが、メッセージフォーム部分は、
<form method="post" action="apeboard_plus.cgi">　から　<form>に収まって ないと認識されないように、配置換えする場合はその辺に注意して下さい。

ソースの中に<!--cut-->が2箇所入っていますが、それはHTMLを3つに区切る記号です。 配置換えする場合は、その区切りを超えて行えないものがありますので注意して下さい。

また　<!--cut-->　<!--resstart-->　<!--resend--> は削除できません。
<!--cut-->で「ヘッダ部分」、「ボディ部分」、「フッタ部分」の３つに分けて、 「ボディ部分」は　<!--resstart-->　〜　<!--resend--> の「レス部分」が別扱いになるので、 従って4つに分れていると理解して下さい。skin を作る時、この辺を注意しておけば、あとは普通のHTMLを作る感じです。



<!--cut-->


<!--cut-->



本体をダウンロードするとマニュアルが付いていますので、そこに詳しい説明があります。

名前やメッセージ等の入力フォームが複数ありますが、これは size=10 のように幅を決める事ができます。 しかしNN4とIEでは全くそのサイズが異なります。NN7など最近のネットスケープはIEとほぼ同じように表示されますが、 もしNN4に対してもサポートするなら、NN4で確認しながら speskin を製作する事になります。

またスキン配布サイトの apeskin は、NN4対策されてないものも多く、 NN4で見た時崩れて表示されるケースも少なくないので、気になる方は注意しましょう。

ブラウザの違いによる入力フォーム対策は、size属性をNN4に合わせて作るのが良く、 IE用のサイズはCSSで設定すれば良いです。属性よりCSSのサイズが優先されますが、 NN4では入力フォームの幅のCSSをサポートしていないようなので、IEとNN4でのサイズを調整できます。

Challenge HP で配布している apeskin のフォームは、以下のようにしています。
CSSでのサイズはIE4〜IE6 / NN6〜NN7 用で、size 属性はNN4サイズです。


<style type="text/css"><!--
.inp1 { width:70px; }
--></style>

<input type="text" name="name" maxlength="6" size=10 class=inp1>


またNN4に対応するなら、CSSをなるべく使わない方が良いです。スキンを製作していて、 CSSの padding と line-height でつまづきました。次のようなCSSの指定はNN4で崩れました。


<style type="text/css"><!--
td { padding:5px; }
--></style>


および


<style type="text/css"><!--
td { line-height:1.2; }
--></style>


メッセージ部分に line-height 指定する場合は、td 内に入れた div が良いです。


<style type="text/css"><!--
.line { line-height:1.2; }
--></style>

<td><div class="line">　message<!--s--></div></td>


Challenge HPの内容が理解できたら、apeskinは借りるものではなく、自分で作るものであると気づくと思います。 テキストエディタでソースを書けるように頑張って下さい。それまではここのスキンをカスタマイズして遊んでいましょうか。（笑）

そんな事をしているうちにソースが分るようになるものです。ソースを書ければ、 apeskin 探しの旅から開放されますね。まず apeskin をテキストエディタで開いてみましょう。