Home >スクリプト紹介 >Topics Board
Topics Board
- 新着情報ボード -
Topics Board Ver:5.3 (新着情報ボード)
  • オリジナルスクリプト機能的な特長
    1.  スマートフォン画面に対応したレスポンシブデザインです。
    2.  管理者のみが書き込みできる新着情報ボードです。日記などにも使用できます。
    3.  全画面テンプレート式のため、レイアウトやデザインを自由に修正することができます。
    4.  記事と一緒に添付ファイル(画像やPDFファイル等)を3つまで同時にアップロードすることができます。
    5.  画像を自動縮小し、閲覧を軽くすることができます(要:Image::Magick)。
    6.  キーワード検索が可能です。
    7.  YouTube等の埋め込みタグに対応しました。
    8.  アップロードする添付ファイルは、画像の他にも、PDFやWORD/EXCELファイル等も添付することができ、各ファイルに適合したアイコンを表示します。

オリジナルスクリプト解説ページ

  

サンプル/ダウンロード

Topics Board Ver:5.3 PLUS


サンプル利用規定 サンプル

ダウンロード前に必ずオリジナルで動作確認をして下さい!!

改造内容により、互換ツールが必要になる場合がありますので、
「改造点」を必ず目を通して確認して下さい。
(すでにログがある方のみログを変換する必要があります)

以下の書庫ファイルをダウンロードします。文字コードはUTF-8です。

【留意事項】
●Ver.5.0より、文字コードがUTF-8に変更となりました。Ver.4.2以前をご利用の方で、今まで使用していたデータを引き継ぎたい方は、次のような作業が必要です。

(1) data/log.cgi, data/past/0001.cgi{過去ログ}をダウンロードする。
(2) エディタ等を使って、文字コードを Shift-JISから、UTF-8(エディタで「UTF-8N」を選択)へ変換してサーバーにアップする。

●上記作業をしない場合は、記事が文字バケします。

このプログラムを利用する上での利用規定です。必ず目を通しておいて下さい。プログラムをダウンロードする場合、「利用規定」に同意したものとみなします。
プログラム利用規定

Ver:5.3topics53.zip

(Ultimate File up:2023/03/15   03:21)

