イメージ

2024/03/14 コンテンツ・メーカー2のバージョン3.0を制作中です。

レスポンシブBBSの画像アップロードアドオンについて


こちらのページでダウンロードできるレスポンシブBBSはバージョン3.0から「画像アップロードアドオン」を追加できるようになりました。
このアドオンを追加すると、BBSに画像をアップロードすることができるようになります。

現在の最新バージョンは2022年9月13日公開のバージョン2.1です。
参考ページ:プログラムをアップデートするの際の思想について

各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

この「画像アップロードアドオン」を追加すると、以下のようにファイル選択ボタンが自動的に出現します。
ファイル選択ボタン

画像選択時には以下のように自動的にプレビュー画像が表示されます。
プレビュー画像の表示

そしてフォームを送信すると、以下のように投稿表示部分に画像が表示されます。
画像を投稿

なお、上記の投稿部分に表示される画像は、クリックすると以下のようにオーバーレイで拡大表示される仕組みが付いています。(スマホでは別ウインドウ表示)
オーバーレイで拡大表示

編集機能アドオン」を併用している場合は、既存の投稿に後から画像を追加したり、画像を差し替えたり、画像だけを削除することも可能になります。
画像の差し替えや削除

返信機能アドオン」を併用している場合は、以下のように返信投稿にも画像を添付できるようになります。
返信投稿に画像をアップ

「画像アップロードアドオン」の詳細な機能や特長は以下のようになっています。

  • 他のアドオンと併用可能。
  • ファイル選択時にプレビュー表示する機能。(バージョン1.2以降)
  • クリックしたら拡大表示する機能。
    (PCの場合のみ。スマホの場合は別ウインドウ表示となります)
  • アップロードできる画像ファイル形式はjpg、png、gifになります。(許可する形式はあらかじめ選択できます)
  • 1つの投稿につき、アップロードできる画像は1枚です。
  • WebP対応アドオン(無料)として別配布だったWebP自動変換機能がバージョン2.1からはデフォルトで組み込まれています。
  • 選択されたファイルが許可された形式かどうかを、ページ移動前(送信前)にチェックする機能。
  • HTMLやJavaScriptでの設定は悪意ある攻撃者によって改ざんすることが容易なので、上記設定とは別にPHP側でも選択可能な拡張子を設定し、サーバ側にて偽装ファイルかどうかをチェックする機能。
  • 選択されたファイルがアップロード最大容量を超えていないかどうかを、ページ移動前(送信前)にチェックする機能。
  • HTMLやJavaScriptでの設定は悪意ある攻撃者によって改ざんすることが容易なので、上記設定とは別にPHP側でもアップロード最大容量の設定をし、サーバ側にてその容量チェックをする機能。
  • 設置メールサポート付き。

サンプルは以下からどうぞ。
自由に書き込んでも問題ありません。
画像アップロードアドオン付きのレスポンシブBBSのサンプル

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

説明
このアドオンの設置方法はとても簡単です。

0、まずアドオンファイルを使用する前に、zipファイルを丸ごとコピーしてバックアップ保存しておくことをおすすめいたします。

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

2、レスポンシブBBS本体にあるaddonフォルダの中に、attachmentフォルダを入れます。
以下の場所にattachmentフォルダを設置してください。
css~uploadのフォルダの中身は以下の図では省略しています。

responsive-bbs-v5.0.1/
  ┃
  ┣━━ addon/attachment/ここにアドオンの様々なファイル
  ┃
  ┣━━ css/中身を省略
  ┃
  ┣━━ db/中身を省略
  ┃
  ┣━━ html/中身を省略
  ┃
  ┣━━ js/中身を省略
  ┃
  ┣━━ php/中身を省略
  ┃
  ┣━━ upload/中身を省略
  ┃
  ┣━━ index.php (BBSページ)
  ┃
  ┗━━ login.php (ログインページ)

設置は以上です。
BBSページにアクセスするとファイル選択ボタンが自動的に出現します。
もしすでにBBSページを表示させていた場合は、ページを再読み込みしてください。

適当に画像アップロード投稿をしてみて正常にアップロード・表示されるかを確認してみましょう。

初期状態(このアドオンなし)の状態に戻すには、上記の設置手順2でaddonフォルダに入れたattachmentフォルダごと削除することで戻ります。

レスポンシブBBSにはこれの他にも色々なアドオン(追加機能)がありますが、すべて併用することが可能です。
必要な機能だけを組み合わせてお使いください。

一例として「返信機能アドオン」と「画像アップロードアドオン」を組み合わせたサンプルを設置しておきます。
返信時にも画像をアップロードできるようになります。
画像アップロードアドオン・返信機能アドオン付きのレスポンシブBBSのサンプル

さらに「編集機能アドオン」も追加すると、BBS管理者は投稿された画像を差し替えたり削除することができるようになります。
画像アップロードアドオン・返信機能アドオン・編集機能アドオン付きのレスポンシブBBSのサンプル

