POTI-boardのURL欄の文字列をチェックしてフィルタリングする

POTI-boardの
//拒絶する文字列
$badstring = array("foo","bar");
は、URL欄をチェックしていません。
URL欄の文字列をチェックして拒絶する設定項目を作る事もできますが…。
config.phpの設定項目が増えて、乱雑になるのはあまり好ましい事ではないのかもしれません。
しかし、お絵かき掲示板のURL欄に
.ru
と入力しているのはコメントスパム位なので、設定で弾く事ができたほうがいいような気もします。
設定項目を増やしたくない…だったら設定したい人は本体を改造して…。
POTI-board改とテンプレートシリーズ
から、php7と、PaintBBS NEOに対応したPOTI-boardをダウンロードし、potiboard.phpの860行目付近の
//本文へのURLの書き込みを禁止
if(DENY_COMMENTS_URL && preg_match('/:\/\/|\.co|\.ly|\.gl|\.net|\.org|\.cc|\.ru|\.su|\.ua|\.gd/i', $com)) error(MSG036,$dest);
の下に
//URL欄で拒絶する文字列
if(preg_match('/\.ru$|\.su$|\.ua$/i',$url)) error(MSG037,$dest);
を追加すると…。
.ru
.su
.ua
で終わるURLを拒絶します。
cheapautoinsurancefoo.pw
autoinsurancebar.pw
autoinsurancebaz.top

コメントスパムのURLの一部を変更したサンプルです。
autoinsurance.*\.(top|pw)$
で3パターンすべて拒絶。実際に使うとしたら
//URL欄で拒絶する文字列
if(preg_match('/\.ru$|\.su$|\.ua$|autoinsurance.*\.(top|pw)$/i',$url)) error(MSG037,$dest);
でしょうか。

POTI-boardで水素水を拒絶する

水素水のコメントスパムが連日投稿されている場合の考えられる設定。
//拒絶する文字列
$badstring = array("水( | ?)素( | ?)水","\[\/URL\]");
[/URL]も拒絶する設定に入っていますが…。

POTI-boardの拒絶する文字列には、正規表現を使う事ができます。

サルにもわかる正規表現入門

いつも参考にさせて頂いているサイト様。
正規表現全般については他のより詳しいサイトを参考にしていただくとして…。

水素水という文字列を拒絶したとします。
すると、コメントスパムを投稿する業者は、
水 素 水
水 素 水
水素 水
のように、全角スペース、半角スペースを入れて規制をすり抜けようとします。
正規表現が使えるので
水( | ?)素( | ?)水
全角スペースあるいは半角スペースあるいは半角スペースが無いかもしれないという指定になりました。
実際に試してみると、
水素水
水 素 水
水 素 水
水素 水
どのパターンでも拒絶する事ができました。
水素水の素の部分の一文字が変わる場合は?
水.水
でいい筈なのですが…。.の部分が半角英数であれば拒絶…しかし、全角1文字の場合はなぜか動作しません。
水.*水
にすると、今度は、水寿限無水、でも拒絶されて…。
弾きたくない長い文字列でも拒絶されてしまいました。
[/URL]
を拒絶したい場合は…。
POTI-boardの拒絶する文字列では、/ をエスケープする必要があります。
[ ] は正規表現のメタ文字ですから、[ ] そのものを指定したい場合はエスケープする必要があります。
\[\/URL\]
なぜ日本円の通貨の記号が…と思われるかもしれませんが、本来はバックスラッシュです。
POTI-board改とテンプレートシリーズ

POTI-board改 v1.41.1 lot.180423 18/04/23 up
かなり無理を言って、
//指定文字列+本文へのURLの書き込みで拒絶(正規表現)
$badstring_and_url = array("ブランド","偽物","財布","\[\/URL\]");
という設定項目を作っていただきました。
デフォルトの設定で、本文にURLが記入されていて、かつ、ブランド、偽物、財布、[/URL]の文字列があると拒絶します。

しかし、知らなかったのですが、従来の拒絶する文字列でも結果的に同じになる書き方が…。
//拒絶する文字列
$badstring = array("HOGE","(:\/\/[\s\S]+(財布|偽物)|(財布|偽物)[\s\S]+:\/\/)");
この場合は、URL+拒絶する文字列の前後が入れ替わる事を想定して同じ文字列を二度指定しなければならなくなるので、面倒といえば面倒なのですが…。

