お絵かき掲示板NEOの設置方法(BBSnote編)

2019年1月15日

JAVAが使えないパソコンはもちろん、スマホやタブレットでも絵が描ける!
懐かしくも新しいお絵かき掲示板「NEO」の設置方法。

今回は「BBSNote」の改造方法です。
JAVA版の「しぃPaintBBS」を、HTML5版の「NEO」に置き換えます。
(併用も可能ですが今回は説明を省きます)

今回改造したCGIは当時大人気の「BBSNote」の最終バージョン「V8.0b19」
(BBSNoteは配布終了していますので、新規設置の方は、RelmやPOTI-board等がおすすめです)

Relmの改造方法はこちら(Relmの方が改造は簡単です)
NEOの詳しいダウンロード方法などもこちらの記事をご参照ください(今回は説明を省略しています)

BBSNote改造に用意する物

(1) BBSNote (改造するのはpaint.cgi)
(2) NEO「neo.js」と「neo.css」
今回使うNEOはver. 1.5.1以降の動画再生対応版です。
NEOのダウンロードはこちら

【paint.cgiの改造1】お絵かき画面のPaintBBSをNEOに置き換える

paint.cgiの4060行目付近
PaintBBS(NEO)ツール選択時のお絵かき画面で、APPLETタグをダミーに書き換えます。
<APPLET の行を<APPLET-DUMMY に書き換えます。
ついでにAPPLETタグの上にNEOを呼び出す以下のタグ2行追加します。
<link rel=”stylesheet” href=”neo.css” type=”text/css”>
<script src=”neo.js” charset=”UTF-8″></script>


<APPLET の行はpaint.cgi内に5箇所あるので間違わないように注意!
書き換えるのは4060行目(PaintBBS用のAPPLETタグ)です。

paint.cgi 4060行目
(1) $APPLETTAG .= <<_APPLET_;の行と、<APPLET の行の間に、NEOを呼び出すタグを2行追加します。
(2) <APPLETに続けて-DUMMY を追加
$APPLETTAG .= <<_APPLET_;
<link rel=”stylesheet” href=”neo.css” type=”text/css”>
<script src=”neo.js” charset=”UTF-8″></script>
<APPLET-DUMMY

ここまでの改造で、PaintBBSを選択して、お絵かきするとNEOで投稿OK!
しかしこのままでは、NEO動画の保存や再生が出来ません!

【paint.cgiの改造2】NEO動画の保存に対応させる

paint.cgiの「sub AnimeAnalyze」付近の行で、投稿時の動画ファイルチェックしている部分を改造します。
↓この行を
if($$Data =~ /^\x1F\x8B\x08\x00.+/) {
↓このように書き換えます
if($$Data =~ /^\x4E\x45\x4F/) {

\x1F\x8B\x08\x00や\x4E\x45\x4Fは動画ファイルの先頭を正規表現で判定しています。
気になる人は動画ファイルをバイナリエディタで開いてみてください。


これでNEOの動画が保存されるようになりました。
次の改造で最後なので頑張ってください。

【paint.cgiの改造3】NEO動画の再生に対応させる

paint.cgiのsub OpenAnime~内の3060行目付近にNEO動画再生用のタグを追加します。
paint.cgi内に似たような行が沢山あるので間違わないようにご注意ください。
改造するのは3060行目付近です。


#■から始まる行は説明用なので、有っても無くても、かまいません。
上の画像の青枠の部分、新規追加するソースです↓

#■改■追加■NEOアプレットダミータグ
if ( $src_path =~ /\.$CFG{ ShiPaintBBS }{ anime_ext }$/ )
{#▼NEO動画なら実行
#■<APPLET>に付け足す-DUMMY
$NEOAPPLETDUMMYTAG = ‘-DUMMY’;
#■NEOを呼び出すタグを変数$NEOTAGに入れる
$NEOTAG = <<“NEOJSCSS”;
<link rel=”stylesheet” href=”neo.css” type=”text/css”>
<script src=”neo.js” charset=”UTF-8″></script>
NEOJSCSS
}#▲NEO動画なら実行

次に、元からある部分に、上で作った「NEO動画の場合にだけ値が入る変数」$NEOTAG$NEOAPPLETDUMMYTAGを追加します。
それから、name=’app’をname=’pch’に書き換えます。

$APPLETTAG .= <<_APPLET_;
$NEOTAG
<APPLET$NEOAPPLETDUMMYTAG
name=’pch’
codebase=’$AppletCodebase’
code=’$AppletCode’
archive=’$AppletArchive’
width=’$AppletWidth’
height=’$AppletHeight’
$MAYSCRIPT>
_APPLET_

これでNEOの動画が再生できるようになりました。
もちろん動画からコンティニューもできます。
お疲れ様でした。
これでBBSNoteもNEOに完全対応です!

こちらの改造と動作確認はWindows10 IE11 ロリポップ!サーバーで行っています。
2018年12月11日
BBSNoteが使えないサーバーや、改造が上手くいかないけれど今までのBBSNoteのログは使いたい場合は、BBSNote→Relmログ変換ツールなどを使ってみるのも良いでしょう。

お絵かき掲示板BBSNoteでNEOを使う方法
さとぴあさんのブログのBBSNote8.0にPaintBBS NEOを組み込むも参考になると思います。
linkタグをhead内に書く方法などが詳しく解説されています。