お絵かき掲示板簡単設置方法 2019年版

お絵かき掲示板交流サイトで使っているPOTI-board改の簡単設置方法です。

少し前にためしてみたけれど、うまく設置できなかったという方もぜひ…。

お絵かき掲示板簡単設置手順2019年版

POTI-board改をダウンロードします。

以前は、テンプレートが入っていない状態で配布していましたが、今はデフォルトスキンをはじめから入れています。
テンプレートが入っていないと掲示板が動作しないからです。

HTML5版しぃお絵かき掲示板PaintBBS NEOも最初から入っています。
ただし、最新バージョンではないかもしれません。
動作確認のために入れてあります。

お絵かき掲示板簡単設置手順2019年版

ダウンロードしたPOTI-board改のzipファイルを展開して…。

お絵かき掲示板簡単設置手順2019年版

FTPソフトで、php5.2〜php7.xが使えるレンタルサーバにアップロードします。

さくらのレンタルサーバの一番安いライトプランや、XREAの無料サーバでも動作します。

お絵かき掲示板簡単設置手順2019年版

ブラウザで設置したurlを開いて
potiboard.php
にアクセスすると、1、本文無しが表示されます。
投稿してみて問題がない事を確認します。

お絵かき掲示板簡単設置手順2019年版

FTP接続してパーミッションを確認すると、書き込みが必要なディレクトリは777、プログラムが書き換えるファイルは666になっています。
potiboard.phpが必要なディレクトリとファイルを作成してパーミッションを設定してくれます。

お絵かき掲示板簡単設置手順2019年版お絵かき掲示板簡単設置手順2019年版

2005年頃のマニュアルには、設置ディレクトリは777とありますが…。
777にするとサーバエラーになります。

パーミッションの設定を自分でしなければ、起きないトラブルです。

ここまで何も設定しなかったのは、動作する事を確かめるためです。
先にカスタマイズしてから転送したら動かなかったというケースも多いようです。

掲示板が動くことがわかったら
config.php
をutf-8対応のエディタで開き
//管理者パス
define('ADMIN_PASS', 'adminpass');
のadminpassとなっている箇所を、自分にしかわからないパスワードに書き換えます。

管理者パスがそのままだと誰でも記事を編集削除できる状態になるので危険です。
ここの書き換えは必須です。
//投稿サイズ(これ以上はサイズを縮小
define('MAX_W', '300'); //幅
define('MAX_H', '300'); //高さ
投稿した画像が大きく表示されない時は、ここの数値を変更します。
//強制サムネイル機能を使用する する:1 しない:0
define('FORCED_THUMB', '0');
それでも画像がサムネイルになる時は、1を0に変更します。
//タイトル(<title>とTOP)
define('TITLE', 'お絵かき掲示板');
掲示板のタイトルを変更します。
ここを変更してもトップページのタイトルが変わらない時は、管理モードからログ更新するか何でもいいので書いて投稿すれば反映されます。

POTI-boardはテンプレートを入れ替える事ができます。
PaintBBS NEOに対応したものに限ると…。

サ骨さんのテンプレートが4種類。
poti-kai-skins
黒鋼彗牙さんの
Cool Solid
Cool Solidから画像アップロード機能をなくし、BBSNoteに見た目を近づけた
PINK
があります。

お絵かき掲示板簡単設置手順2019年版
テンプレートを入れ替えたのに見た目が変わらない時は、ログ更新、または何でもいいので投稿してみてください。

PaintBBS NEOのバージョンアップに必要なファイルは、
neo/dist/
neo.css
neo.js
の2つです。
ダウンロードしたzipファイルを展開して取り出します。

お絵かき掲示板簡単設置手順2019年版
neo.cssとneo.jsの最新バージョンをpotiboard.phpと同じディレクトリに転送して上書きします。
最近のブラウザはキャッシュがなかなか消えないようです。
NEOのバージョンが上がらない時は、スーパーリロードしてみてください。

POTI-board用テンプレート PINK を配布します。

Chrome、FirefoxともにJavaのサポートを終了。
Windows10のアクセサリに入っているIE11を使えば、とりあえずJavaを使う事ができますが…。

