［Lebhaft Ajax一行掲示板の配布］

スクリプト概要

尊敬する長猫氏の猫板を基にAjax化した一行掲示板CGIです。（要はパクry
特徴は、静的HTMLに直接埋め込むことができ、画面遷移がありません。そんだけ。
ブログやSNS、ハイテクWebアプリが普及したこんな時世で、『懐かしさ』がウリです。
ブログに埋め込んだりもできるかも知れません。が、やったことないので知りません。
一応、Internet Explorer6/7と、最近のFirefox、Safariで動作確認しております。

サンプル

ダウンロード

ダウンロード

設置方法

・サーバーへのアップロード

サーバー上でのファイル構成は以下の通りとしてください。
※bbs.jsは埋め込み先と同ディレクトリが良いようです。 

[public_html]----index.html                    #埋め込み先html（※各自ご用意ください）
                |--bbs.css                       #掲示板スタイルシート
                |--bbs.js                        #掲示板Ajax用jsファイル
                +--[cgi-bin]----bbs.cgi          #掲示板本体ファイル
                               |--config.pl        #掲示板設定ファイル
                               |--logfile.cgi      #ログファイル
                               +--[lock]           #ロックファイル生成ディレクトリ

・埋め込み先のhtmlの設定

埋め込み先のhtmlに下記の記述を追加してください。
外部ファイルの保存先がデフォルトと異なる場合には、保存先までのパスを変更してください。
※注意点：Javascriptの非同期通信オブジェクトを使用しますので、htmlの文字コードはUTF-8にしておく必要があります。
※bbs.jsは埋め込み先htmlと同ディレクトリに配置してください。

［head内追加コード］

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <link rel="stylesheet" href="./cgi-bin/bbs.css" type="text/css />
      <script type="text/javascript" src="./bbs.js"></script>
</head>

［body内追加コード］

<body>
      <div id="bbs_out"></div>←このコードを記述したところに掲示板が表示される。
</body>

・掲示板の設定

bbs.cgiをテキストエディタで開いて、perlのパスを設定してください。
サーバー環境に依るので、各自調べてください。 

#!/usr/local/bin/perl   #デフォルト
#!/usr/bin/perl

config.plをテキストエディタで開いて、掲示板の基本設定を行ってください。
管理者名と、パスワード類は必ず変更してください。 

$CONFIG{'script'}       = './bbs.cgi';          #スクリプト本体
$CONFIG{'logfile'}      = './logfile.cgi';      #ログ保存ディレクトリ
$CONFIG{'lock_dir'}     = './lock/';            #ロックファイル生成ディレクトリ
$CONFIG{'lockfile'}     = 'tmp.lock';           #ロックファイル名
$CONFIG{'admin_name'}   = 'unchiman';           #管理者名（変更必須）
$CONFIG{'admin_pass'}   = 'kaetene';            #管理パスワード（変更必須）
$CONFIG{'dummy_pass'}   = 'kaetene';            #ダミーパスワード（変更必須）
$CONFIG{'display'}      = 20;                   #表示件数
$CONFIG{'max'}          = 200;                  #最大ログ件数
$CONFIG{'max_name'}     = 16;                   #名前の半角での限界文字数
$CONFIG{'max_comment'}  = 100;                  #コメントの半角での限界文字数
$CONFIG{'autolink'}     = '0';                  #URLの自動リンク－0:無効、1:有効

bbs.jsをテキストエディタで開いて、bbs.cgiのパス設定を行ってください。

var bbs_script = "./cgi-bin/bbs.cgi";

・掲示板のデザイン設定

デザイン設定は基本的にスタイルシートでの設定となります。
デザインに関わりそうな部分のある程度は、セレクタにしたつもりですが、
もっと細かくデザイン変更したいって方は、スクリプト本体にセレクタを追加するなりしてください。 

/*BBS領域のスタイル*/
#bbs_out {
        font-size: 12px;
        font-family:    'ヒラギノ角ゴ Pro W3',
                        'Hiragino Kaku Gothic Pro',
                        'メイリオ',Meiryo,
                        'ＭＳ Ｐゴシック',
                        'sans-serif';
        width:450px;
        border:2px groove;
        padding:5px;
        background:#ffffff;
}
/*入力フィールドのスタイル*/
#name   {width:80px;}           /*名前入力*/
#pass   {width:50px;}           /*パスワード入力*/
#comment{width:70%;}            /*コメント入力*/
#no     {width:35px;}           /*編集-削除用No入力*/
#ed_pass{width:50px;}           /*編集-削除用パスワード入力*/
.buttons{}                      /*ボタンのスタイル*/
/*メッセージ表示エリアのスタイル*/
#message {
        height:150px;
        overflow:auto;
        text-align:left;
        margin-top:3px;
        margin-bottom:3px;
        padding-top:2px;
        padding-bottom:2px;
        border-top:2px groove;
        border-bottom:2px groove;
        background:#ffffff;
}
/*メッセージ表示エリアの各スタイル*/
/*.mes_no{color:#0000ff;}       /*No,のスタイル*/
/*.mes_name{color:#0066ff;}     /*名前のスタイル*/
/*.mes_com{color:#0099ff;}      /*コメントのスタイル*/
/*編集ハイライトのスタイル*/
.highlight {
        background-color:#ffffbb;
}

免責事項

本スクリプトを使用した事による、いかなる損害も作者は一切の責任を負いません。と言うか、な、何もできないっす。
また、すべてのプロバイダや、環境で動作する事は保証していません。
当たり前ですが、改造とかは自由です。

Copyright © 2008 locus@Lebhaft