Home >スクリプト紹介 >JOYFUL NOTE
Joyful Note
- 画像アップ式返信ボード -
Joyful Note Ver:7.3 Multi 2.0 (アップロード返信式掲示板)
  • オリジナルスクリプト機能的な特長
    1. スマートフォン画面に対応したレスポンシブデザインです。
    2. 画像等のBinaryファイルをアップロードすることができます。
    3. 画像を自動縮小し(サムネイル化)、閲覧を軽くすることができます(要:Image::Magick)。
    4. 各記事に対して返信レスを付けることができます。
    5. 投稿記事を管理人に自動でメール通知させることできます。
    6. キーワードから過去の投稿記事の簡易的な検索をすることができます。
    7. 過去ログの自動生成が可能です(過去ログの保存対象は記事のみで、添付ファイルは保存しません)。
    8. スパム対策用に画像認証機能を使用することができます。
    9. 全画面テンプレート式のため、レイアウトやデザインを自由に修正することができます。
    10. 画像だけを一覧表示する アルバム機能 が付属します

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

  

サンプル/ダウンロード

Joyful Note Ver:7.3 Multi 2.0


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

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

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

( Ver:7.3 PLUS DL : 2,541 )

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

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

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

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

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

Ver:7.3joyful73multi_2.zip

(Ultimate File up:2023/09/15 16:05)

