スレッド式BBSの機能紹介やサンプルデモ

公開日 : 2018年10月4日
最終更新日 : 2018年11月9日

スレッド式のBBSの販売を開始しました。
名称は「スレッド式BBS」としました。
サンプルデモもありますので、ぜひ使い勝手をお試しください。

これは当サイトでサポートBBSとして使用しているものとだいたい同じになります。
とは言っても一般販売する以上は、色々な用途に使用できるようにカスタマイズをしてあります。

現在の最新バージョンは2018年10月31日公開のバージョン2.1.1です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

レスポンシブBBSとの違いについて

当サイトではすでに「レスポンシブBBS」というBBSを公開しておりそれもスレッド式と呼べるのですが、最大の違いは以下のようになります。

トップページには各スレッドのタイトル・最終投稿日時・最終投稿者の名前だけが表示される。(投稿本文は表示されません)
上記の各スレッドのタイトルをクリックすると別ページ(個別スレッドページ)に移動し、そのページ内で投稿本文や返信投稿が表示される。

つまり「レスポンシブBBS」では親投稿と子投稿(返信投稿)がトップページからすべて時系列に並列に表示されていくのに対し、この「スレッド式BBS」では親投稿ごとに1つのURL(個別スレッドページ)が割り当てられる。ということになります。

また、各機能ごとに別売り形態の「レスポンシブBBS」とは違い、このBBSはすべての機能が最初から組み込まれております。

主な機能や特長

この「スレッド式BBS」の主な特長は以下のようになります。
以下の一覧が多くて見にくいですが、レスポンシブBBSにある機能はすべて実装されているという前提で流し読みしていただければOKです。

レスポンシブでスマホやタブレットに対応。
設置が超簡単。設定ファイルなし。サーバにアップロードするだけで使えます。
ログの保存はSQLite方式とMySQL方式を選択できます。
入力欄を増やすことはできませんが、減らすことは可能です。
その場合は、HTMLファイル内でその入力欄の親要素のdt,dd要素ごと削除してください。
入力必須項目はHTMLファイル内でdd要素にclass=”required”を追加するだけでOK。
完了したスレッドには「完了」のラベルを表示できる機能。(「完了」の文字は設定ファイルで変更ができます)
美しいHTMLとCSS。W3C準拠。HTML5・CSS3文法エラーなし。
デザインはすべてCSSで設定。自由に変更可能。
ページの移動なしで必須項目の入力チェック。
入力エラーがあった場合にはその項目まで自動でスクロールして戻る機能。
管理者はログインすることで、ブラウザ上で投稿を削除可能。
送信決定時・削除決定時(管理者のみ)にはアラートウインドウで誤送信を防止。
書き込みを行った後に、ブラウザの「戻る」や「進む」ボタンやページ再読み込みなどによってページを行き来してもトラブルが起きない仕様。
直近何日以内の書き込みに対して「NEW」のラベルを表示するかを設定可能。
JavaScriptが動作していない環境からは書き込みできない機能。(スパム対策)
あらかじめ設定したドメインからの投稿しか受け付けない機能。(スパム対策)
CSRF(クロスサイト・リクエストフォージェリ)対策としてトークン機能付き。(スパム対策)
管理者は返信投稿のみを削除したり、親投稿ごとまとめて削除することが可能。
(返信投稿を残して親投稿だけを削除することはできません)
ブラウザ上で過去ログを自由に編集することができる。
画像投稿機能。(詳細は後述)
過去ログを検索できる機能。(親投稿のタイトル・名前・本文が検索対象になります)
トップページに表示される親投稿の一覧をページネーションする機能。
URLを含んだ投稿、禁止IP、禁止ワードをあらかじめ設定しておいて拒否できる機能。
書き込みあった際、BBS管理者にメールで通知が届く機能。(ログイン中の管理者自身の書き込みにはメール通知は来ません)

画像投稿機能の詳細

このプログラムには画像を投稿できる機能が最初から付いております。
画像投稿機能の詳細は以下のようになります。

ファイル選択時にプレビュー表示する機能。
クリックしたら拡大表示する機能。
(PCの場合のみ。スマホの場合は別ウインドウ表示となります)
アップロードできる画像ファイル形式はjpg、png、gifになります。(許可する形式はあらかじめ選択できます)
1つの投稿につき、アップロードできる画像は１枚です。
config.phpにてあらかじめ設定しておいたサイズに自動でリサイズする機能付き。
選択されたファイルが許可された形式かどうかを、ページ移動前(送信前)にチェックする機能。
HTMLやJavaScriptでの設定は悪意ある攻撃者によって改ざんすることが容易なので、上記設定とは別にPHP側でも選択可能な拡張子を設定し、サーバ側にて偽装ファイルかどうかをチェックする機能。
選択されたファイルがアップロード最大容量を超えていないかどうかを、ページ移動前(送信前)にチェックする機能。
HTMLやJavaScriptでの設定は悪意ある攻撃者によって改ざんすることが容易なので、上記設定とは別にPHP側でもアップロード最大容量の設定をし、サーバ側にてその容量チェックをする機能。

サンプルデモ

スレッド式BBSのサンプル
ご自由に書き込んだりして使い勝手をお試しください。

