コンピューター100%

1PageBoard

サンプル
言語 :Perl & JavaScript
ファイルサイズ:36KB  スクリプトファイルをダウンロード

  • 1pageboardとは?

  •  1PageBoardは「ScriCGI」シリーズのうちのひとつで、カード式掲示板です。
     特徴として、
    ・書き込まれたメッセージを1枚1枚のカードとして表示し、ドラッグで移動させることが可能。
    ・カードの表示を「投稿者の指定位置」「円形」「5行2列に整列」の3タイプに変更可能。
    ・カードが重なっている場合、背面のカードにマウスポインタを載せることで、前面に移動。
    ・フォームをドラッグして移動させることで、カード表示位置を指定可能。
    ・カード内の背景色と文字色を設定。
    ・2通りの方法で削除可能。
    ・検索機能。
     があります。
  • 動作環境

  •  Webサーバー側
      ・Perlが使用可能であること。
     利用者側
      ディスプレイ解像度:1024ドット×768ドット以上推奨
      OS
        GUIで操作可能なブラウザを動作させることが可能なもの
        (MacOS,Windows9x/NT/2000/XP,Linux,その他)
      ブラウザ
        ・JavaScriptが使用可能なこと。
        ・Microsoft InternetExplorer 5.0 〜 6.0 及びそのエンジンを使用するブラウザ
        ・Netscape Communications Corporation NetscapeNavigator 6.0 〜 7.1
         (Operaでは表示できません。)

  • 各種設定

  • [1pageboard.cgi]掲示板表示用CGI
    1行目にサーバーのPerlのパスを入れてください。
    36行目にsendmailパスを入れてください。
    39行目に投稿されたメッセージのコピーを送る先のメールアドレスを入れてください。メール送信を使わない場合は、何も入れないで [$mailto = '';] としてください。
    42行目に投稿メッセージを管理人権限で削除するためのマスターパスワードを設定してください。
    45行目に掲示板の[HOME]を押した際に移動するページのURLを記入してください。
    48行目に投稿メッセージを保持する数を設定してください。
    51行目に掲示板のタイトルを記入してください。
    54行目に背景色を設定してください。
    57行目に文字色を設定してください。


    [1pageboard.js]データファイル
    空のファイルです。

    [1pageboard.dat]カウンターファイル
    0を設定してあります。

    [1pageboard.log]アクセスログファイル
    掲示板へのアクセスログファイルです。空のファイルです。

    [1pageboardold.log]メッセージログファイル
    最大保持記事数を超えて削除されたメッセージが溜まるログファイルです。

    [1pageboardbefore.dat]直前メッセージファイル
    2重投稿防止用の直前のメッセージが入るファイルです。

    [jcode.pl]日本語変換用ライブラリ
    Kazumasa Utashiro氏作のフリーの日本語コード変換用ライブラリです。
    再配布可能のため含めてあります。
    URL:ftp://ftp.iij.ad.jp/pub/IIJ/dist/utashiro/perl/

    その他画像ファイルを含めたすべてのファイルを、CGIの使えるディレクトリにアップロードしてください。
    パーミッションの設定は以下のとおりです。
    [1pageboard.cgi] 755
    [1pageboard.js] 666
    [1pageboard.dat] 666
    [1pageboard.log] 666
    [1pageboardold.log] 666
    [1pageboardbefore.dat] 666
    [jcode.pl] 644
    画像ファイル 644
    でいいと思いますが、お使いになるシステムにあわせて変更をお願いします。

  • 設置後

  •  ファイルをアップロードし、パーミッションの設定を終えたら、動作確認をしてください。
     1.ブラウザで[1pageboard.cgi]にアクセスします。
     2.「書き込み」のアイコンをクリックします。
     3.「書き込みフォーム」が表示されるので、書き込みたい場所に移動させます。
     4.記入したら、「投稿ボタン」をクリックします。
     5.「メッセージありがとうございました。」と表示され、掲示板に戻ります。
     6.書き込んだメッセージが書き込みフォームのあった場所に表示されています。ドラッグして移動できるか確かめてください。
     7.削除するため、カードについているごみ箱のアイコンをクリックします。
     8.プロンプトにパスワードを入力し、[OK]ボタンをクリックします。
     9.「削除しました。」と表示されるので、掲示板に戻ります。
     10.メッセージが削除されています。

    不具合がありますか?

    (1)の手順時のエラー
     ・Not Found
      → 入力したアドレスの間違いか、その場所にアップロードできていない。
     ・Internal Server Error
       → Perlのパスの間違い又はパーミッションの設定の間違い。

    (2)の手順時のエラー
     ・書きこむためのフォームが出ない
      → ブラウザが対応していない。IE5.0 or NN6.0以上に換える。
      → JavaScriptがオフになっている。JavaScriptをオンにする。
      → スクロールさせると出てくるかもしれません。

    (3)の手順時のエラー
     ・フォームを移動できない。
      → ブラウザが対応していない。IE5.0 or NN6.0以上に換える。
      → JavaScriptがオフになっている。JavaScriptをオンにする。

    (5)の手順時のエラー
     ・Internal Server Error
       → [1pageboard.js][1pageboard.dat][1pageboardbefore.dat]のどれかが正しくアップロードされていない。またはパーミッションの設定が[666]でない。
     ・「名前が入力されていません」
      → お名前が入力されていない。最上段中央のテキストボックスに入力する。
     ・「コメントが入力されていません」
      → コメントが入力されていない。中央のテキストボックスに入力する。

    (6)の手順時のエラー
     ・Internal Server Error
       → [1pageboard.js][1pageboard.dat][1pageboardbefore.dat]のどれかが正しくアップロードされていない。またはパーミッションの設定が[666]でない。
     ・表示されていない
       →[1pageboard.js]を開き、メッセージが書き込まれているか見る。
        ・書き込まれていない → [1pageboard.js]のパーミッションが[666]でない。
        ・書き込まれている  → ブラウザの「更新」ボタンをクリック。
        

    (9)の手順時のエラー
     ・Internal Server Error
       → [1pageboard.js][1pageboard.dat][1pageboardbefore.dat]のどれかが正しくアップロードされていない。またはパーミッションの設定が[666]でない。
     ・「削除できません。パスワードを確認してください。」
       → パスワードが間違っている。
     ・「パスワードを入力してください。」
       → パスワードが入力されていない。

    (10)の手順時のエラー
     ・依然として表示されている
       → ブラウザの「更新」ボタンをクリック。

  • 使い方

  • 1.起動画面

    左上のアイコンで掲示板を操作します。
    左から、表示されているメッセージより以前、以降のメッセージを表示、サイトに戻るため、ブラウザを閉じる、書き込むためのフォームを表示、メッセージを削除、表示形式を変更、検索フォームを表示するためのアイコンです。

    また、1つ1つのメッセージが300x100の大きさの要素がカードのように表示されます。
    このカードはそれぞれドラッグしてウインドウ内を移動させることが可能です。
    また、マウスポインタを載せると、重なって隠れていた部分が前面に表示され、入りきらなかった部分も表示されるようになります。
    最大保持記事数[$maxlen = x;]で設定したメッセージを最初にすべて読みこむので、大きな数だと遅くなります。
    また、1ページに表示するカードの数は10枚です。
    それを越えた場合、コントロールパネルに次・前ページへのリンクをクリックすると表示されます。

    2.書き込みフォーム

    書き込みのアイコンをクリックすると、書き込みフォームがウィンドウ内に表示されます。
    このフォームはドラッグしてウインドウ内を移動させることができ、「書き込み」ボタンを押した際のフォームの左上の座標が、書き込んだメッセージを表示するカードの位置となります。

    左上にタイトル、その右に名前を入力します。
    その下のテキストボックスはコメント入力欄です。
    3つ並んでいるのはそれぞれメールアドレス、WebサイトURL,削除用パスワード入力欄です。
    その下のリストで、背景色と文字色を設定します。
    左から赤、緑、青の割合を16進数で設定します。
    0が一番弱く、Fが一番強くなります。
    書き終えたら「書き込み」ボタンをクリックします。

    必須項目は、名前とコメント欄です。タイトルがそのままの場合、「無題」となります。
    コメント欄は<b><i><u><strike>のタグが使え、URLの自動リンクが行われます。
    メールアドレスとURL、パスワード欄がそのままの場合は空白になります。消す必要はありません。
    名前、メールアドレス、ホームページアドレスはクッキーに保存されます。

    3.メッセージを削除

    削除には2通りの方法があります。
    1つ目は、カードの削除アイコンをクリックし、プロンプトから削除パスワードを入力して[OK]をクリックし、削除する方法です。

    2つ目は、コントロールパネルの削除アイコンをクリックし、でてきたリストから削除したいメッセージを選び、下のテキストボックスにパスワードを入れて削除する方法です。
    選択したメッセージのカードの枠線が太くなります。
    削除できた場合、次のメッセージが表示されます。
    「削除しました
      OK    」


    4.表示形式を変更

    「表示」のアイコンをクリックし、出てきたアイコンをクリックすることで、3通りの表示方法に変えることができます。
    指定位置

    メッセージを書き込む際にフォームの位置で指定した通りに表示します。

    円形

    カードを3時の位置から順に時計回りでドーナッツ上に並べて表示します。

    整列

    カードを左上から下へ、右上から下へという順番で5行2列に整列させます。

    なお、この表示形式はCookieに保存され、次回表示時に同じ形式に復元されます。

    5.検索機能

    一単語のみの簡易検索機能が使えます。AND(複数の単語をすべてを含む),OR(複数の単語のいずれかを含む)など、条件指定は行えません。
    検索した単語が含まれるメッセージがある場合、通常と同様に表示されます。

    「検索」アイコンをクリックし、出てきたテキストボックスに検索する語を入力し、「検索」ボタンをクリックします。

    検索した単語が含まれるメッセージが表示されます。

  • 考察

  • 日本情報処理開発協会(JIPDEC)という団体が主催する、高校生と専門学生のためのプログラミングコンテストがあります。
    私も、高校二年生の時は時間がなく見送りましたが、高校三年生の時に挑戦してみました。
    作ったのは、[1PageBoard]という名前のこの掲示板です。この制作の過程と、プログラミングコンテストに至るまでの道筋をここに書き記しました。

    最初から掲示板を作って出そうと考えていたわけではなく、この掲示板もプログラミングコンテストとは関係なく、作成していたものでした。
    さいしょはメッセンジャーを作ろうと考えていました。LANを家で組んだところでしたし、学校の課題研究でもLANを使ったコントロールの研究をしていたからです。
    そのメッセンジャーは、すべてを一つのホストにつなぐのではなく、階層型にして、ホストがなくても気軽に参加できるようなコミュニティをいくつも作れたらという構想でしたが実現できずにプログラムにかかりもせず終わってしまいました。

    この掲示板の最大の特徴は、メッセージをカードとして表示することです。
    このアイデアは私が運営しているこのサイト「コンピューター100%(http://computer.shipweb.jp/)」のコンテンツとして面白い掲示板ができないかと考えていた際にふと浮かんできたものです。
    そして制作に取りかかったのですが、完成させずに、途中で止まっていました。
    それを思いだし、このプログラミングコンテストに出せる作品に仕上げようと考えました。

    最初は、今のようにブラウザの画面の中に疑似的にカードのように表示させるのではなく、小さいウインドウを開いてその中にメッセージを表示する形をとっていました。
    しかし、その方法ですと、メッセージの件数である30個ほどのウインドウをポップアップで表示させることになり、パソコンの処理に負担がかかってしまうという不都合がありました。
    わたしはこの制作途中の掲示板を自分のサイトの掲示板として使い、利用者からの感想をいただいて制作の参考にしていました。
    そのウインドウポップアップ方式の掲示板をアップロードしたときのことですが、日ごろから熱心にアドバイスしてくださっていた一人の方からメールをいただき、掲示板として使えない、あれではブラクラ(ブラウザクラッシャー)だという指摘をいただきました。

    私もそれに気がつくべきだったのですが、技術を誇示したいばかりに利用者のことを考えていませんでした。
    そのメールは私にとって少なからずショックの面もありましたが、この掲示板の転機となったとても重要なメールでした。
    わたしも型落ちのMacintoshで動作確認してみたところ、30件近いウインドウを開くのに2分弱かかり、これでは使えないと実感し、変更することを決めました。

    その頃には既に同様の形の掲示板を使っておられる方を知っていました。例えば、「自社ビル」というサイトの掲示板も同様です。
    そのため、あまり気は進まなかったのですが、アイデア自体は自分で考えたものですし、なにか付加価値をつけようと思いました。

    カードでの表示と移動はそれほど難しくはありません。背面のカードにポインタを当てると前面に出て、入りきらない部分を表示する機能をつけてカードの表示部分は完成です。
    すべてのカードの表示方法として、ユーザーが書き込む際に指定した位置、円形に並べる、整列して並べるの3通りを選べるようになっています。クッキーに保存され、次回アクセス時に表示方法が復元されます。」
    円形と整列しての表示は、ユーザー指定位置の雑然とした感じがないので見やすくはあります。しかし自由な感じが無くなってしまう欠点があります。

    書き込む際に、そのメッセージを表示する位置を指定することが必要です。それは、書き込むためのフォームをカードのように移動できるようにし、その場所にカードが表示されるようにしてより直感的に書き込み位置を指定できるようにしました。
    カードの背景色と文字色の指定方法は赤、青、緑の割合を個別に16進法でリストから選び、フォームの内容に即座に反映し、感じをつかめるようにしてありますが、指定方法はわかりにくいかもしれません。組み合わせにより4096色の色を使える利点はありますが。
    Windows+IE6.0ならば、ブラウザ上でペイントなどで使われるカラーピッカーを使えますが、IE6.0だけというのはよくないと思い取り入れはしませんでした。

    書き込まれたメッセージの削除は2通りの方法を用意し、ユーザーがやりやすい方を選べます。
    ひとつは、ここのカードの削除ボタンをクリックし、プロンプトに削除パスワードを入れる方法です。
    もうひとつは、コントロールパネルの「削除」のアイコンをクリックし、出てきたリストから削除したい書き込みを選び、下のテキストボックスにパスワードを入力して削除する方法です。この場合、リストで選択されたメッセージのカードが枠線が太くなり強調表示されるので間違えがないか確認できます。

    そしてそれらの機能のアイコンを描いて使うようにしました。文字だけよりも分かりやすいナビゲーションを目指しました。

    その他簡易検索機能をつけたりして完成したのはプログラミングコンテストの1週間ほど前です。
    これで何とか掲示板としての機能はありますが、通常の掲示板として使うのは難しいかもしれません。
    普通の掲示板になれた訪問者に驚きを与えることはできますが、異質なものへの拒否反応で引いてしまう面もあるかもしれません。
    用途としては寄せ書き版のように使えるかもしれません。1ページずつ線を引いた背景画像をガイドとしてそれにあわせて書き込みをしていけば、整った形の寄せ書きができるかもしれません。
    そんな機能をこれから改良していく上で付けていきたいと思っています。

    ちなみにこのプログラミングコンテストに参加するにはかなりの書類を書かなければならないので余裕を持たないと間に合わなくなります。ご注意を。
    2003/10/02 追記  結果が学校へ送られてきましたが、残念ながら入選は逃しました。

  • 動作確認環境

  • 使用システムの構成

    動作確認環境1 (ローカル接続)
    HARDWARE : 自作PC
    CPU : PentiumIII 866MHz
    RAM : 256MB SDRAM
    HDD : 45GB IBM DTLA
    OS : Windows98 Second Edition
    ブラウザ1:Internet Explorer 5.5
    ブラウザ2:Netscape 6.2
    Webサーバ : BlackJumboDog Version 2.9.1
    CGI : Active Perl 5.6.5

    動作確認環境2 (ローカル接続)
    HARDWARE : 自作PC
    CPU : PentiumIII 866MHz
    RAM : 256MB SDRAM
    HDD : 45GB IBM DTLA
    OS : Windows2000 Professional
    ブラウザ1:Internet Explorer 5.0
    ブラウザ2:Netscape7.0
    Webサーバ : Apatch 1.3.42 (Win32)
    CGI : Active Perl 5.6.5

    動作確認環境3 (ダイアルアップ接続 速度:42.2kbps)
    HARDWARE : 自作PC
    CPU : PentiumIII 866MHz
    RAM : 256MB SDRAM
    HDD : 45GB IBM DTLA
    OS : Windows2000 Professional
    ブラウザ1:Internet Explorer 5.0
    ブラウザ2:Netscape7.0
    Webサーバ : Linux,Apatch ("Japan-fastネット"のレンタルサーバー)
    CGI : Perl

    動作確認環境4 (ダイアルアップ接続 速度:28.8kbps)
    HARDWARE : Apple Power Macintosh 8100/100AV
    CPU : PowerPC 601+ 100MHz
    RAM : 112MB SIMM
    HDD : 1GB SCSIHDD IBM + 4.3GB SCSIHDD SAMSUNG
    OS : MacOS 7.5.5
    PPP : FreePPP 2.5v2
    モデム : Microcom DeskPort33.6s
    ブラウザ:Internet Explorer 5 Macintosh Edition
    Webサーバ : Linux,Apatch (詳細不明) Japan-fastネットのレンタルサーバー
    CGI : Perl

  • 連絡先

  •  この1PageBoardの著作権はシップが所有します。個人で使用する範囲内での改変は結構ですが、その場合の再配布はオリジナルスクリプトの情報と、改変した個所を明記した上でしてください。
     これはフリーソフトですが、寄付などは喜んでお受けしておりますので、メールでお問い合わせください。
     使ってくださる方は、掲示板かメールで一言くださるとうれしいですし、その後のサポートもスムーズに行えます。
     バグの報告もしていただけるなら助けになります。
     また、この掲示板を作るにあたって、数々の参考になる助言をしてくださったジャロ様にこの場をお借りして深くお礼申し上げます。
     最後に、使ってくださる方々に感謝を込めて。
     0:27 2003/08/09

ページ内検索
文章内から検索:
ランキング
著作権表記
Copy right © Ship.
PR