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

公開日

2018年3月29日

最終更新日

2021年10月29日

著者

Motohiro Tani

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

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

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

機能の解説

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

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

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

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

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

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

詳細な機能や特長

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

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

サンプルデモ

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

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

設置方法

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

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

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

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

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

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

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

初期状態(このアドオンなし)の状態に戻す方法

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

他のアドオンとの併用について

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

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

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

ユーザ名はtani、パスワードは0000です。
管理画面のサンプル

フォームのHTMLを編集したい場合

(以下は画像アップロードアドオンのバージョン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;

画像表示などのデザイン変更について

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

販売価格や購入方法

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

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

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

領収書について

注意点

このアドオンはレスポンシブ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アドオンに対応。
• 画像表示をわずかに大きく変更。