描くたびにJavaのセキュリティの警告…。

これでは、しぃちゃんお絵描き掲示板PaintBBSはすたれてしまう、と思ったら…。
GitHub - funige/neo: PaintBBS NEO

お絵描きしぃ掲示板 PaintBBS ((C)2000-2004しぃちゃん) をhtml5化するプロジェクトです。
Flashやhtml5のお絵描きサイトはいっぱいあるんだけど、そうじゃないんだ。
おじさんは昔のjavaアプレットそっくりの環境が欲しいんだ。
かなりの再現度です。

HTML5ですから、Chromeでお絵かきできます。

PaintBBS NEOは、既存のお絵かき掲示板に組み込む事が可能なので、BBSNote、relm、らくがきひろばでも使えるのですが…。
新規設置をするなら、POTI-boardがいいのかなぁ…と思います。

BBSNoteはPerl5.12以上では動作しない、relmは管理パスワードがURLに出るので、リファラを返す設定で使うと…。

しかし、POTI-boardにも問題があります。
php7では動作しない、と思ったら…。
POTI-board改とテンプレートシリーズ

Punyu NetのPOTI-boardを、php7で使えるように改造したものです。 使いやすさの観点から1.33のベータ版ではなく安定版の1.32から作りました。
さくらのレンタルサーバの一番安いライトプランで、phpのバージョンを7.1にして動作確認。

今のところ問題ありません。

でも、レス送信時のコメント欄の位置が、と思ったら…。
ドラ☆クロウ! - オリジナルイラスト中心よろずサイト -

POTI-boardテンプレート Cool Solid
POTI-board v1.32以降向けのテンプレートです。
SakaQさん作のMONO WHITEを元にHTML5とCSS3で大幅にアレンジしました。
BBSNoteのスキンsiberiaの作者れいさんzero(配布サイト)の、POTI-board版siberiaのデザインを取り入れているのでBBSNoteと見た目が近い。

コメント欄はスレッドの下。

これをベースにすれば、BBSNoteに近いテンプレートを作る事ができると思いました。

作ってみました。

POTI-board テンプレート PINKPOTI-board テンプレート PINK

タブレット。
iPadとiPad ProをChromeでエミュレート。

POTI-board テンプレート PINKPOTI-board テンプレート PINKPOTI-board テンプレート PINK

スマートフォン。
Galaxy S5、iPhone8をChromeでエミュレート。

配布したくなったので、配布します。

画像アップロードができない仕様。
お絵かき掲示板として使いたいという方向けのテンプレートです。

管理画面からの画像アップロードには対応しています。
設置方法、注意事項はreadmeにまとめておきました。

たまに、readmeを読まない方がいますが、読まないといろいろと…。

キャンバスサイズを選択式にしましたが、
セレクトボックスを貼り付けあるだけなので、変更するにはテンプレートを…。

そのあたりの事も、書いてありますので目を通していただけたらと思います。

POTI-board用テンプレート PINK 設置サンプル

設置サンプル。
POTI-board用テンプレート PINK GitHub

テンプレートのダウンロードはこちらから。

BBSNote8.0にPaintBBS NEOを組み込む

HTML5版 PaintBBS NEO 起動画面
以下はBBSNote8.0b19でHTML5版のPaintBBS NEOを使うための設定方法です。

何かのお役に立てればと思いながら書いていますが、この記事を参考にした事によりトラブルが起きても何もしてあげる事ができません。
私はなんら責任を負いません。無保証です。

BBSNoteb8.0はPerlのバージョンが5.12以上の場合動作しません。

いまのところ、さくらのレンタルサーバではPerlのバージョンを5.8.9、5.10.1に切り替える事ができるため動作します。しかし、いつ使えなくなってもおかしくありません。
以下はそれでも、NEO化したいという方向けの情報です。

BBSNoteは配布が終了していて、再配布も禁止されているため新規に入手する事ができません。
作業する前にバックアップを取り、さらに、動作確認のためのテスト用の掲示板を別途設置します。

