お絵かき掲示板PHPスクリプトPOTI-boardを改良していくプロジェクトです。
PHP7.4-PHP8.3
English translated version is here. POTI-board EVO-EN
繁體中文版本 POTI-board EVO-zh-TW
-
v2.26.0以前のPOTI-boardにはXSSの脆弱性があります。
悪意のあるJavaScriptが実行される可能性があります。 -
v3.09.5以前のPOTI-boardのすべてのバージョンには重大な欠陥があります。
すべてのログファイルを失う可能性があります。
また、v3.x系統のPOTI-boardはPHP8.1環境で非推奨のエラーがでます。
現時点では警告ですがPHP9で動作が停止します。
そのためのv6.xの開発です。
v6.xの利用をよろしくお願いします。
v3.0で従来のPaintBBS NEO、しぃペインターに加え高機能なHTML5のペイントアプリChickenPaintの使えるようになりました。
スクリプトの名称はPOTI-board EVO(Evolution)になりました。
PHP8.1～PHP9に対応するためにテンプレートエンジンをBladeOneに変更し、potiboard.phpのコードの見直しを行いました。
v3.x系統の開発は終了し、v5.xになりました。
v3.xのテンプレートは使えなくなりました。
v5.xに対応したテンプレートをご利用ください。
v5.10.0で、新しいHTML5のペイントアプリklecksが使えるようになりました。
POI-board EVO v5.x で変わる事 · Discussion #15
設置はとても簡単です。
potiboard5ディレクトリをアップロードして、アップロードしたディレクトリのurlにブラウザでアクセスするだけで設置が完了します。
管理者パスワードの設定は必須です。
config.phpの最初の数行に必須設定項目がありますので、変更してください。
お絵かき掲示板簡単設置方法
お絵かき掲示板PHPスクリプトPOTI-board改公式サイトと、設置サポート掲示板 をオープンしました。ご利用ください。
設置サポート掲示板にはさとぴあが常駐しています。
- ログファイルの形式は同じです。どのバージョンのPOTI-boardのログファイルでも動作します。
potiboard.phpsearch.phpsave.phppicpost.phpconfig.phpの再設定が必要です。新しいconfig.phpを使用して再設定する必要があります。
saveklecks.php
lib/chickenpaint/klecks/BladeOne/templates/
拡張子blade.phpのファイルがHTML部分です。CSSファイルもtemplates/ディレクトリの中にあります。
parts/ディレクトリにもいくつかのblade.php形式のファイルが入っています。
laravel-blade - Visual Studio Marketplaceを使うとBladeの文法にそって色分けされて表示されます。
これによりBladeのHTMLファイルの編集が容易になります。
エディタも拡張機能も無償で利用できます。
この掲示板はテンプレートを入れ替える事ができます。
BASICとMONO2種類のテンプレートを同梱しました。
MONOのHTMLとCSSをv3.07.5で大幅に更新しました。
そのためv3.07.5より古いCSSファイルを使用すると一部のデザインが正しく表示されなくなります。
たとえば、フッターやカタログの見た目が意図通りになりません。
その場合は、カスタマイズしたCSSファイルと同じ配色のCSSと同じになるように作り直す必要があります。
もし配色のみを変更したいのであれば、SCSSファイルもありますのでどうぞご利用ください。
SCSSファイルはmono/css/dev/sass/ディレクトリに入っています。
配色とその他のデザインに設定が分かれているため、配色を容易に変更できます。
Visual Studio Code – コード エディターと拡張機能DartJS Sass Compiler and Sass Watcher
があればコンパイルできます。エディタと拡張機能どちらも無償で利用できます。
potiboard_plugin: お絵かき掲示板 POTI-boardのための外部phpプログラム
パレットデータ(やこうさんパレット)、BBSNoteのログファイルをPOTI-board形式に変換するログコンバータなどがあります。
HTMLタグも旧独自タグも廃止してしまいましたが、urlの自動リンクは使えます。
また、マークダウン形式のテキストリンクも使えます。
[テキストリンク](https://example.com/)と書くと
テキストリンクのようなテキストリンクを作成できます。
画像をポップアップ表示する時に使用していたLuminousの開発が中止になり、中止されただけでなくLICENSEファイルもリポジトリから削除されてしまったため、LICENSE不明になってしまいました。
そのため、Lightboxを使用してポップアップ表示する事にしました。
しかし、Lightboxでは、Luminousではできていたいくつかの事ができません。
そのためLightboxを改造して、見た目と機能をLuminousに近づけてその問題を解決しました。
- 透過PNGを透過させる
Lightboxでは背景色が白になってしまうため、背景部分を透明にして透過PNG画像の背景が透明になるようにしました。 - 画像長押しで保存
Lightboxでは画像の長押しで画像を保存できない仕様のため、CSSを調整して画像の長押しで画像を保存できるようにしました。 - 前後のナビゲーションバーの位置を変更 画像の上に表示されていた前後の画像を表示するための矢印を、左右の横幅からの位置に変更して、左右に余白があるときは画像の上でではなく、画面の左右にナビゲーションの矢印を表示するようにしました。
- 閉じるボタン
前後ナビゲーションの矢印以外のどこを押しても画像を閉じるようにしました。
しがたって閉じるボタンは必要がなくなりました。 - 画像読み込み中の画像
ローディング中の円のGIFを、透過PNGで作成した大小ふたつの円に変更。CSS3で画像が回転します。
HTMLにセットしたCookieの値と、実際のCookieの値を照合するシステムを廃止。
投稿時にCookieが存在しない場合もユーザーコードのCookieを再発行して投稿できるようにしました。
ユーザーのブラウザからCookieが消えた場合だけでなく、サーバのWAFの設定によってCookieが照合できなくなる問題にも対応できていると思います。
また、PaintBBS NEOとしぃペインターの拡張ヘッダに情報を詰め込んでいましたが、拡張ヘッダではなく、GETパラメータで取得する方式に切り替えました。
互換性維持のため、GETで取得できない場合は拡張ヘッダでも取得できるようにしました。
- ｢ctrl+r｣による再読み込み、｢ctrl++｣によるブラウザ全体の拡大縮小、｢ctrl+h｣による履歴の表示｢ctrl+s｣によるページを保存といったブラウザのデフォルトのショートカットをChickenPaint、Tegaki、Klecksのペイント画面で無効化しました。
- ChickenPaintのショートカットキーを変更。｢ctrl+y｣をやり直し、｢ctrl+h｣を変形にしました。
- Macの時はマスク適用、マスク削除のショートカットキーを｢⌘+｣に。
これは、かなり以前から存在していた問題です。
｢透明部分を保護｣等のチェックボックスや｢合成方法｣等のセレクトボックスを操作すると、ChickenPaintのショートカットが効かなくなる問題がありました。
ショートカットが使えなくなった時は、画面のどこかをペンでタッチするとショートカットが再び使えるようになるので、操作を続行できにはできていたのですが、｢ctrl++｣で画面を拡大しようとした時にブラウザのショートカットが有効になりUIが拡大されてしまったり、｢ctrl+s｣で画像をPCに保存しようとしたらブラウザのデフォルトのショートカットとして認識されてしまって、画像の保存ではなくHTMLが保存される等の問題が発生していました。
時間がかかりましたが、何とか問題を特定し、解決方法を見つける事ができました。
問題があった箇所を操作しても、ChickenPaintのショートカットは有効なまま維持されます。
ブラウザのデフォルトのショートカットと入れ替わってしまう問題は解消されました。
しかし、念のため、UIの拡大のショートカットに使用される｢+｣｢-｣と、保存に使用される｢s｣のブラウザのショートカットキーを最初から無効化する処理も追加して、意図しない動作にならないようにしました。
-
ズームの拡大率を141%に、縮小率を70.92%に変更しました。
これまでは、拡大時に200%拡大され、縮小時には50%に縮小されていました。 この拡縮率は大きすぎるため、二度拡大すると200%になるように調整しました。
また、拡大縮小を繰り返すと、100%、200%または50%に戻らなくなる事がありました。
拡大縮小を繰り返しても、100%、200%または50%に正確に戻るようになりました。 -
70.92%に縮小した時に描線がガタガタに表示されてしまうため、ズーム時に補完して表示するオプションをデフォルトで有効になるようにしました。
ドットの状態を確認したい時には、この機能をオフにする必要があるため｢表示｣→｢ズームをなめらかに表示する｣をオフにしてご利用ください。
- ショートカットキー一覧、送信ダイヤログの未翻訳箇所の日本語訳を追加しました。
｢Right｣｢Left｣も｢右｣｢左｣に翻訳しました。
この間の更新でレイヤーマスクやブラシサイズのスライダーのショートカットキーも追加されていますので、見やすくなったショートカットキー一覧のヘルプをぜひご利用ください。
ドロップダウンメニューのメニュー項目にカーソルを合わせた時に英語の説明文が表示されていましたが、表示する項目を整理して必要なものだけ残し、それを日本語に翻訳しました。
レイヤーマスクのサムネイルをクリックして使用するショートカットキーを追加しました。 これにはマニュアルに記載がなかったものの機能として最初から存在していたものも含まれます。
- シフト+クリックでレイヤーマスクの表示/非表示
- alt+クリックでレイヤーマスクのマスク部分を表示
- ctrl+クリックでレイヤーマスク適用
- シフト+ctrl+クリックでレイヤーマスク削除
このショートカットキーの追加で、レイヤーパレットの右クリックメニューに存在していた処理を行う事がでるようになりました。
どのぐらいの方が使っていたのかわかりませんが、レイヤーパレットの右クリックメニューにはグループ結合や、レイヤーマスクの表示/非表示等数多くの項目が存在していました。
CSSフレームワークBootstrapをBootstrap4からBootstrap5対応に変更する作業で、この右クリックメニューを再実装する事ができなかったため、多くの埋め合わせを行いました。
レイヤーパレットにグループ結合アイコンを追加したのもそのためです。
しかし、iPad等最初から右クリックが使えない環境の場合は、より操作しやすいChickenPaintになっていると思います。
トップページの静的HTMLにアクセスするだけではブラウザにCookieはセットされませんが、その静的HTMLのトップページからペイントボタンを押した時にCookieの有無をチェックする機能が働いて、｢Cookieが存在しません｣というエラーになっていました。
ペイントボタンを2回押せば動くには動くのですが、静的HTMLからのpostでCookieを確認するのは無理があるので、ペイント時にはCookieを確認しないようにしました。
通常の下のレイヤーと結合で結合するとクリッピングが解除されてしまいますが、レイヤーグループ内で下のレイヤーとクリッピングしていれば、グループ結合でレイヤーを結合しても、クリッピングが維持できます。 また、たくさんレイヤーがある時はグループ化して閉じればレイヤーパレットの場所を取らず便利です。
しかし、これまではグループレイヤーを結合するには右クリックメニューから選ぶか上段のメニューからグループ結合を選択する必要がありました。
そして、レイヤーの右クリックメニュー機能を再実装できなかったので、実質上のメニューか、ショートカットキーでしか操作できなくなっていました。
そこで、レイヤーパレットに｢グループ結合｣アイコンを追加しました。
1タップで、グループフォルダ内のレイヤーを結合して1つにします。
レイヤーパレットのマスクアイコンの動作を変更しました。
選択しているレイヤーにマスクが無い時は｢マスク追加｣になり、マスクが存在している時は｢マスク適用｣に変わります。
これによりペン操作で簡単にレイヤーマスクを適用できようになります。
これまでの、マスクアイコンには｢マスク追加｣機能しかありませんでした。
- SHIFT+Mでマスク削除
追加されたショートカットキーの一覧はこのページを確認して覚える必要はありません。
メニューの横にショートカットキーが表示されていますので、追加されたショートカットキーはそこからご確認できます。
- 右クリックで、ブラシパレットのスライダーが緩やかに変化するようになる機能を改善しました。
従来は、ブラシサイズと、不透明度以外のスライダーも右クリックによる緩やかなスライダーの変化の動作に入っていましたが、スライダーの種類によっては28%や56%でスライダーが動かなくなる等の問題が発生していました。
また、右クリックしながらスライダーを調整するのは結構面倒です。
- 右クリックによるドラッグに加え、SHIFT+左ドラッグでもスライダーが緩やかに変化するようにしました。
ペンを使っている時は、シフトキーを押しながらペンでスライダーを調整するだけで緩やかに変化するようになります。 - ブラシサイズと不透明度以外の期待通りに動作しないスライダーには緩やかなスライダーの変化を適用しないようにしました。
ブラシサイズと不透明度以外のスライダーが途中で止まったり、スライダーが入力できなくなったりする項目のスライダーは最初から緩やかに変化するスライダーのモードに入らないようにしました。
｢ChickenPaint｣のロゴ部分を｢ChickenPaint Be｣に変更して、改造版である事が一目でわかるようにしました。
掲示板のエンドユーザーの方には直接関係ありませんが、｢ChickenPaint Be｣のソースコードはここにあります。
satopian/ChickenPaint_Be: お絵かき掲示板Petit Noteのためのbootstrap5対応のChickenPaint
改造したものを再配布する時のライセンス上の条件にソースコード公開の義務があります。
そのためヘルプページにも｢ChickenPaint Be｣のGitHubのリポジトリのURLを記載しました。
- レイヤーを変形しようとした時にレイヤーが非表示または不透明度0%の時にも、非表示、不透明度0%というメッセージをポップオーバーで出すようにしました。
これまでは、単に変形できないだけで、なぜ変形できないのかを説明するメッセージの表示がありませんでした。 - レイヤー名をマウスで変更できなくなっていたのを修正しました。
ペンタブレットやタッチデバイスの場合はダブルタップでレイヤー名の変更が可能ですが、マウスではそれが出来ません。
従来は、マウスの右クリックで、｢マスク追加｣｢クリッピング｣｢レイヤー名変更｣などのコンテキストメニューが開いていたので、そのメニューを使ってレイヤー名を変更する事が可能でした。
しかしながらBootstrap5に更新した結果、同じコンテキストメニューを表示を表示する事が困難になってしまったため、マウスの場合は右クリックでレイヤー名の変更になるようにコードを変更しました。
たったそれだけの作業でしたが、解明が困難な軽微なエラーメッセージが表示される問題を解決するためだけに20時間以上費やしてしまいました。 - ファイルメニューで｢PCに保存｣(CTRL+S)した時のファイル名に投稿日時分秒が入るようになりました。
これによりファイル名を変更して保存しなくても、同一フォルダに途中経過を保存できるようになりました。 これまではファイル名が｢oekaki.png｣固定でした。
改造版に固有の機能が存在し、オリジナルには存在している機能が無くなっている事や、改造版に固有の問題が発生している可能性もある事から、オリジナルの｢ChickenPaint｣と区別するために、改造版の｢ChickenPaint｣の名称を｢ChickenPaint Be｣としました。
satopian/ChickenPaint_Be: お絵かき掲示板Petit Noteのためのbootstrap5対応のChickenPaint
- Bootstrap4ではjQueryで制御していた箇所が、Bootstrap5ではJavaScriptとなり、大幅なコードの書き換えが必要になりました。
また、従来の書き方を単に置き換えただけでは意図した動作にならないケースがいくつかあり、新しく処理を追加して対応しました。
気が遠くなるような作業量でしたが、将来廃止予定のJavaScriptがBootstrap4のコードに入っていたため、これから先の数年後もChickenPaintが使えるようにするために必要な作業でした。
satopian/ChickenPaint_Be: お絵かき掲示板Petit Noteのためのbootstrap5対応のChickenPaint
↑ ビルドするためのソースコードはここにありますので、気になる方はご確認ください。
ChickenPaint-Bootstrap5.-Petit.Note-Chrome-2024-01-07-10-55-53-Trim.mp4
- 変形確定前にレイヤーを追加しようとすると変形を確定する取り消すなどの操作を促すダイヤログが表示されますが、従来の動作では、変形確定のエンターキーの押下で変形は確定されるものの、ダイヤログはすぐには消えず、レイヤーの追加も行われませんでした。
今回の修正により、エンターキーによる変形の確定と同時にダイヤログは閉じられ、かつ、レイヤーも追加されるようになります。
また、一連のダイヤログの日本語対応も行いました。
ChickenPaintのグリッド設定で数値入力確定のエンターキーを押下すると、掲示板トップに画面が移動して描いていた絵が消えてしまうバグを修正しました。
- 独自カスタマイズ版のChickenPaintを更新しました。
描画時の円カーソル表示を別の方法で再実装しました。
タッチデバイス以外のPC等で描画時にも円カーソルを表示します。
- Altキーのキーアップのデフォルトの動作をキャンセルしてこの問題を修正しました。
- PaintBBS NEO+Firefox時の問題は解決できましたが、CheerpJを使って起動したしぃペインターでは、AltキーでFirefoxのメニューバーの表示/非表示の動作が発生してしまいます。 CheerpJが起動した時点で、キーアップイベントの取得ができなくなるようです。 Chromeではこの問題はなく、FirefoxとFirefox派生ブラウザで発生します。
- ｢Altキー｣押下直後にショートカットキーが効かなくなる問題が、tegaki.jsでも発生していました。
- ChickenPaintと同じように｢Altキー｣を離した時点で｢altキー｣のデフォルトの動作をキャンセルする事でこの問題を解決しました。
- 個別スレッド時のスレタイへの個別スレッドの固定リンクを追加しました。
- メインページ同様スレタイをクリックすると、その個別スレッドが表示されます。
- 個別スレッド表示時に、スレタイをクリックするとスレッドをリロードできるようになります。 (テンプレートBASICのみ)
Waterfox Classic | Waterfox Classic 「Pale Moon」古い「Firefox」の拡張機能も動作する派生版Webブラウザー - 窓の杜
該当ブラウザは上記URLからダウンロード可能です。
IEとEdgeのIEモードではオラクルのJava8の32bit版を使いますが、｢Waterfox Classic｣と｢Pale Moon｣は64bit版のJava8が必要で、EdgeのIEモードも、｢Waterfox Classic｣と｢Pale Moon｣も使いたい時は、32bit版のJavaと64bit版両方のJavaのインストールが必要です。
この｢Waterfox Classic｣と｢Pale Moon｣でJavaプラグインを使ったしぃペインターを起動する事はできていましたが、投稿に失敗する状態だった事がわかりました。
独自に追加したセキュリティチェックでエラーになっていました。
この問題を修正して、｢Waterfox Classic｣と｢Pale Moon｣でも、Javaプラグインを使ったしぃペインターからの投稿ができるようにしました。
Windowsであれば、EdgeのIEモードを使う事でJavaプラグインによる安定した環境でしぃペインターを利用可能でしたが、Macでは、｢Waterfox Classic｣や｢Pale Moon｣を使うしかJavaプラグインを使う方法が存在しないため、対応しました。
どうすれば手動でJavaをダウンロードしてWindowsコンピュータにインストールできますか。 オラクルのJava8のインストールはここから
インストールしても、例外サイトリストに登録しないと起動しません。
若干不安定ではあるものの、Google ChromeではCheerpJでJavaプラグインを使用しなくてもしぃペインターが起動します。
また、ネット上で｢しぃペインター｣という用語で呼ばれているレイヤー2枚の｢お絵かきしぃ掲示板 PaintBBS｣は、｢しぃペインター｣ではなく｢PaintBBS｣です。｢PaintBBS｣はHTML+JavaScriptの｢PaintBBS NEO｣へ移行しているため、Javaは必要なく、上記のJava関連の問題とは関係ありません。
-
しぃペインターから送信された画像の破損チェック機能を追加しました。
しぃペインター以外のお絵かきアプリにはすでに実装ずみの画像の破損チェックを追加しました。
画像の破損が確認された場合は、お絵かき画面から移動せず、スクリーンショットの撮影を促すエラーメッセージを出します。 -
PaintBBS NEOではない、古いJavaのPaintBBSからの投稿時に、ツール名が｢Shi-Painter｣になっていたのを｢PaintBBS｣になるように修正しました。
HTML5版のPaintBBS NEOとは別の古いJavaAppletのPaintBBSから送信されたデータの場合はツール名が｢PaintBBS｣になるようにしました。
JavaプラグインではPaintBBSからの送信に失敗し、CheerpJv2.3からの送信の場合にも失敗しますが、CheerpJv3では成功するため、古いpchデータをキャンバスに読み込んで送信する事が可能になります。
その時のツール名が｢PaintBBS｣になるように調整しました。
CheerpJ のv3は、正式版がでてから対応する予定です。
お絵かきアプリから送信されたPNG画像が破損していたら、お絵かき画面から移動せず、スクリーンショットの撮影を促すエラーメッセージを出すようになりました。
ImageCreateFromPNG()で画像を生成する事ができるかどうかチェックする事で、画像が破損しているかどうかを検出する事に成功しました。
これにより、画像が破損した状態で投稿され作品が失われる確率をさげる事ができました。
psdファイルやchiファイル等アプリ固有ファイルのチェックは含まれていません。固有ファイルが破損して、同時に画像を上のレイヤーで隠している場合は、画像の復旧ができませんのでご了承ください。
破損状況を確認する事ができたのはPNG形式の画像のみです。
- Tegakiのみを使う設定の時にお絵かき機能が有効にならないバグを修正しました。
- CheerpJ v3で動的パレットの明るさの明+明-が動くようになります。
しかしながら、掲示板のJavaScriptにも手を加える必要があり、なおかつEdgeのIEモードやFirefox51等でオラクルのJava8を使った時にもパレットを動作させる必要があります。
それぞれに対応するため処理の追加と振り分けができるようにしました。
具体的にはJavaScriptのawaitが使用可能かどうかUAから判断して、利用可能な場合はasync、awaitをJavaScriptに追加します。
- Exifを解析して位置情報が検出された時はGDで作成した画像で上書きして位置情報を削除するようにしました。
- Exifに画像の回転情報が入っている時は、画像の向きを修正した新しい画像を作成するようにしました。 これにより例えばスマホの縦長の写真 をアップロードした時に、横長になってしまう問題が解決するかもしれません。
- デジカメ写真や印刷用途の解像度のイラストはWebへのアップロードには適していない場合があります。
- 今回の更新では、Petit Noteですでに採用ずみの処理を使い、1024px以上の画像を1024px以内に収まるようにします。
これにより、｢大きな画像はアップロードする前に縮小してください｣とお願いしなくても、自動的に適正サイズに縮小されます。
ただし、あまりにも過大なファイルサイズの場合はサーバで処理できずアップロードがそもそもできない事が多いので、すべてのケースをカバーできる訳ではありません。
//アップロード時の幅と高さの最大サイズ これ以上は縮小
define("MAX_W_PX", "1024"); //幅
define("MAX_H_PX", "1024"); //高さ
添付した画像がこの幅と高さの範囲を超えていたらサムネイルではなく投稿される画像そのもののサイズが範囲内に収まるように縮小されます。 設定項目が存在しない場合は、幅、高さともに1024pxで固定になります。
- お絵かきアプリの幅と高さの最低値はこの間300px固定でしたが、100x100pxの絵を描きたいという要望もあり、エンドユーザーの方が自分で改造しているケースがありました。
今回の更新で、幅と高さの最低値をconfig.phpで設定できるようになりました。
これにより、改造しなくても、100x100pxのサイズも選択可能になります。
極端な例になりますが、10x10pxの絵も描けます。
//お絵描き最小サイズ（これ以下は強制でこの値
define("PMIN_W", "300"); //幅
define("PMIN_H", "300"); //高さ
config.phpのどこでも構いませんので、上記設定項目を追加すれば、最小サイズの幅と高さを設定できます。
設定項目が存在しない時は、これまで通り最小値が300px固定になります。
- 幅300px以下の時にレイアウトが崩れていたPaintBBS NEOを独自にカスタマイズ 横幅が300px以下でも、操作に支障がでないようにPaintBBS NEOのCSSを調整しました。
これまでは、操作のためのボタンがキャンバスの内側に入り込んでいました。
ただし、この表示はオリジナルのPaintBBSと異なってしまうため、開発元のリポジトリにはプルリクエストを行わず、POTI-boardとPetit Note用の独自版とします。
といってもCSSを2行追加しただけであとは同じものです。
メール通知機能関連のコードを整理しました。削除できる箇所は削除し、未定義になる可能性のある箇所は未定義にならないように処理し、エスケープが必要な箇所にはエスケープ処理を追加しました。
メールで通知される記事のURLに投稿時刻のIDを追加して、URLをクリックした時に該当記事までスクロールするようにしました。
依存関係の脆弱性を修正して、再度ビルドしたChickenPaintを同梱しました。
これまでのPOTI-boardは、返信画面に1件のコメントしか表示しない場合でも、ログファイルに1万発言記録されている時はその1万発言分のデータを読み込んでいました。
この問題を解決するため、返信画面とカタログ画面を表示する時に、必要な部分のみをログファイルから取得できるようにしました。
掲示板の返信画面で5MBメモリを消費していた実際に運用している掲示板のメモリ消費量は半分の2.5MBですむようになりました。
該当の掲示板ではカタログモードの時にも5MBメモリを消費していましたが、2.5MBのメモリ消費量で動作するようになりました。
独自改造版のtegaki.jsを更新しました。 ブラシサイズや不透明度の数値による直接入力を改善しました。上矢印キーで数値が上がり、下矢印キーで数値が下がります。
直前の投稿に真っ白な画像が投稿されていると、同じサイズで同じく真っ白な画像が投稿不能になります。
時々、実際には何時間もかけて描いているのに時間をかけて描いたレイヤーを非表示にして真っ白な画像を途中経過として投稿する人もいます。
そのような時に、その投稿が｢同じ画像がありました。｣というエラーにならないようにするための措置です。
- アプリ固有ファイルのダウンロードの時に不正なmime typeのファイルが検出された時には、エラーになるように修正しました。
ChickenPaintの.chi形式ファイルの受信時の、mime typeチェックが行わていませんでした。
不正な投稿が成立しないように様々な工夫を凝らしてはいますが、アップデートをお願いします。
tmp/ディレクトリへの不正なファイルのアップロードが成立する可能性があります。
不正なmimeタイプのファイルは移動前にmime typeがチェックされているためsrc/ディレクトリに移動する事はありません。
拡張子はプログラム側で.chi固定になっています。不正なファイルの拡張子が.phpや、.cgi、.exeなどになる事もありません。
返信画面下段の6つ並んでいる前後のスレッドの画像の表示を改善しました。
表示しているスレッドの位置にもよりますが、現在のスレッドより手前の3つと現在のスレッドより後ろの3つに分割しました。
表示するときに、3枚+3枚で合計6枚の現在のスレッドの前後の画像を表示します。
現在の位置より手前の画像が3枚存在しない場合は、現在の画像より後ろの6枚を表示して、可能な限り、6枚の画像がならぶように調整しました。
- ChickenPaintの送信処理を古いxhrからfetch APIに書き直しました。
(PaintBBS NEO、Tegaki、klecksはすでにfetch APIを使って送信しています) - 新規投稿の時も返信の時も投稿完了後に該当スレッドを表示するようにしました。 これまでは、新規投稿時は掲示板のトップを、返信の時は該当スレッドが表示されていました。
ペイント画面で入力したものをそのままツール名としてログファイルに記録していました。
仮に不正な文字列が入力された場合でも、ログファイルのバージョンが6ではなく5として扱われるだけの被害にとどまるとは思いますが、バリデーションをほどこして、予想されるツール名以外のツール名が入力された時は空白を記録するようにしました。
出力時のバリデーションはすでに実施ずみでした。
また、ツール名にJavascriptが含まれている場合でも、テンプレートの出力時にHTMLの特殊文字はエスケープしていますので、xssなどのリスクはここには存在しません。
Web Style by BASICという表記はオリジナルのPOTI-boardを踏襲したものでしたが、英語圏ではbyに続く文字は作者名の事が多い事が多いため、Template BASICのような形式で記載する事にしました。
- search.inc.phpに、2286年問題が残っていたのを修正。(160年後の誤動作防止)
- ページングの最初のページと最後のページが表示できるようになりました。｢最後｣をクリックすると一番古い投稿を表示します。
- カタログモードの時に1ページに表示する画像の枚数が30枚で固定になっていたのを設定可能に。
- 使用したペイントツールの名称が表示されるようになりました。
- 2286年問題に対応。ユニックスタイムスタンプが11桁になっても正常に動作するようにしました。 (現実問題としては、2286年になる前にシステムが動かなくなっている可能性のほうが高いです。11桁になるのは263年後です。)
- 動画ファイルの種類、サムネイルの有り無しがログファイルに記録されるようになりました。これにより、毎回ファイルの存在確認をしなくてもよくなるため負荷を下げる事ができます。
このver6.0用に作成されたログファイルは、ver1から、ver5までのすべてのPOTI-boardで使用できます。
ver6.0で新たに追加されたログファイルの情報は古いPOTI-boardでは読み込む事ができませんが、古いバージョンのPOTI-boardでは新しく追加された情報を無視して動作します。
ログファイルの変換の必要もなく、ver6.0以後のPOTI-boardを使用した時には、新しい情報が追加され、古いログファイルにはその情報が存在しないだけです。
- テンプレートMONO使用時に、続きを描く画面で｢Tegaki｣が選択できなくなっていたのを修正しました。
- 続きを描く画面で余分な波括弧が表示されていたのを修正しました。
- 検索画面で次ページのリンクが正しく動作していなかったのを修正しました。
//管理画面へのリンクを表示する する:1 しない:0
define("USE_ADMIN_LINK", "1");
//しない:0 で、管理画面へのリンクが表示されなくなります。
設定項目が存在しない場合は、従来と同じ動作になり、管理画面へのリンクが表示されます。
検索機能が動かなくなっていました。 このバグは、v5.58.10で発生し、v5.62.2で修正されました。
｢Twitter｣以外の、｢Mastodon｣｢Misskey｣等の短文投稿SNSに投稿を共有できるようにしました。
config.phpで設定すれば以前のツイートボタンに戻す事もできます。
また、共有するMastodon、Misskeyのサーバ一覧を編集する事もできます。
英語圏最大の画像掲示板で使われているお絵かきアプリ｢tegaki.js｣に対応しました。
現時点では、続きを描くと描画アニメは消えてしまいます。
(NEOの画像から続きを描くと同じ)
非推奨のJavaScript、jQueryの構文を独自に修正したものを同梱しました。
投稿者名をコピーボタンを押したときに、テキストカーソルの位置に名前が挿入されるようになりました。
これまではテキストフィールドの文末に追加されていました。
- PaintBBS NEOをv1.6.0に更新しました。独自拡張版として運用していたバージョンを開発元にマージしていただく事ができました。
- ChickenPaintの独自修正版を同梱しました。
- WCS動的パレットスクリプトのsubstr()をsubstring()に書き直しました。 String.prototype.substr() - JavaScript | MDN MDN
古いバージョンでは、続きを描く→新規投稿を選択すると新しいスレッドへの投稿になっていました。
たとえば1枚の線画の塗り絵を10名が行う時に10スレッド必要でした。
これを1つのスレッドにまとめる事ができるようになります。
また返信として投稿されたお絵かき画像からの続きを描く時には、同じスレッドへの投稿になるようにしていましたが、こちらも返信からの新規投稿を新しいスレッドに投稿したい場合があり、自由に選択できるようにするべきという結論に達しました。
その選択のために｢同じスレッドに投稿する｣というチェックボックスを追加しました。
しかし｢画像差し換え｣の場合は同じスレッドに投稿するより他ないためこの選択肢は不要です。
そこで、JavaScriptを使って、新規投稿を選択した時のみ｢同じスレッドに投稿する｣というチェックボックスを表示するようにしました。
- 従来のお絵かき掲示板に投稿できるようにするために、生データを送信していたNEOを改造して、formDataでヘッダ、画像、動画データを送信できるようにしました。
この変更によりWAFがNEOの送信データを攻撃と判断して遮断する確率が低くなり投稿が成功する確率が飛躍的に高くなります。
NEOはこれまで生データを古い掲示板との互換性を確保するために送信してきました。今回の独自拡張でによってそれが、formDataに変わります。 現時点では独自規格ですが規格が乱立するのはよくない事ですので、開発元にプルリクエストを出しています。
- しぃペインターのデータの受信はこれまで通り、
picpost.phpで行います。
しかし、PaintBBS NEOのデータの受信は、新しく追加した、saveneo.phpで行います。
このファイルのアップロードを忘れると、NEOからの投稿ができなくなりますので、必ずアップデートしてください。
potiboard.phpと同じディレクトリに転送します。 - Paint画面のテンプレートの更新
mono_paint.blade.php
paint.blade.php
の更新をお願いします。
formDataで送信するモードに切り替えるためのパラメータが追加されています。
ここで重要なのは、neo.jsがブラウザによってキャッシュされている場合です。
新しいバージョンのneo.jsがブラウザに読み込まれる前に、その他のファイルが更新された時は、saveneo.phpによる受信に失敗します。
//PaintBBS NEOを使う 使う:1 使わない:0 define("USE_PAINTBBS_NEO", "1"); //しぃペインターを使う 使う:1 使わない:0 define("USE_SHI_PAINTER", "1"); //ChickenPaintを使う 使う:1 使わない:0 define("USE_CHICKENPAINT", "1"); //klecksを使う 使う:1 使わない:0 define("USE_KLECKS", "1"); //管理者は設定に関わらすべてのアプリを使用できるようにする する:1 しない:0 define('ALLOW_ADMINS_TO_USE_ALL_APPS_REGARDLESS_OF_SETTINGS', '1');
これまでは、PaintBBS NEOを使用するアプリから外す事ができませんでしたが、NEOを使う使わないも選択可能になりました。
すべて使わないに設定すると、お絵かき機能を使用しない設定になります。
Klecksだけ使う、ChickenPaintだけ使う設定にする事もできます。
使用するアプリが1つしか無い時はアプリ選択のプルダウンメニューが消えてすっきりした画面になります。
たとえば1分以下で描いた線だけの投稿は拒絶したい時は、
//セキュリティタイマー(単位:秒)。設定しないなら""で
define("SECURITY_TIMER", "");
で必要最低限の描画時間を指定する事ができましたが、これまでは、しぃペインターと、PaintBBS NEOにのみ有効でした。
今回の更新で、ChickenPaintやKlecksでもこの設定が有効になるようになりました。
古い方式では、違反の時は別のサイトに飛ばす(例えば警視庁のサイト)がありましたが、その方式ではなく、｢描画時間が短すぎます。あと30秒。｣といった内容のアラートが開きます。
- PaintBBS NEOとJavaのしぃペインターの動画の管理者画面からのアップロードペイントがより簡単･便利になりました。
これまで動画ファイルをキャンバスに読み込む前にキャンバスサイズを指定する必要がありました。
v5.52で、動画ファイルからキャンバスサイズを自動的に取得できるようになりました。
ただし、Java版のPaintBBSの動画ファイルのアップロード時にはキャンバスサイズの指定が必要です。(v5.22.8で解決)
HTML5版のPaintBBS NEOの動画ファイルのアップロード時のキャンバスサイズは自動取得できます。
↑
これは、しぃペインター、PaintBBS NEO、Klecks、ChickenPaintそれぞれの固有形式のファイルを管理者画面からアップロードした時の動作を紹介するために制作したGIFアニメです。
キャンバスサイズは300x300のままですが、本来のサイズでキャンバスが開いています。
PSDファイルのダウンロードができるのならアップロードは?と疑問に感じていた方への説明の意味も含めて、ChickenPaintの.chiファイルと、Klecksの.psdファイル(Photoshop形式)のアップロードも行い動画に記録しました。
- Klecksを日本語に翻訳しました。
POTI-boardにも、日本語対応版を同梱する事ができました。 この新しいバージョンのKlecksは、ブラウザの言語の優先順位を自動検出して言語を切り替えてくれます。
また、ブラウザの言語の設定にかかわらず使用する言語を指定する事もできます。
英語、ドイツ語、日本語が選択できます。
中文は簡体字のみで細部はまだ英語のままです。
日本語訳のリソースはすでに開発元に統合されています。
.pchファイル(PaintBBS).chiファイル(ChickenPaint).psdファイル(Klecks)
Klecksのレイヤー情報を含むファイルはPhotoshop形式の.psdファイルです。
ダウンロードした.psdファイルはクリスタやSAIそのほか多くのアプリで開く事ができます。
.pchと、.chiは、それぞれNEOとChickenPaintで開く事ができます。
管理者投稿過画面から.pch、.chi、.psdを添付してペイントボタンを押せば、キャンバスに読み込んで投稿できます。
- 透過PNGの透明部分がJPEG化する時に、真っ黒になっていたのを修正しました。
透明色が黒も間違いではないのですが、意図しない結果になる事が多いため、透過GIF、透過PNGからJPEGに変換する時は、透明色を白に変換します。
- 新しいペイントアプリKlecksに対応しました。
わかりやすいUIと強力なブラシが使えるアプリです。
レイヤーは8枚使えます。
数多くのフィルタが使えます。輝度を透明に変換、明るさ/コントラスト、色調補正など。
このアプリの追加にともない、管理画面からアップロードできるファイル形式に｢PSD｣が追加されました。
PSDファイルを選択してペイントボタンを押すとKlecksのキャンバスにPSD画像が読み込まれます。
- 複数の未投稿画像がある時に、一番新しい画像が投稿できるようになりました。
これまでは、コメント欄のすぐ上の画像は投稿されず画面の一番上の画像が投稿されていました。
- 返信画面の下に前後のスレッドと前後のスレッドの画像が表示されるようになりました。
- レスの画像からの続きを描く時は｢新規投稿｣もレス画像になりました。
これまでは、レスの画像から｢新規投稿｣で続きを描くと新規スレッドが作成されていました。 - 返信したあとに表示される画面がスレッドの返信画面になりました。 これまでは、どの位置のスレッドに返信しても、投稿処理が完了するとトップページが表示されていました。
- レスモード、カタログモードからの編集･削除の処理の完了時にもとの画面が表示されるようになりました。
- 続きを描いて投稿が完了した時にスレッドの返信画面が表示されるようになりました。
これまでは、35ページ目にある画像から続きを描いた場合でも投稿が完了した時にトップページが表示されていました。
そのため、投稿した画像がどこにあるのか探さなければならなくなっていました。