トップへ > Web Program Lab.> 掲示板をつくろう(設計)
ウェブ・プログラムの研究所 Web Application Programming Lab.
一つ前にもどる 目次にもどる 次のページへ
●掲示板をつくろう

WebでCGI、Perlといえば掲示板がその代名詞みたいになっていて、みんな自分のホームページに掲示板を設置したくてCGIを探し回ったりするくらい当たり前の機能になっています。

これまでは、HTMLの表示、データの入力、ファイルへの保存や分岐、セッションの保持を考えてきました。実はこれらを応用するだけで掲示板のプログラムが出来てしまいます。

そこで、実際に掲示板を作りながら、プログラムの流れを実験してみたいと思います。


●概要の設計〜

これは、どのようなアプリケーションを作成する場合でもそうですが、実際にプログラムソースを書き出す前に大まかな設計図を思い描いてみる必要があります。プログラムのプロではないので、そんなに厳密ではないにしろ、このような概要を決めておくことで、エラーや間違いを防ぐことが出来ます。

今回の掲示板の例で言うなら、、、

掲示板の機能としては大きく分けて2つあります。一つ目は記事の表示機能です。書き込まれた内容をデータから取り出して表示する機能ですね。二つ目は書き込むための機能です。利用者から入力されたデータを受け取って、保存用のファイルに書き込む機能です。
[掲示板のイメージ]
掲示板イメージ
*上の画面のソースと掲示板は全く関係ありません。イメージです。m(__)m

簡単にいうと、この二つの機能なのですが、さらに基本的な機能を考えると、掲示板の書込み(表示)内容はどのようなものにするべきかということを考えなくてはなりません。名前、タイトル、書き込んだ日時を記録するのか?どの項目を必須とするのか?保存する記事は何件くらいを想定しているのか、、、ということです。

さらに表示や書込みを行うページのデザインや、書き込むときと書き込んだあとの表示の移り変わり等の画面の変遷も考えていく必要があります。

このような情報を事前にまとめておくことで、後になって「あれはどうだったかな、、?」的な間違いをすることがなくなりますよね。

そこで、今回は下のような必要最小限の設計図を作ったとして、プログラムを考えていきたいと思います。


 [書込用プログラム]

HTML書込みフォーム(HTML
  ↓
フォームからの入力
  ↓
入力されたデータの加工、チェック
  ↓
入力されたデータの保存
  ↓
保存後の終了画面(HTML


 [表示機能用プログラム]

プログラム呼び出し
  ↓
ログファイルの読み込み
  ↓
HTMLの生成(表示)(HTML



上の流れに従うと、基本的に3つの画面が必要となります。太字で「HTML」になっている場所がそうですね。

1)データを入力させるための書き込み用HTML
これは、プログラムで生成させる必要はないので、通常のHTMLファイルでかまいません。

2)書き込みを登録するボタンを押したあとのHTML表示
上のフォームから受け取ったデータをログファイルに書き込んだあとに、書込みが終了した旨の表示

3)書き込まれた記事を一覧で表示する画面
ログファイルから必要データを取り出して、HTMLとして表示する機能


●書き込み機能の設計

まず、書き込み機能を設計したいと思います。そのためには下の項目について決めておく必要があります。

・書き込みを行う項目について
 番号、名前、件名、内容、書込日時など、、、

・書込み項目の各データの属性
 どのようなデータを受付可能とするか

以上のようなことを決めることによって、1)の入力用画面のデザイン、そしてそれを受けるプログラムの書込み処理でどのようなデータを保存するべきかの処理、最後に記事表示用画面の表示デザインがきまるので非常に重要となります。

掲示板にもいろいろ種類があり目的によっても違ってくるとは思いますが、おそらく一般的な掲示板としては、名前、件名、内容程度で十分だと思いますので、ここでは1)の入力画面をデザインする時にはその3項目を入力できるようなHTMLを作ります。


01: <form action="bbs.cgi" method="POST">
02: お名前 <input type="textbox" name="namae" maxlength="20"><br>
03: 件 名 <input type="textbox" name="kenmei" maxlength="40"><br>
04: 内 容 <textarea name="naiyo"></textarea><br>
05: <input type="submit" value="送信">
06: </form>

  ↓(こんなかんじ)
お名前
件 名
内 容


次に、FORMで入力要求をされた後に書込みを行うプログラムでどのようなデータを入力するべきか、ということを考えないといけません。さっきの3項目だけでは、なぜだめなのか?ということですが、ダメなわけではありません。それ以外の付加情報を記録しておいたほうが便利なときもあるからです。

例えば、書き込んだ時間などはサーバー側で自動的に記録できますので、表示のときに書き込まれた時間を出したいときは、入力されたデータとともに記録することとなります。また、個別の書込みに対して一意(ユニーク)となるような番号を付けたほうが「何番の発言」というようにわかりやすいと思いますので、このような情報も受け取ったあとに自動的に付与して保存することにします。

目的にもよりますが、それ以外の情報についても、サーバー側で必要であれば生成して記録するということができます。ここでは、とりあえず以下の情報を保存することに決めます。


[記録する情報の一覧]
項目名 属性1 属性2
番号 自動 -
なまえ 20文字まで 必須
件名 40文字まで 任意(空欄なら自動)
内容 500文字まで 必須
日時 自動 -


また、これはあとでもふれますが、書込みデータを無限に受付けるとディスクスペース等の関係もあり困るので、どの程度の書き込みまでとするのか、ということも決める必要があります。例えば、最新の書込みデータから10件までしか保存しないで、あとは古いものから消去していく、、、とか、100件まで、、、、とか、そのような制限はしないとか、、、

基本的には以上のような設計が必要です。 どのようにログデータを管理・保存するかについては次回検討します。


●表示機能の設計

次に表示機能の設計です。 こちらは、入力機能ほど複雑ではありませんが、記録されたファイル(ログファイル)からどのようなデータを読み込んで、どのようにHTMLとして表示するか、という部分のデザインをすることになります。

また、あまりにも書込み件数が多い場合には、一度に全ての書込みを見せるのか、または最近のものから順番に10件ずつみせるのか、といった機能を付与する必要があります。

とりあえず、ここでは単純にデータを抜き出してHTML形式で表示、という流れだけのものを考えたいと思います。具体的な表示イメージとしては下のようなHTMLを考えます。(ページに分けて表示する方法については別途考えます。)


(表示のイメージ:↓こんなかんじ)
書き込みです。
四郎(2004/6/11 11:21)[No.2]
ここは内容を書くんですね、、、、


掲示板のリニューアル
二郎(2004/5/30 08:46)[No.2]
あたらしくなった掲示板ですが、○○のところがすこし不具合があるみたいで、、、、


掲示板作成のおしらせ
太郎(2004/5/23 14:21) [No.1]
先週おしらせした掲示板のけんですがついに完成しました。 よろしければなんでも書いてくださいね、、、、


・・・

このような設計をあらかじめ決めて、初めて実際のプログラムに取りかかれることになります。




(2004/2/24 by あいまい)
一つ前にもどる 目次にもどる 次のページへ

トップへ > Web Program Lab.> 掲示板をつくろう(設計)
copyright(C) 2001-2004 all rights reserved
『ウェブ・プログラムの実験場!』

by あいまいモード・コム(www.iMYmode.com)