正規表現に詳しい人なら、従来のままでも弾く事ができる内容だったようです。
でも、この書き方だとタイトルに偽物、本文にURLの場合は弾かれない…のかな。

お絵かき掲示板の入力フォームにautocomplete属性を設定

設置しているお絵かき掲示板のコメント欄の入力フォームにautocomplete属性を設定しました。

Chromeのパスワード保存機能に対応させるためです。

autocomplete属性 お絵かき掲示板autocomplete属性 お絵かき掲示板

右、BBSNote。左、relm。

autocomplete属性を設定したので、名前+パスワードで保存できるようになりました。

これまでは、URL+パスワードでした。
URLを変更するとその組み合わせて再度パスワードを記憶…というおかしな事になっていました。

POTI-board、は題名+パスワードで、題名を書き換えるたびにパスワードを記憶していました。

<input type="text" name="name" class="post_input_text" autocomplete="username">

名前のところにautocomplete="username"といれただけですが…。

autocomplete属性 お絵かき掲示板

こちらも、名前+パスワードで記憶できるようになりました。

autocomplete属性 お絵かき掲示板

続きから描く時にも名前を選択すればパスワードが入ります。

input 要素 - HTML | MDN

username
new-password: 新しいパスワード (例: アカウントの新規作成やパスワード変更のとき)
current-password

他の絵板と同じパスワードが入っても問題ないはずなので、記憶したいパスワードはcurrent-password、自動的に入力されると困る記事番号+パスワードはnew-password。
フォームのオートコンプリートを無効にするには - Web セキュリティ | MDN

パスワードフィールドのオートフィルを抑止したい場合、autocomplete="new-password" を指定するべきです。ただし、この機能はどのブラウザでもまだ実装されていません。
どのブラウザでもまだ実装されていないとありますが、Chrome64はautocomplete="new-password"で対応可能でした。

Chromeには有効な設定だったのですが、IE11でパスワードを記憶させるとPOTI-boardでは題名+パスワードの組み合わせに…。
Firefoxは…何が変わったのかよくわかりませんでした。

P.S
この記事には後日談があります。

Chrome68 オートフィルを抑止したいだけなのに新規パスワード生成メニューが出る

Chrome68から、autocomplete="new-password"が指定されている箇所をクリックすると新規パスワード生成メニューがでるようになりました。
パスワードを記憶しないようにするための工夫のつもりでしたが、この記事の通りに設定してもうまくいかないかもしれません。

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
pink181031.zip

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

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ブログ

お絵かき掲示板をスマートフォン対応にする

<meta name="viewport" content="width=device-width,initial-scale=1">

viewportを指定します。PC用の解像度で表示しなくなるので、文字が小さすぎて読めない、クリック可能な要素が近すぎるといった問題を回避する事ができます。
ビューポートを設定する  |  PageSpeed Insights  |  Google Developers

ビューポートは携帯端末でのウェブページの表示方法を制御します。ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。

お絵かき掲示板をスマートフォン対応にする

ブラウザの幅をせまくすると文字が縦並びになって読みにくいので…。

お絵かき掲示板をスマートフォン対応にする

ここからブラウザの幅をせまくすると…。

お絵かき掲示板をスマートフォン対応にする

コメントが画像の下に回り込むように設定。
<div class="message">
蒼の六郷の昴さん。
</div>

.messageの幅が200pxより小さくならないようにして、それよりブラウザの幅がせまい時はカラム落ちさせます。
.message {
min-width:200px;
display: table;
}

コメントの横幅が200pxより小さくならないように指定。
min-width:200px;だけではうまくいかないので、display: table;を使いました。

お絵かき掲示板をスマートフォン対応にする

ブラウザの横幅にあわせて画像を縮小。
img {
max-width: 100%;
height: auto;
}

お絵かき掲示板をスマートフォン対応にする

ChromeでiPhoneをエミュレート。

スマートフォンに対応させたお絵かき掲示板はこちら。

PaintBBS NEO