展開ファイル内容
●ダウンロード後、解凍 します。解凍すると以下のファイルが展開されます。
topics.cgi ----------------- 掲示板本体プログラム
upload.cgi ----------------- イメージ登録プログラム
init.cgi ------------------- 設定ファイル
admin.cgi ------------------ 管理用プログラム
check.cgi ------------------ 動作チェック用プログラム
lib/CGI/Simple.pm ---------- データ受理モジュール [配布元]
lib/CGI/Minimal.pm --------- データ受理モジュール [配布元]
lib/CGI/Minimal.pod -------- データ受理モジュール [配布元]
lib/CGI/Minimal/*.pm ------- データ受理モジュール [配布元]
lib/CGI/Session.pm ----------- セッション管理モジュール [配布元]
lib/CGI/Session/*.pm --------- セッション管理モジュール [配布元]
lib/Digest/SHA/PurePerl.pm --- 暗号化モジュール [配布元]
lib/Calendar/Japanese/Holiday.pm --- 祝日の一覧取得、祝日判定、祝日名の取得ができるPerl モジュール [配布元]

lib/login.pl ----------------- ログインモジュール
lib/jacode.pl -------------- 文字コード変換モジュール [">配布元]
lib/*.pl ------------------- 補助プログラム
lib/thumb.pl --------------- 画像縮小モジュール
lib/File/Readbackwards.pm -- ファイル逆読込モジュール [配布元]
lib/ImgResize.pm------------ サムネイル画像生成モジュール [配布元]
data/topics.dat ------------ データ(save)ファイル
data/img.dat --------------- 登録イメージ保存データファイル
data/*.dat ----------------- データファイル
tmpl/*.html ---------------- テンプレートファイル
data/past/ ----------------- 過去ログディレクトリ
data/ses --------------------- セッションディレクト (管理モード)リ
data/pwd --------------------- パスワードディレクトリ(回数カウント用) (管理モード)
data/pass.dat ---------------- パスワードファイル (管理モード)
html/ ---------------------- RSS2.0フィードファイル(index.xml)保存フォルダ
cmn/js/nicEdit.js ---------- WYSIWYGエディタ NicEdit日本語版 [入手元]
cmn/js/*.js ---------------- ジャバスクリプトファイル
cmn/css/datepicker.css ---- datepickerスタイルシート
cmn/icon/ ------------------ iconファイル
cmn/tool/ ------------------ iconファイル
cmn/topics.css ------------- スタイルシートファイル
cmn/topics-mobile.css ------ スタイルシートファイル(SmartPhone用)
cmn/admin.css -------------- スタイルシートファイル(管理モード用)
cmn/admin-mobile.css ------- スタイルシートファイル(管理モード・SmartPhone用)
cmn/*.js ------------------- javascriptファイル
cmn/*.png ------------------ アイコン画像 [入手元]
upl/ ----------------------- 添付ファイル保存ディレクトリ
img/ ----------------------- 登録イメージファイル保存ディレクトリ
fancyBox/ ------------------ jQuery fancyBox v2.1.7プラグインディレクトリ(画像拡大表示) [配布元]
ディレクトリ構成例
●全体のディレクトリ構成とファイル位置の設置例は以下のとおりです(かっこ内はパーミッションの設定値)。
ディレクトリ構成例
public_html / index.html (トップページ)
    |
    +-- topics / topics.cgi  [755] ... 掲示板本体プログラム
         |       upload.cgi  [755] ... イメージ登録プログラム
         |       admin.cgi   [755] ... 管理プログラム
         |       init.cgi    [644] ... 設定ファイルプログラム
         |       check.cgi   [755] ... 動作チェック用プログラム
         |
         +-- cmn / *.png
         |    |     topics.css
         |    |     topics-mobile.css
         |    |     admin.css
         |    |     admin-mobile.css
         |    |
         |    +-- icon /*.gif
         |    +-- js / nicEdit.js
         |    +-- js / jquery.uploadThumbs.js
         |    +-- icon /*.gif
         |    +-- tool /*.png
         |
         +-- lib / jacode.pl他
         |    |
         |    +-- Jcode / *.*
         |    |
         |    |
         |    +-- login.pl
         |    +-- CGI / Session.pm
         |    +-- CGI / Session / *.pm
         |    +-- CGI / Minimal.pm
         |    |         Minimal.pod
         |    +-- CGI / Minimal / *.pm
         |    |
         |    +-- File / *.*
         |    +-- Calendar/Japanese/Holiday.pm
         |
         +-- data [777] / topics.dat   [666]
         |    |           pass.dat     [666]
         |    |           pastno.dat   [666]
         |    |           img.dat      [666]
         |    |           mem_data.cgi [666]
         |    |           cate.dat     [666]
         |    |           side.dat     [666]
         |    |           link.dat     [666]
         |    |           *.dat        [666]
         |    |
         |    +-- pwd [777] /
         |    +-- ses [777] /
         |    +-- past [777] /
         |    
         +-- img [777] / header.jpg [666]
         |
         |-- fancyBox
         |    |
         |    +-- demo
         |    |
         |    +-- lib
         |    |
         |    +-- source
         |
         |-- html [777] /
         |    
         +-- tmpl / *.html
         |
         +-- upl [777] /
設定修正
init.cgi をエディタで開いて以下の箇所を修正します。
$cf{thumbnail} = 0;
画像を自動縮小する場合は「1」とします。これにより大きな画像でも縮小されるため、閲覧速度が軽減されます。ただし、サーバ側でImage::Magickが利用できることが条件です。Image::Magickの可否は「check.cgi」でチェックすることができます。
$cf{upldir} = './upl';
$cf{imgurl} = './upl';
アップロードする添付ファイルを置くディレクトリのパスと、そのURLを記述します
$cf{homepage} = '../index.html';
(掲示板からの戻り先のURLを記述します。http://から記述しても構いません
$cf{max_topics} = 7;
サイドMENU内「最新記事TOP(リンク数)」に掲載するタイトルリンクの数
$cf{max_archive} = 10;
サイドMENU内「月別アーカイブ」に掲載する月数
$cf{upload_cgi} = './upload.cgi';
イメージ登録プログラムURL
$cf{imgdir} = '/home/eaxample/public_html/topics/img';
登録イメージ保存ディレクトリ【サーバパス】
$cf{imgurl} = 'http://www.eaxample.com/topics/img'
# 登録イメージ保存ディレクトリ【URLパス】(必ず http://からの絶対パスで)
$cf{htmlurl} = 'http://www.eaxample.com/topics/html'
HTMLディレクトリ【URLパス】(必ず http://からの絶対パスで)
$cf{bbs_cgi} = 'http://www.eaxample.com/topics/topics.cgi';
topics.cgiのURLパスをhttp(s)から始まるURLフルパスで定義します
$cf{rssurl} = 'http://www.eaxample.com/topics/html/index.xml';
(RSSフィードであるindex.xmlのURLパスをhttp(s)から始まるURLフルパスで定義します)
$cf{max_failpass} = 5;
(管理パスワードの最大間違い制限を指定します。この回数以上になるとログインがロックされます。
※運用の注意点は右のリンクをご覧ください: 管理パスワードについて
topics.cgi, admin.cgi, upload.cgi, check.cgi をエディタで開いて以下の箇所を修正します。
#!/usr/local/bin/perl
(プロバイダで定められたPerlへのパスを指定します)
パーミッション
●修正が完了したら各ファイルを所定のディレクトリへFTP転送し、アクセス権 (パーミッション) を、以下のとおり設定します。
ファイル名 パーミッション 転送MODE
一般サーバ suEXEC
CGIWrap
topics.cgi
upload.cgi
check.cgi
admin.cgi
755 or 705 701 or 700 Ascii
init.cgi 644 or 604 600 Ascii
html/ 777 or 707 700 Ascii
lib/*.*
tmpl/*.html
lib/login.pl
lib/CGI/Session/*.pm
lib/CGI/Session.pm
lib/Digest/SHA/PurePerl.pm
lib/Calendar/Japanese/Holiday.pm
lib/CGI/*.pm
lib/CGI/*.pod
lib/CGI/Minimal/*.pm
cmn/topics.css
cmn/topics-mobile.css
cmn/admin.css
cmn/admin-mobile.css
- - Ascii
cmn/*.png - - Binary
lib/ImgResize.pm
cmn/js/jquery.uploadThumbs.js
- - Ascii
data/topics.dat
data/pass.dat
data/mem_data.cgi
data/cate.dat
data/img.dat
data/count.dat
data/foot.dat
data/link.dat
data/pastno.dat
data/side.dat
666 or 606 600 Ascii
data | pastディレクトリ 777 or 707 700 Ascii
data/pwdディレクトリ
data/sesディレクトリ
777 or 707 700 -
uplディレクトリ 777 or 707 700 -
fancyBox/*.*
fancyBox/demo
fancyBox/lib
fancyBox/source
- - Ascii
imgディレクトリ 777 or 707 700 -
以上、作業が完了したら「チェックモード」で動作チェックを行ないましょう。 「check.cgi」に直接アクセスすることで、簡易的なチェックを行うことができます。なお、動作チェック後はcheck.cgiはファイル削除しておきます。

check mode

改造点
Date:2023/08/06
RSSフィードを削除した。参照→(https://www.asobou.co.jp/blog/web/death-of-rss)
Date:2022/02/18
管理画面用の認証機能を強化した。(ID・パスワード式、パスワード暗号式、一定回数以上でログインをロック等)[Version UP]
Date:2020/02/05
オリジナルバージョンアップに伴い、管理モードもレスポンシブデザインを取り入れてスマートフォン対応とした。
本文中に好きな数だけイメージを添付可能にした。

{予めイメージ登録/一覧(新規作成)にてイメージを登録する必要がある}

ヘッダーイメージを管理モードからアップロード可能にした

イメージ登録/一覧(新規作成)にて「ヘッダイメージ」を選択してイメージを登録すると、ファイルが「header.jpg」というファイル名で上書きされるのでイメージをUPするだけで自動的にヘッダーイメージが変更される

Date:2016/03/01
「カテゴリー」機能を新設した。

(1) 設定ファイル(init.cgi)でカテゴリー使用の「on/off」を設定出来ます。

(2) 管理画面からカテゴリー名を自由に作成・編集・並び替えすることができます。

(3) 各記事に対して、カテゴリ分類することができます。

(4) 各記事に対して、該当カテゴリのリンクが自動付加します。

(5) カテゴリ分類した個別の記事をセレクト表示します。

※アップデート直後は、カテゴリーに記事が反映していません。

  • カテゴリーは初期設定で「業務連絡」「つぶやき」「日常のできごと」の3つです。
  • ログ変換ツールを使用すると、全ての記事が「業務連絡」に統一されて、カテゴリー表示されます。
  • それから、管理モードの「カテゴリー管理」で、新しくカテゴリーを新規作成、もしくは修正削除を実施します。
  • この時、「業務連絡」というカテゴリー名を一番多く使いたいカテゴリー名に修正すると、全ての記事が新しく修正したカテゴリー名になります。(ログ変換ツールを使わない場合は、全ての各記事を修正する事になります。)
  • その後、「記事メンテナンス」の記事修正で、変更したい記事をピックアップして、新しく作成したカテゴリーを入力修正し、アップデート完了です。
  • 新規投稿する際、「分類なし」のまま、カテゴリーを選択せずに投稿すると、「未分類」として表示されます。

Topics Board v4.2 PLUS {改造版}   ログ変換ツール [過去ログ非対応]


Topics Board v4.2 PLUS ログ変換ツール

Date:2016/02/11
カレンダー機能を新設した。

祝日に対応。(祝日ライブラリ{holiday.pl} holiday v3.0 copyright (c) KentWeb)

カレンダー上の「当日」のハイライト表示対応。

祝日・本日等の色の変更を設定ファイル(init.cgi)で指定。

カレンダー内の「祝日」にマウスオーバーしたとき、その祝日名を表示するようにした。

bootstrap-datepickerを利用して、年月による直接移動をワンタッチで入力可能とした。

記事アイコン{固定*}表示に対応した。

記事アイコンは設定ファイル(init.cgi)で指定。

* 「固定」とは選択式ではなく、設定ファイル内(init.cgi)で指定したアイコン1種類のみ使用可能。

RSSフィードの表示数を設定ファイルで調整出来るように改良した。 (2016/02/13)
RSSfeed表示アイコンを設定ファイル(init.cgi)で設定できるようにした。 (2016/02/14)
Date:2015/12/25
月次アーカイブを新設した。

設定ファイル(init.cgi)で表示数を設定可能

月次アーカイブのタイトルから各月次記事へリンクします。

リンクのリスト表示を改良した。
RSS 2.0 フィードを自動生成できるようにした。
Date:2015/11/15
サイドメニューへ「最新記事」のリンクを表示できるようにした。(表示数は設定で調整可能)
「最新記事」のリンクから記事の個別表示が可能にした。
「スムーススクロール」ジャバスクリプトを適用し、「ページTOP」に戻るボタンからのスクロールをなめらかな動作にした。
Date:2015/06/10
記事内サムネイル拡大表示に「fancyBox」を採用した。

fancyBoxの特徴:
サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページに、拡大画像をオーバーレイ表示します

  • 詳細
    1. 画像の表示(アニメーション)がスムースである
    2. PC画面よりはみ出る大きな画像は、画面に収めるように表示する
    3. 自動スライドショーができる

アルバム内サムネイル拡大表示にも「fancyBox」を採用した

アルバム画像拡大表示時はTOPに、コントロールパネルが表示されます

※TOPにコントロールパネルには「Previous  Strat_Slidshow  Next  Toggle_Size  Close 」がアイコン表示され、各画像の移動やスライドショー、オリジナルサイズ表示などが可能になります

同一ページ内にある静止画像の場合は、TOPのコントロールは表示されませんが、各画像を移動、ループ可能です

Date:2015/04/21
過去ログ機能追加
メール登録・解除、仮登録、本登録画面を全てテンプレート形式にした
Date:2014/04/11
デザインを一新しました
お知らせコーナーとリンクコーナーを新設しました

お知らせコーナーとリンクコーナーは、管理モードにて編集可能です。

WYSIWYG(ウィジウィグ)エディター「NicEdit日本語版」を装備して、ウェブ上での自由な記事編集を可能にしました。《画像挿入は不可》

Topにあるサブタイトルは設定ファイル{init.cgi}にて設定します。

Date:2013/09/21
アルバム機能追加

【init.cgiで表示時間を設定】

init.cgiにて「アルバム表示」のon/off可能

メール配信機能のon/offを設定ファイルにて出来るようにした

メール配信機能を使用していて、途中から停止にする場合は、管理画面等で登録メールアドレスを削除しておくこと

Date:2013/07/19
管理モードにて、メールヘッダ/メールフッタ{footer.txt、header.txt}の編集機能追加

管理者メッセージアップデートは「admin.cgi」のみの上書きでOK!!

Date:2013/07/07
投稿日時表示変更

2013/07/07」→

Date:2013/07/07(Sun) 08:31」に変更

記事番号表示対応(No.**)
Date:2013/07/08
メール配信機能追加

メールアドレスを自由に登録してもらい、書き込み内容を登録者全員にメール通知する。

■メールマガジンとして使用可能

■ユーザーは登録・解除が自由

「メール登録」において、[仮登録~本登録]の手順化を適用

管理者は管理モードにて、登録メールアドレスを閲覧及び削除可能

管理者メッセージオリジナル v4.**から改造版への乗り換え留意事項

変更点
Date:2013/09/21

デザイン(一部カラーリングなど)

メール登録/解除画面、仮登録/本登録画面、ワード検索画面等 デザイン見直し修正

Date:2013/07/07

デザイン(一部カラーリングなど)

バグ修正
Date:2023/03/15

カレンダー日次記事を開こうとすると、エラーになる不具合を修正。

Date:2020/04/03

カレンダー月次記事・日次記事、アーカイブ記事が改行されない不具合を修正。

Date:2016/04/01

RSS feedからの記事個別表示ページのタイトルが「最新記事TOP」と表示されていたのを「RSS feed 個別記事」に修正した。

アップデートファイルは「topics.cgi」「lib/make_rss.pl」を上書きUP、「tmpl/feed.html」を追加UPする。

Date:2016/02/15

リンク管理のソート機能において、ログイン画面に戻ってしまって使用不可の不具合を修正した。

Date:2016/01/12

サムネイル画像を作成する(要:Image::Magick)を「1」に設定すると、fancyboxが正常に作動しない不具合を修正した。

Date:2013/07/23

ワード検索時に記事番号が表示されない不具合修正

管理者メッセージ「topics.cgi」のみの上書きでOK!!

バージョンアップ (オリジナルバージョンアップに伴う)
Date:2022/02/18

Ver.5.1→Ver.5.3

管理画面用の認証機能を強化した。。[2022/02/17 (Wed):v5.3]

Date:2019/12/27

Ver.4.2→Ver.5.1

スマホ画面に対応したレスポンシブデザインとした。[2019/10/14 (Mon):v5.0]

文字コードをUTF-8とした。[2019/10/14 (Mon):v5.0]

画面をHTML5に準拠した。[2019/10/14 (Mon):v5.0]

RSS2.0フィードに対応した(自動生成)。【当サイトはすでに対応済】[2019/10/14 (Mon):v5.0]

Youtube動画が、スマホ画面モードのときに枠外になるためサイズを自動調整させた。[2019/11/24 (Sun):v5.1]

Date:2014/07/27

Ver.4.0→Ver.4.2

PDF,EXCEL,WORD等の添付ファイルに対して、それぞれに適合するアイコンを表示するようにした。