展開ファイル内容
●ダウンロード後、解凍 します。解凍すると以下のファイルが展開されます。
joyful.cgi ---------------------------- 掲示板プログラム
admin.cgi ----------------------------- 管理用プログラム
member.cgi ---------------------------- 会員管理用プログラム
regist.cgi ---------------------------- 投稿用プログラム
captcha.cgi --------------------------- 画像認証プログラム
init.cgi ------------------------------ 設定ファイル
check.cgi ----------------------------- 設定チェックプログラム
lib/jacode.pl ------------------------- 文字コード変換モジュール [入手元]
lib/Crypt/RC4.pm ---------------------- 暗号化モジュール [配布元]
lib/GD/SecurityImage.pm --------------- 画像認証作成モジュール [配布元]
lib/pngren.pl ------------------------- PNG連結ライブラリ [配布元サイト閉鎖中 : 桜月氏作成]
lib/bin/*.png ------------------------- 画像認証用PNG画像
lib/bin/*.ttf ------------------------- 画像認証用フォントファイル
lib/CGI/Minimal.pm -------------------- データ受理モジュール
lib/login.pl -------------------------- 管理モード・ログインモジュール
lib/Digest/SHA/PurePerl.pm ------------ 暗号化モジュール [配布元]
lib/CGI/Session/ExpireSessions.pm ----- セッションファイル消去モジュール [配布元]
lib/session.pl------------------------- セッションファイル(掲示板入室用)
ses/ ---------------------------------- セッションディレクトリ(掲示板入室用)
icon/ --------------------------------- アイコンファイルディレクトリ
lib/CGI/Session.pm -------------------- セッション管理モジュール [配布元]
lib/CGI/Session/*.pm ------------------ セッション管理モジュール [配布元]
data/*.* ------------------------------ データファイル
data/past/ ---------------------------- 過去ログ用ディレクトリ
data/past/0001.cgi -------------------- 過去ログ用データ
data/session -------------------------- セッションディレクトリ[管理モード]
data/pwd ------------------------------ パスワードディレクトリ(回数カウント用)
data/pass.dat ------------------------- パスワードファイル
data/memdata.cgi ---------------------- 会員ファイル
admin_bg ------------------------------ 管理モード編集フォーム記事背景画像格納フォルダ
background ---------------------------- 記事背景画像格納フォルダ
bg_edit ------------------------------- 編集フォーム用画像格納フォルダ
bgs ----------------------------------- サンプル用画像格納フォルダ
cmn/joyful.css ------------------------ スタイルシートファイル
cmn/joyful-mobile.css ----------------- モバイルスタイルシートファイル
cmn/admin.css ------------------------- 管理・スタイルシートファイル
cmn/admin-mobile.css ------------------ 管理・モバイルスタイルシートファイル
cmn/footerFixed_modified.js------------ フッター位置調整ジャバスクリプト
cmn/index.js -------------------------- 参照ボタン内ファイル名表示スクリプト
cmn/bbs.js ---------------------------- JSファイル
cmn/*.png ----------------------------- アイコン画像 [入手元]
cmn/dist/js/drawer.js ----------------- スマートフォン用メニュー・ジャバスクリプト
cmn/dist/css/drawer.css---------------- スマートフォン用メニュー・スタイルシート
cmn/view/*.* -------------------------- 画像ビューアー(オリジナルで使用) [入手元]
fancyBox/ ----------------------------- jQuery fancyBox v2.1.7プラグインディレクトリ(画像ビューアー) [配布元]
tmpl/*.html --------------------------- テンプレートファイル
img/ ---------------------------------- アップロードディレクトリ
ディレクトリ構成例
●全体のディレクトリ構成とファイル位置の設置例は以下のとおりです(かっこ内はパーミッションの設定値)。
ディレクトリ構成例
public_html / index.html (トップページ)
    |
    +-- joyful / joyful.cgi  [755] .. 掲示板本体
          |      regist.cgi  [755] .. 投稿用Program
          |      member.cgi  [755] .. 会員管理用プログラム
          |      admin.cgi   [755] .. 管理画面
          |      init.cgi    [644] .. 設定ファイル
          |      captcha.cgi [755] .. 画像認証用Program
          |
          +-- background / *.jpg
          +-- bg_edit / *.jpg
          +-- bgs / *.jpg
          |
          +-- cmn / *.png
          |    |     joyful.css
          |    |     joyful_mobile.css
          |    |     admin.css
          |    |     admin-mobile.css
          |    |     bbs.js
          |    |     index.js
          |    |     footerFixed_modified.js
          |    |
          |    +-- dist/css/drawer.css
          |    +-- dist/js/drawer.js
          |    +-- dist/viewer/viewer.js, viewer.css
          |
          +-- lib / jacode.pl他
          +-- lib / login.pl
          |    |
          |    |
          |    +-- Digest/SHA/PurePerl.pm
          |    +-- Crypt / *.*
          |    +-- GD / *.*
          |    +-- bin / *.ttf
          |    |         *.png
          |    +-- CGI / Session.pm
          |    +-- CGI / Session / *.pm
          |    +-- CGI / Minimal.pm
          |    |         Minimal.pod
          |    +-- CGI / Minimal / *.pm
          |
          +-- ses [777]
          |
          +-- data [777] / log.cgi       [666]
          |    |           pastno.dat    [666]
          |    |           memdata.cgi   [666]
          |    |           count.dat     [666]
          |    |           pass.dat      [666]
          |    |
          |    +-- past/ [777]
          |    +-- pwd/ [777]
          |    +-- session/ [777]
          |
          |-- fancyBox
          |    |
          |    +-- demo
          |    |
          |    +-- lib
          |    |
          |    +-- source
          |    
          +-- tmpl / *.html
          |
          +-- img [777] /
設定修正
init.cgi をエディタで開いて以下の箇所を修正します。
$cf{authkey} = 1;
アクセス制限を行う場合「1」、制限しない場合「0」に設定します。
$cf{authtime} = 60;
ログイン有効期間(分)を設定します。
$cf{thumbnail} = 0;
(画像を自動縮小する場合は「1」とします。これにより大きな画像でも縮小されるため、閲覧速度が軽減されます。ただし、サーバ側でImage::Magickが利用できることが条件です。Image::Magickの可否は「check.cgi」でチェックすることができます。)
$cf{max} = 100;
(最大記事数の設定です。これを超える記事とその添付ファイルは古い順に削除されます)
$cf{text_length} = 1000;
テキストエリア入力文字数の最大文字数です。これを超えた部分は自動で削除されます。
$cf{pastkey} = 1;
過去ログを生成する場合には 1 とします
$cf{imgdir} = "./img";
(アップロードされるファイルの格納ディレクトリをサーバパスで指定します。フルパスで記述する場合は、/ から記述します)
$cf{imgurl} = "./img";
(上記のディレクトリのURLパスを指定します。フルパスの場合 http:// から記述します)
$cf{imgcheck} = 1;
(アップされた添付ファイルを管理者がチェック後に表示する場合は「1」とします)
$cf{tubesize} = "640.5px";
(YouTube表示サイズ(width:max-size)横幅を指定します。縦の長さは自動で縮小します。通常854pxですが、大きいと表示するのに時間がかかると思われる場合に使用します)
$cf{topsort} = 1;
レス記事がついた親記事を一番トップへ移動させる場合には1を、親記事を投稿順とするには「0」とします
$cf{maxdata} = 512000;
(1度に投稿できるデータ容量の制限値をバイト数で指定します。例えば、102400バイト=100KBとなります)
$cf{ok_text} = 0; # TEXT
$cf{ok_gif} = 1; # GIF
$cf{ok_png} = 1; # PNG
$cf{ok_jpeg} = 1; # JPEG
(アップロードを許可するファイル形式を指定します。許可するファイルを「1」とします)
$cf{use_captcha} = 1;
スパム対策に画像認証を使用する場合の設定です。使用しない場合は「0」、使用する場合でライブラリー版を使用する場合は「1」、モジュール版を使用する場合は「2」とします
※画像認証(投稿キー機能)についての詳細は右記ページをご覧ください。: 画像認証について
$cf{max_failpass} = 5;
(管理パスワードの最大間違い制限を指定します。この回数以上になるとログインがロックされます。
※運用の注意点は右のリンクをご覧ください: 管理パスワードについて
$cf{lock_days} = 14;
(管理パスワードのロック期間:自動解除を日数で指定。この値を 0 にすると自動解除しません。
joyful.cgi, regist.cgi, admin.cgi, member.cgi, check.cgi, captcha.cgi をエディタで開いて以下の箇所を修正します。
#!/usr/local/bin/perl
(プロバイダで定められたPerlへのパスを指定します)
パーミッション
●修正が完了したら各ファイルを所定のディレクトリへFTP転送し、アクセス権 (パーミッション) を、以下のとおり設定します。
ファイル名 パーミッション 転送MODE
一般サーバ suEXEC
CGIWrap
joyful.cgi
regist.cgi
member.cgi
admin.cgi
captcha.cgi
check.cgi
755 or 705 701 or 700 Ascii
init.cgi 644 or 604 600 Ascii
lib/*.*
lib/login.pl
lib/CGI/Session/*.pm
lib/CGI/Session.pm
lib/Digest/SHA/PurePerl.pm
lib/CGI/*.pm
lib/CGI/*.pod
lib/CGI/Minimal/*.pm
cmn/joyful.css
cmn/joyful_mobile.css
cmn/admin.css
cmn/admin-mobile.css
cmn/bbs.js
- - Ascii
lib/bin/*.png
lib/bin/*.ttf
cmn/*.png
- - Binary
data/log.cgi
data/pastno.dat
data/pass.dat
data/memdata.cgi
data/count.dat
data/count.dat
666 or 606 600 Ascii
sesディレクトリ 777 or 707 700 Ascii
data | pastディレクトリ
data/pwdディレクトリ
data/sessionディレクトリ
777 or 707 700 -
imgディレクトリ 777 or 707 700 Ascii
backgroundディレクトリ
bg_editディレクトリ
bgsディレクトリ
755 or 705 700 Ascii
fancyBox/*.* fancyBox/demo fancyBox/lib fancyBox/source - - Ascii
以上、作業が完了したら「チェックモード」で動作チェックを行ないましょう。 「check.cgi」に直接アクセスすることで、簡易的なチェックを行うことができます。なお、動作チェック後はcheck.cgiはファイル削除しておきます。

check mode

改造点
Date:2023/04/10
返信記事に「引用」機能を付加した。
  • から返信投稿フォーム画面(記事閲覧画面)に移動して、引用したい記事の右下にある をクリックすると記事本文が引用文としてコメント入力欄に挿入されます。
  • トピックモードでは記事タイトルから記事閲覧画面(返信投稿フォーム画面)に移動して、引用したい記事の右下にある をクリックすると記事本文が引用文としてコメント入力欄に挿入されます。
Date:2023/03/30
返信記事専用の背景を追加しました。

現行では、返信記事背景は無効状態だったのを、有効にして専用の半透明の背景を追加しました。

記事背景壁紙について

記事背景をご自分でご用意される方への留意事項です。記事背景画像は3種類あります。

1.記事背景用フォルダ(background)内に格納されているファイルで、記事背景に使用されます。
  横幅は1250pxに設定してあります。
2.投稿フォーム内にある「textarea」用フォルダ(bg_edit)内に格納されていて、textarea(文字入力欄)内に表示されます。
  横幅は540pxに設定してあります。
3.背景サンプル表示用フォルダ(bgs)内に格納されていて、サンプル表示に使用されます。
  横幅は260pxに設定してあります。

テキストエリア内の入力文字数表示に対応しました。

初期設定では文字数制限を「1,000」に設定してあります。init.cgiで設定変更可能です。(164行目あたりです)
「制限文字数を超えた分は自動で削除されます。」

# テキストエリア入力文字数制限
$cf{text_length} = 1000;
Date:2022/12/27
複数添付に対応しました。
添付ファイル名(タイトル)に対応しました。
新着スレッドリストを追加しました。
記事背景(画像)を選択可能にしました。
従来のYoutubeタグの他にYoutube IDを追加対応しました。
スタイルを改良しました。

変換ツール(新規の方は関係ありません。)

留意事項

下記ツールはJoyful Note v7.3PLUS(改造版),もしくはJoyful Note v7.3(オリジナル)からJoyful Note v7.3 Multiに移行する方対応のツールです。

ダウンロードしたJoyful_Note73multi-conversion_tool_all.zipを解凍すると以下のフォルダが展開されます。
○ 1.「joyful73multi_original」→joyful7.3オリジナルからJoyful_Note73multiへ移行ログ変換ツール
○ 2.「joyful73multi」→joyful7.3PLUS(改造版)からJoyful_Note73multiへ移行ログ変換ツール
1.のフォルダにはA.joyful73ori_log_convert.cgi, B.joyful73ori_attch_convert.cgiの2種類のファイルが同梱されています。
Aはjoyful73オリジナルからJoyful_Note ver:7.3 Multiにログファイルを変換するためのツールです。
Bはjoyful73オリジナルでの添付ファイル形式をoyful_Note ver:7.3 Multiに対応させるために変換するツールです。
 先ずAを使用してから、Bを使用します。それぞれの使い方はファイル内に記載されているので、エディタで開いて確認して下さい。

2.のフォルダにはA.joyful73_log_convert.cgi, B.joyful73_attch_convert.cgiの2種類のファイルが同梱されています。
Aはjoyful7.3PLUS(改造版)からJoyful_Note ver:7.3 Multiにログファイルを変換するためのツールです。
Bはjoyful7.3PLUS(改造版)での添付ファイル形式をJoyful_Note ver:7.3 Multiに対応させるために変換するツールです。
 先ずAを使用してから、Bを使用します。それぞれの使い方はファイル内に記載されているので、エディタで開いて確認して下さい。

Joyful_Note73multi-conversion_tool_all.zip

Date:2021/11/01
管理画面用の認証機能強化により、掲示板認証ID,passwordの作成に支障が出たために、会員管理をadmin.cgiより分離した。

新しく増設した会員管理プログラム(member.cgi)には専用のパスワード(初期設定:0123)にて入室します。パスワード設定はinit.cgi内で設定します。

Date:2021/07/24
管理画面用の認証機能を強化した。[Version UP]

ID・パスワード式、パスワード暗号式、一定回数以上でログインをロック等

Date:2021/01/15
入室IDとパスワードの保存機能{クッキー利用}を追加した。

JavaScriptのフレームワーク「AngularJS」を適用。クッキー有効期間:3か月

留意事項:「ブラウザを閉じると同時にキャッシュ等を消去する」設定にしていると使えません。

当サイトではCDNを利用した読み込み方法を適用しました。

最新版が使いたい方は、こちらから最新版がダウンロード出来ます。→AngularJS

Date:2019/12/29
オリジナルバージョンアップに伴い、管理モードもスマートフォン対応とした。
Date:2015/06/05
記事内サムネイル拡大表示に「fancyBox」を採用した。

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

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

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

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

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

Date:2015/06/01
新着記事に「New」マークを表示するようにした。
YouTubeタグ[埋め込みタグ]に対応した。
Date:2015/04/07
記事タイトルに「枠」を設け、投稿時に「枠」カラー選択可能にした。

新規投稿・修正フォームにて、タイトル枠の色{旗色}をユーザーが選択可。

 ←クリック

新しく投稿する前にログ変換ツールを使用してください

Joyful Note v 6.01 PLUS Flag{Title} {改造版}   ログ変換ツール Ver2.0
使用方法はcgi内に記載


Joyful Note v 6.01 PLUS ログ変換ツール

Date:2013/10/05
各記事内に編集ボタンを設置 {掲示板最下部にある削除/修正フォームは廃止}
Date:2013/05/03
スレッド表示・記事閲覧時に「ログインID」表示。

トピック表示は記事閲覧時のみ「ログインID」表示

Date:2013/05/02
アップロードを許可するファイルMP3,PNG 追加
Date:2012/09/26
返信(レス)の投稿数制限機能追加

init.cgiにて投稿数調整可能。

Date:2012/05/20
会員アクセス制限機能追加WEB PATIOから流用

【使用方法 & 設定方法は"WEB PATIO"に準拠】

サンプル→ID:guest PASS:0123 表示名:Guest

Date:2012/02/23
投稿フォームを単独表示に変更
返信(レス)画面を[記事閲覧方式]に変更。
変更点
Date:2015/01/28

デザイン(スタイルシートをCSS3対応にした)

Date:2014/11/13

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

Date:2014/04/07

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

Date:2013-05-03

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

Date:2012/02/23

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

バグ修正
Date:2023/09/15

管理モードで記事の削除が出来ない不具合を修正

Date:2015/09/14

トピック表示時、設定時間を過ぎても「New」マークが消えない不具合を修正

アップデート:joyful.cgiを上書きアップ

Date:2015/07/22

管理モードでの編集機能の不具合を修正
メール送信機能の不具合を修正

Date:2015/04/06

スレッドモードの記事閲覧画面にて返信記事内に編集ボタンが表示されない不具合を修正

Date:2015/03/28

トピックモードにて記事閲覧画面の下部にあるフォームより修正画面に移動して、そこで戻るをクリックするとスレッド画面に戻ってしまう不具合を修正

Date:2014/02/26

トピック表示モード:返信画面において、編集ボタンが表示されない不具合を修正

スレッド表示モード:返信画面において、親記事内の編集ボタンが表示されずに編集出来ない不具合を修正

Date:2012/06/26

返信画面で記事内に画像が表示されない不具合を修正

バージョンアップ (オリジナルバージョンアップに伴う)
Date: 2021/07/24

Ver 7.2 →Ver 7.3

管理画面用の認証機能を強化した。(ID・パスワード式、パスワード暗号式、一定回数以上でログインをロック等)

Date: 2019/12/29

Ver 6.02 →Ver 7.2

スマホ画面に対応したレスポンシブデザインとした。[2019/11/03 (Sun):v7.0]

文字コードをUTF-8に変更した。[2019/11/03 (Sun):v7.0]

HTML形式をHTML5に準拠した。[2019/11/03 (Sun):v7.0]

メッセージの日本語チェック機能を改良した。[2019/11/08 (Fri):v7.1]

スタイルシート (bbs.css) が旧版のままになっていたため差替を行った。[2019/11/10 (Sun):v7.11]

アルバムを全面改良し、viewer.jsを用いたフォトギャラリー機能とした。[2019/12/01 (Sun):v7.2]

カウンタ機能を廃止した。[2019/12/01 (Sun):v7.2]【当サイトではそのまま保守】

Date: 2015/03/29 {4/11}

Ver 6.0 →Ver 6.01→Ver 6.02

掲示板タイプをトピック式に切り替えた時、記事閲覧からの「戻る」で、掲示板タイプが引き継げない不具合を修正。

Date: 2015/03/08

Ver 5.3 →Ver 6.0

デザインを全面的に改良した。

投稿フォームにて、ワンタッチによる表示・非表示機能を付加した。
改造版は単独表示を維持。

過去ログを標準機能とした。改造版は選択式を踏襲。

日本語変換機能・メールmimeエンコード機能を改良した。

Date: 2015/02/27

Ver 5.21 →Ver 5.3

Date: 2014/08/16

Ver.5.20 →Ver.5.21

HTML画面をXML準拠とした。

Date: 2014/01/05

Ver 5.12 →Ver 5.20

ページ送りのデザインを改良した。

Date: 2013/08/25

Ver 5.11 →Ver 5.12

Date: 2013/06/13

Ver 5.1 →Ver 5.11

画像以外の添付ファイルにて、ファイル容量が0バイトになる不具合を修正。

Date: 2013/06/02

Ver 5.02 →Ver 5.1

ページ繰越ボタンを改良。ボタン数の表示を常に最大10個までとし、「前へ」  「次へ」ボタンを自動表示とした。

Date: 2013/05/20

Ver 5.01 →Ver 5.02

ページ繰越ボタンが、Chrome等の表示で左端にずれて表示される不具合に対応。

Date: 2013/05/03

Ver 5.0 →Ver 5.01

init.cgi微調整 (コメント内オートリンク)

Date:2013/04/11

Ver 4.6 →Ver 5.0

[オリジナルバージョンアップ内容]

トピックス表示への切替機能を付加。

アップロード可能ファイルを、画像以外も可能。

その他テンプレート類を前面改訂。

Date:2013/02/02

Ver 4.5 →Ver 4.6

Date:2013/01/06

Ver 4.01 →Ver 4.5

Date:2012/12/25

Ver 4.0 →Ver 4.01

Date:2012/12/24

Ver .3.7 →Ver 4.0

Date:2012/03/13

Ver 3.51 →Ver 3.7