PaintBBSやしぃペインターは過去のものと思っている方も多いようですが、まだ終わっていません。
Chrome、FirefoxがJavaのサポートが終了しても、HTML5のPaintBBS NEOがある!
という事で、既存の掲示板にNEOを組み込む作業をこの間やっていました。
BBSNoteのNEO化は、しぃペインターはJava、PaintBBSはNEOという形でも構わないのであれば簡単です。paint.cgiのヘッダ内テキストの部分にNEOに対応させるために必要な2行を追加して、それに対応する2つのファイルをアップロードするだけ。
しかし、Java版のしぃPaintBBSとPaintBBS NEOを共存させるのは面倒で、ShiPaintBBSPNGの設定を利用してなんとか共存させました。
PaintBBSは投稿に失敗する事が多くなってきているので、PaintBBSはNEOだけでいいのかもしれません。

NEO化に成功したCGIは、BBSNote、藍珠CGI、らくがきひろばRelm

システムを弄るのは面白いのですが…。
絵を描く時間がなくなりました。

という事で、PaintBBS NEOのテスト投稿で描いたようなものばかりですが…。

スク水スク水女の子女の子吊りスカート吊りスカート

もうちょっと丁寧に描きましょうよと言われたような気がしたので「1ポンドの福音」のシスターを画面を拡大しながら描きました。
あれ、スペースを押すと手のひらツールになる!?
PaintBBSを何年も使ってきた筈なのに今頃気が付き…。

1ポンドの福音

phpでお絵かき掲示板の最新画像を表示

お絵かき掲示板の最新画像を呼び出して、トップページに表示させるphp。

BBSNoteなら、newimg.cgiで最新画像の呼び出しができますが、POTI-boardにはその機能がありません。
Pallet Townの最新画像呼び出し機能はChromeでは動作しません。
でも、BBSNoteがあるから問題ない…といいたいところですが、そのBBSNoteも、Perl 5.12.5、5.14.4では動作しなくなるのでいつまで使えるか。

さくらのレンタルサーバ Perl バージョン 選択画面

さくらのレンタルサーバのPerlのバージョン選択画面。

Perl 5.10.1までなら動作しますが、Perlのバージョンが上がるとテキストを書き込む事ができなくなるので、テキストを書き込まないと画像を投稿できない仕組みのBBSNoteでは画像だけの投稿もできなくなってしまいます。

別なお絵かき掲示板のプログラムを使う事になっても、運営している絵板サイトの最新イラストを表示する機能は使いたいので、phpで。

以下はPOTI-boardの最新画像と更新日時を表示するphp。

php/poti/src/
にある、拡張子が jpg あるいは png の最新画像を表示。
<!-- 最新画像 -->
<?php
//配列宣言
$arr = array();
//ディレクトリ内の画像ファイルを連想配列に格納
//キーにファイル名、値にタイムスタンプ
// php/poti/src/ の jpg あるいは png の最新画像
foreach(glob('php/poti/src/{*.jpg,*.png}', GLOB_BRACE) as $filename) {
$arr[$filename] = filemtime($filename);
}
//連想配列を値でソート
arsort($arr);
//上位1件を表示してbreak
$i = 0;
foreach($arr as $key => $value){
echo '<img src="'.$key.'" alt="最新画像"/>';
if($i >= 0){break;}
$i++;
}
?>
<!-- 更新日時 -->
<?php
//更新日時
// 出力例 17/08/01
echo date ("Y/m/d", filemtime('php/poti/index.html'));
?>
拡張子を.phpにしてサーバにアップロード。
表示されたHTML。
<!-- 最新画像 -->
<img src="php/poti/src/OB1495627852533.png" alt="最新画像"/><!-- 更新日時 -->
2017/08/22
サムネイルが作成されるお絵かき掲示板の場合は、
ファイル名の先頭の文字列を指定。

{IMG*.jpg,IMG*.png}
(ファイル名の先頭に IMG が付いていて 拡張子が jpg あるいは png )

練習用お絵かき掲示板 PaintBBS / しぃペインター

phpでディレクトリの最新画像を表示

RelmとPallet Townの最新画像と更新日時を表示。

参考にさせて頂いたサイト。

phpのscandirでの画像更新日時取得 - phpを使用しHPを作成している... - Yahoo!知恵袋
PHPのglob()がすっごい便利だった件 | IDEA*IDEA