編集機能はBBS管理者の特権なのでログインが必要です。
ユーザ名はtani、パスワードは0000です。
管理画面のサンプル

(以下は画像アップロードアドオンのバージョン2.0以降の解説です)
画像アップロードアドオンが有効になると、BBS本体のhtmlフォルダの中に「form-attachment.html」というファイルが自動生成されます。

このファイルが画像アップロードアドオン使用時のフォームになりますので、元々のフォームである「bbs-form.html」と同様のカスタマイズをすることができます。(必須や任意を変更したり、項目の順番を入れ替えたりなど)

以下の設定は変更しなくても特に問題はありません。
もし設定を変更するとしても、まずは上記までの設置作業が正しく完了しており、画像アップロード機能が正常動作するかの確認をした後にしたほうが無難です。

4、attachment-config.phpを開き、上記手順7と同じになるように送信可能なファイル形式を1または0で指定します。(以下はjpgファイルだけを許可する例)

$rb_jpg = 1;
$rb_png = 0;
$rb_gif = 0;

5、ファイルのアップロードというものは文字のようなテキストデータに比べると圧倒的にデータ容量が大きく、そのぶんサーバに負荷がかかります。
attachment-config.phpを開き、アップロードできるファイルサイズの上限を記入します。(以下は2MBまで許可する例)

$rb_upload_max_size = 2000000;

【注意】
サーバ側のphp.iniで設定されているアップロード制限値以上を記入しても効果はありません。

デザイン
画像表示など、このアドオンの機能に関する部分のデザインは同梱のattachment.cssにてすべて設定されています。
デザインを変更したい場合は上記ファイルを編集することで可能です。

電卓
価格は15,000円(税抜)となります。
設置メールサポートがついておりますので、ご自身で設置をする際につまづいた際にはご質問ください。

【注意】
設置メールサポートは「アドオンの設置」に関しての質問のみとなります。
ですので、アドオンなしの初期状態のレスポンシブBBSが正常に動作している上でご購入ください。

また、カスタマイズに関してのご質問は有償メールサポートを別途お申し込みください。

ご購入は以下からどうぞ。
ペイパルと銀行振込でのお支払いの場合は、料金のお支払いをしていただき、その入金確認後にメールで添付にてお送りする形となります。
クレジット決済の場合はお支払後にすぐダウンロードができますので、お急ぎの方にはおすすめです。

【レスポンシブBBSの画像アップロードアドオンのご購入】
ペイパルでお支払い
お問い合わせページからお申込み(銀行振込)
BASEでご購入(クレジットカード) (決済後ダウンロード可能)
このサイトでご購入(クレジットカード決済) (決済後ダウンロード可能)

【クレジット決済の注意点】
上記のペイパルと銀行振込以外の場合は、お支払後にアドオンファイルをすぐにダウンロードできます。

このサイトでのクレジット購入の場合は、入力必須な項目を最低限としている分、ダウンロードはそのセッション中(ブラウザを閉じるまで・または24分以内)にのみ可能となります。
再ダウンロードしたい場合は、お問い合わせページからご連絡くだされば、本人確認後にメール添付にてお送りいたします。

注意
このアドオンはレスポンシブBBS本体のバージョン5.0以降に対応しています。
(レスポンシブBBS本体のバージョンは「version.php」に記載してあります)

また、普通に使用していてプログラム上のバグ(不具合)があった場合には、追加料金なしでバグ修正を行いますので、そのような際にもご連絡ください。
(お客様の手によってJavaScriptファイルやPHPファイルを独自カスタマイズされている場合は除く)

2018/03/29 バージョン1.0 (本体3.0~3.0.1で動作確認済)
  • 公開。
2018/06/21 バージョン1.1 (本体3.1で動作確認済)
  • iOS 11.3のSafariの不具合に対応しました。(画像アップロードアドオンを使用時にのみ発生するバグ)
  • attachment-config.php内で設定するアップロード容量制限の値を2MBに変更。
2018/06/27 バージョン1.2 (本体3.2で動作確認済)
  • ファイル選択時にプレビューを表示する機能を追加。
2019/01/05 バージョン1.3 (本体3.3~4.0で動作確認済)
  • タブレットでの表示を整えるため、レスポンシブのブレイクポイントを640pxから1000pxに変更。
    (本体バージョンが3.0~3.2でも正常動作はしますが、タブレットでの表示がズレます)
2021/08/18 バージョン2.0 (本体5.0~以降で動作確認済)
  • 設置手順を簡略化。
  • loading=”lazy”とdecoding=”async”を追加したことで、ページ表示速度が速くなりました。
  • srcset属性やsizes属性に対応したことで、画像表示の綺麗さと表示速度を両立。
  • WebPアドオンに対応。
  • 画像表示をわずかに大きく変更。
2022/09/18 バージョン2.1 (本体5.0~以降で動作確認済)
  • 透明化PNGに対応。
  • 今まで「WebP対応アドオン」として別配布だった機能がデフォルトで組み込まれました。
提供サポートなど