テスト用の掲示板を設置して問題がないことを確認してから実際に使う掲示板に転送すれば、すでに動作しているお絵かき掲示板をトラブルに巻き込む事なく作業をすすめる事ができます。

NEOを使えるようにする。

GitHub - funige/neo: PaintBBS NEO

から必要なファイルをダウンロードしてヘッダに2行追加します。
neo/README.md at master ・ funige/neo ・ GitHub

1. 基本的には<head>に2行追加するだけです

<head>
<link rel="stylesheet" href="neo.css" type="text/css" />
<script src="neo.js" charset="UTF-8"></script>
...
</head>

neo.jsとneo.cssの2つのファイルを/dist からダウンロードしてください。
最新版のPaintBBS-x.x.x.(css|js)とneo.(css|js)は同じものです。
問題はどこに追加するかですが、Javaのしぃペインターも使いたいのであれば、PaintBBSの設定のところに追加するのが適当だと思います。

paint.cgiの

#=== ★ ShiPaintBBS の設定 ===================================================

以下の箇所に2行追加します。
#-------< ヘッダ内テキスト >--------------------------------------------------
'TxtHead' => <<_TXT_
<link rel="stylesheet" href="PaintBBS-1.2.3.css" type="text/css" />
<script src="PaintBBS-1.2.3.js" charset="UTF-8"></script>
_TXT_
_TXT_を消すと500エラーになるため注意が必要です。

PaintBBS-1.2.3.css
PaintBBS-1.2.3.js

上記の2つのファイルがbbsnote.cgiと同じディレクトリに転送されていることを想定しています。

転送したファイルの名称が

neo.css
neo.js

の場合は、ファイル名をそれに合わせます。

PaintBBS-1.2.3.js

という記述は特定のバージョンのNEOを動作させるためのものです。
<link rel="stylesheet" href="neo.css" type="text/css" />
<script src="neo.js" charset="UTF-8"></script>
としておいて、
バージョンアップしたら

neo.css
neo.js

を上書きする形でも運用できます。

まとめると、paint.cgiのShiPaintBBS の設定のヘッダ内テキストに2行追加して、指定したファイル名と同じファイルをbbsnote.cgiと同じディレクトリに転送するだけです。

PaintBBSを選択した時にはHTML5のPaintBBS NEOが起動し、しぃペインター選択を選択した時にはJavaのしぃペインターが起動します。

Java版のPaintBBSと共存させる事もできますが、書き直す箇所が多くなるため割愛します。

ここから先は、ちょっと難しい設定になります。

PaintBBS NEOで投稿できるのはPNG形式だけです。
BBSNote8.0はPNG形式の画像から続きを描く事ができません。

つまり、NEOで投稿した画像からは続きを描く事ができません。

それでは不便なのでPNG形式の画像から続きを描けるようにします。

paint.cgi
3751行付近の
$fmt_png = 1 if($Data{ ImageSrc } =~ /\.png$/);
$ok_image = 1 if($Data{ ImageSrc } =~ /\.png$/);
に書き換えます。
これだけでは続きから描くためのリンクが出てこないので、skin.cgiの続き表示関係の該当箇所を
$Data{ImageSrc} =~ /\.(jpg|gif|png)$/i) &&
とします。

JPEGでもGIFでもPNGでも続きから描くリンクが出るようになります。

PaintBBS NEOが使えてPNGから続きを描く事ができるBBSNoteのお絵かき掲示板。

気軽にお絵かき PaintBBS/しぃペインター

P.S
NEOv1.5.1〜の描画アニメの投稿と再生に対応させる事ができなかったので、お絵かき掲示板交流サイトの掲示板をPOTI-boardに入れかえました。
しかし、お絵かき掲示板Art.netのミミニャーさんのブログによると改造すれば対応させる事ができたようです…。
すでに入れ替えてしまったので、BBSNoteをメインに使うことはもう無いと思いますが、どうしてもBBSNoteで運営したいという方は下記ブログ記事をご参照ください。

お絵かき掲示板NEOの設置方法(BBSnote編) | ARTNETブログ

POTI-boardの設置方法はこちら。