管理画面のサンプル
BBS管理画面にログインをすると、削除機能や過去ログ編集機能を使用することができます。
ユーザ名はtani、パスワードは0000です。
ログアウトはブラウザを閉じるか、またはログアウトボタンを押すことで可能です。

動作環境

PHP5.6以降を推奨。
このサイト上にあるサンプルデモはPHP7世代で稼働しています。

初期状態ではSQLite方式でのログ保存になっているので、サーバ側でデータベースを用意する必要はありません。

もしMySQLやMariaDBのようなサーバ側で用意するタイプのデータベースを使用したい場合は、同梱のconfig.phpの中でデータベース情報を記入すればOKです。(後述する「MySQLを使用する場合」を参考にしてください)

基本設置方法

設置する人が最低限設定する必要があるファイルはありません。
ただ、BBS管理者がログインするためのユーザー名とパスワードは変えておいた方が良いですので、BBSの動作確認後にそれだけは変更してお使いください。

注意点：以下、ファイル保存の際は必ず文字コード設定を「UTF-8 BOMなし(UTF-8N)」で保存してください。
そのやり方については「文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法」を参考にしてみてください。

0、PHPが動くサーバーが必須です。
PHPが動くサーバであるか確認しましょう。
サーバ側の設定でWAF設定がオンになっていたりすると、動作できませんのでご注意ください。

1、zipファイルを展開します。

2、すべてサーバ上にアップロードします。

設置作業は以上です。
ブラウザでindex.phpにアクセスして書き込みテストをしてみましょう。

同梱のconfig.phpの中では画像アップロード機能やスパムブロック機能に関する設定部分がありますが、すべて任意です。
ですので、設定を読むのが面倒な場合はすべてデフォルトのまま使用しても問題ありません。

ただ唯一、以下でも解説する「BBS管理者ログインのためのユーザー名とパスワード」は必ず変更しておきましょう。

BBS管理者専用の機能について

管理者はログインすることで削除機能や編集機能などを使うことができます。
login.phpにブラウザでアクセスし、ログインをしてみましょう。
ログアウト方法は、ログイン後に表示されるログアウトボタンを押すか、またはブラウザを閉じることで可能です。

また、ユーザー名とパスワードはconfig.phpで必ず変更しておきましょう。
変更しておかないと他人に不正ログインされて過去ログを消されたりしちゃうヨ！

HTMLを修正する方法

HTML
BBSの動作に影響しない各部分はHTMLファイルとして分離させてあり、htmlフォルダの中に同梱されています。
それぞれのHTMLファイルごとに以下のようなコメント文を書いてありますので、(以下は bbs-form-index.html の例)

<!-- bbs-form-index.htmlここから -->
<!-- bbs-form-index.htmlここまで -->

BBSのHTMLソースを表示させることで、そのHTMLファイルが適用されている位置を確認できるようになっています。(上記のサンプルデモでも確認可能)

ページ内に何かを追加したい場合はこれらのHTMLファイルを編集すれば、アクセス解析を追加したり既存のサイトにデザインを似せたりなど、ある程度のカスタマイズをすることができます。

bbs-form-index.html (トップページのフォーム部分)
bbs-form-single.html (個別スレッドページのフォーム部分)
edit-form.html (編集機能の際のフォーム部分)
information-index.html (トップページの解説などを書くエリアのHTML)
information-single.html (個別スレッドページの解説などを書くエリアのHTML)
html-header-index.html (トップページのhead要素部)
html-header-single.html (個別スレッドページのhead要素部)
html-header-login.html (ログインページのhead要素部)
header-index.html (トップページのbody要素の開始部)
header-single.html (個別スレッドページのbody要素の開始部)
header-login.html (ログインページのbody要素の開始部)
footer-index.html (トップページのフッター部)
footer-single.html (個別スレッドページのフッター部)
footer-login.html (ログインページのフッター部)

これらのHTMLファイルを実際にご覧になりたい方はこちらからダウンロードできます。
https://www.1-firststep.com/samplephp/thread-bbs-html-sample/html.zip

デザインを変更する方法

デザインはすべてCSSで設定されています。
同梱されているCSSファイルは以下になります。

reset.css (ブラウザのデフォルトスタイルをリセットするためのCSS)
style.css (トップページと個別スレッドページ共通設定のためのCSS)
index.css (トップページ専用の設定のためのCSS)
single.css (個別スレッドページ専用の設定のためのCSS)
login.css (ログインページ専用の設定のためのCSS)

具体的なデザインカスタマイズの方法は以下のページで解説していますので、購入前の方は参考にしてください。
スレッド式BBSのデザインのカスタマイズ方法について解説

MySQLを使用する場合

このBBSは初期状態ではSQLite方式でログを保存するようになっています。

もしMySQLを使用したい場合は、同梱のconfig.phpの中の以下の部分にデータベース情報を記入してください。
記入した場合は自動的にMySQL方式でのログ保存になります。

/* --以下、MySQLなどのデータベースを使う場合の設定-- */

//【任意】 データベースのホスト名 (記入した場合はSQLite方式ではなくなります)
$tb_db_host = '';

//【任意】 データベース名
$tb_db_name = '';

//【任意】 データベースのユーザー名
$tb_db_user = '';

//【任意】 データベースのパスワード
$tb_db_pass = '';