掲示板CGIで作るアイデアボード
- (2012-10-11 06:21:32)
・アイデアボード
・アイデアチャットボード
サブカルチャー的存在になった掲示板(BBS)
2000年代前半までperlによる「掲示板」プログラムが多くのプログラム作家によって作られ配布されていた。今となってはFacebookやTwitterがあり下火か。
そのうちFacebookやTwitter熱も冷めるだろうから「掲示板」ブームの再興が来ると予想しているが、現状、2chのようにひたすらサブカルチャーかカウンターカルチャー的存在のままだ。
掲示板CGIで作るアイデアボード
アイデアを書き留めるちょっとしたオンライン・ボードがあるといいな、と思いつき昔懐かしい掲示板CGIを試行錯誤した記録。
CGI配布サイトなどで掲示板を探すと山のように。
2000年代前半の作品が多いので、現在の感覚からするとデザインの古さがちょっと気になる。チョイスは多くない。パラパラ探し回って、シンプルな機能でデザインも現代的なテイストに近いものとして下記のCGIを利用させてもらった:
CANDY CGI
http://www.candy-cgi.com/perl/BBS_Type4.html
BBS Type4(通常タイプ)
インストール
index.cgiの設定を書き換える → 全ファイルアップロード → パーミション設定
30分くらいで完了。パーミッションはいつもながら「777」にするが、ロリポップではcgi系パーミッションを「700」にしないと動作しない。「ラッキー7」を多用する不届き者対策かもしれない。
自分用にカスタマイズしたいと感じた「第一印象」
・新規投稿がページの最後に追加されていく形式 → 最新投稿がトップに来て欲しい
・投稿用フォームがページの最後 → ページトップに
・記事を入れて「投稿ボタン」へTABキーで行かない → マウスなしで投稿完了したい
・投稿完了画面に遷移する → このページは不要、または自動で投稿ページに戻ってほしい
・ページデザイン → style.cssをガリガリ書き換えるしかない
できました、マイアイデアボード
http://www.tokyocafe.net/cgi/bbs/
システムの理解
・全スレッドと全投稿記事は「log1.cgi」「log2.cgi」に書き込まれる。
・しかし、投稿ページの表示は fileフォルダ以下の「1_new.html」のような静的ファイルが生成され表示に利用される → style.cssの変更はブラウザのリフレッシュで変更されるが、index.cgiのプログラム本体のカスタマイズは、静的ファイルの生成後に反映される。
はじめこの仕組みがわからなくて「カスタマイズが効かない」とクリクリしてしまった。静的ファイルの生成タイミングは記事投稿や管理画面での記事管理操作後に自動的に行われる。
・管理画面 → index.cgi?admin
・スレッドと投稿記事は削除可能だが、編集不可能。編集したければ直接「log1.cgi」「log2.cgi」を編集する
・スパム対策 → IPによる制限、連続書き込み制限、英数字のみ投稿制限などある
カスタマイズ:TABキーで投稿ボタンに
<input type="submit" name="entry" value="投稿">を
</textarea>の下に移動
カスタマイズ:投稿フォームをページトップに
「# 各スレッドのデザイン【ここから】」パートの下記部分をbodyタグの下あたりに移動
<form method="post" action="../index.cgi">
・・・
<input type="submit" name="entry" value="投稿">
</form>
カスタマイズ:最新投稿をページトップに
要は「降順・昇順」の入れ替え。
「for ($i=$b; $i<=$c - 1; $i++) {」 →
「for ($i=$c - 1; $i>=$b; $i = $i - 1) {」
カスタマイズ:投稿完了画面から自動的に投稿画面に戻る
●refreshで戻る
最初、簡単な「metaタグ、refresh=0」でやってみた → 「パスワードが違います」のようなセキュリティ違反になる。パーミッションの問題か、ちょっとわからない。
「投稿が完了しました」画面に次の一文を入れてみた:
<META HTTP-EQUIV="Refresh" CONTENT="0; URL="http://tokyocafe.net/cgi/bbs/file/1_new.html" >
●history.back()で戻る
Javascriptで戻ることに。
headタグ内に次を入れる:
<script type="text/javascript"><!--
location.href = "http://tokyocafe.net/cgi/bbs/file/1_new.html";
// --></script>
スレッドが1つしかないとこれでいいが、複数だと対応できないので、結局これだ:
<body onload="history.back(); return false;" >
いい感じです。
●画面のリロード問題
しかし、戻れるには戻れるが、画面が更新されない。つまり、新規投稿記事が画面に出てこない → <body onload="location.reload()" >とするも、無限リロードループに陥る。
無限ループになるんだね、とただただ感心。
「1回だけリロードしたい」と検索するといろいろなサイトが出てくる。同じ悩みのユーザが多数。みんな、苦労しているようだ。どこかのサイトで見つけた次式を試したが、動作しなかった(Window名を利用して無限ループを回避する式):
<script type="text/javascript"><!--
function rCheck() {
if (window.name != "xyz") {
location.reload();
window.name = "xyz";
}
}
//--></script>
手で「F5」をオス!
結果的にこれしか私には解決策が発見できず。いつものように「運用でカバー」。
カスタマイズ:画面が開いたらカーソルがフォーム内で待機
なんの操作もなくすぐに書き込める状態でいてほしいので、画面が開いたら、とにもかくにもフォームの中ですでにカーソルがチカチカ。
●画面が開いたときに特定フォームにフォーカスを合わせておく方法
<body name="top" onload="document.say.kvkfp.focus();">
その他、今回勉強したこと → インラインCSS
<span style="font-size:8pt; font-family:"MS P明朝"; font-weight:normal; ">※記事投稿後は「F5」キーを押してください</span>
なんちゃってCSS。「style=」で始めればいいのか。
ほかに「チャットCGI」が使えるかも
今回は、掲示板CGIからアイデアボードを制作したが、実はチャットCGIから作る方が簡単かも。下記のプログラムがお勧め。
ミニチャット3
http://www.rescue.ne.jp/cgi/minichat3/
そして、インストールしてみた:
http://tokyocafe.net/cgi/chat/nph-minichat.cgi
シンプルで、リアルタイムで、サクサクサ動作するところがとてもグッド。
改行ができないこと(アイデアの表現力が半減するかも)、と時刻表示だけで日にち表示がないことがやや不満ながらカスタマイズすれば、いい感じのような・・・
とりあえず今回は、掲示板BBSでアイデアボード制作完了。後は使ってみて役に立つかどうか運用あるのみ。
・アイデアボード
・アイデアチャットボード
<< 公募方式・小説投稿サイトの構築、試行錯誤中< | >携帯ネットショップ運営の心得 >>