POTI改 設置サポート掲示板

chickenpaintがスマホに対応しました。
こちらも、HTMLファイルにjavascriptを仕込んで、スマホの時はNEOしか起動しないようにしていたので、テーマのHTMLの入れ替えが必要になってしまいます。
お手数をおかけしますが、よろしくお願いいたします。

現時点では設定で使用可能なのですが、
セキュリティ対策のため、トップの新規投稿フォームを終了する準備に入っています。
/* ---------- お絵かき設定 ---------- */

//お絵かき機能を使用する お絵かきのみ:2 する:1 しない:0
define('USE_PAINT', '1');
とすればとりあえずトップのフォームが開くのですが…。
すみません、まもなく使えなくなります。
おそらく次のバージョンで…。

ありがとうございます！一時的に使用したいだけなので大丈夫です！！
教えていただいたように設定してみます！

ChickenPaintの画面が選択されてしまう問題に対処しました。
Paint画面のHTMLで対応しましたので、使っているテーマのペイント画面のHTMLを上書きアップデートをお願いします。

テーマMONOの色を切り替えるCSSをプルダウンメニュー方式に変更しました。
themeフォルダ内のファイル一式の上書きアップデートになりますが、色の切り替えは従来どおりで構わないという方は
ペイント画面のHTMLのアップデートのみで構いません。

メール通知クラス
noticemail/noticemail.inc
を更新しました。
日本語以外の言語の投稿の時でもメールの文字化けが発生しないようになりました。
メール機能を使っている方で、日本語以外の言語も使いたい方は上書きアップデートをお願いします。

変更があったファイルの説明もリリースのページに記載していますので、よろしくお願いします。

Release POTI-board EVO v3.02.0

数時間ぐぐってみたり、変更した履歴を調べてみたりしてみたのですが、
決定的にこれ…というものがまだはっきりしません。
その画面が選択されてしまった状態のスクリーンショットの画像があれば、もしかすると手がかりになるかもしれません。
【css/備忘録】何をどうしてもテキスト選択してほしくない時の対処法 | ユガラボ
いろいろやってみる事はできるんですけれど、
状況が把握できない状態でとにかく入れてみるだと、逆に問題がでるかもしれませんので、その画面の状態がわかる画像が欲しいです。
v3.01.9になったからなら、元のバージョンに戻せばいいのかもしれないですし、
でも、ブラウザのバージョンがあがったからとか、iOSが更新されて発生している問題だとしたら、それでは解決しないですし…。
Windows上のChromeでiPad表示のエミュレートはできるのですが、選択されるのはなぜなのかはよくわかりません。

画像添付致します。なにかわかればいいのですが…。
選択させないタグというのもあるんですね。
今までも、描画中に画面の外で何かが選択されることがあったので、あると便利ですが、余計おかしくなるのも怖いですね…

ちなみにこれはChromeの画面ですが、Safariでも同じ挙動で同じ画面になります。
フルスクリーンに切り替えてもワークスペースが選択されるのは変わりません。

ちょっと前のバージョンに落としてテストしてみますね。
掲示板二つあるので、片方を前のバージョンに戻してみます。0238

3.00.3でも同じ挙動をしたので、3.00.1まで遡ってみました。外国語版だった奴です。
そしたら添付のようになって、全選択されなくなりました。画面の一部が選択されるのは変わらず。
何か手がかりになればいいのですが。

ちょっと気になったので、選択の色を透明にするタグを入れて見たのですが、透明にはならなかったので、以下のようにチキンペイントだけ選択しないタグを入れてみたら、最新版でもワークスペースが選択できなくなりましたので報告します。
メインで使っている掲示板にも同じタグを入れて様子を見てみますね。
とりあえずご報告でした。

メインで使っている掲示板を最新版に戻して、上記のタグを入れて動作確認したら、ワークスペースが選択されなくなり、何の問題もなくお絵描きが投稿できたのを確認しました。
ひとまず解決したのでありがとうございます。もうしばらくこれで使い続けてみます。

ありがとうございます。
あれからいろいろ調べてみました。
ChickenPaintにも最初から選択させないようにするCSSが入っていますが、例えばFirefoxでは無効でした。
Firefoxの開発元のMozillaによると、
Chromeの動作は仕様書を無視しているとの事で、Chromeでは問題なさそうに見えても、他のブラウザでは選択させないCSSが効かない可能性があるようです。
そして、ぐるぐるめーさんが試した
設定の場合は、
Firefoxでも、選択させないが有効でした。
この方法が一番いいという結論になりました。
ChickenPaintの開発元での対応をお願いできるかは今のところ不明ですので、POTI-board側で対応する事にします。

色々調べていただいてありがとうございます。
このタグが最適解だったのですね！今のところ動作に問題が出ていないので、お役に立てて何よりです。
さとぴあさんが引っ張て来てくださったサイトのおかげです。ありがとうございました。

v3.00.3からアプデする場合とあるのですけど
自分のがなにかがわかりません。
どこを見ればわかりますか？

v3.00.3よりも前な感じなので（わからないので）とりあえずアプデしてみますっ

うっ…できませぬ…

・Source code(zip)をダウンロード
・potiboard.phpを上書きアップデート
・search.phpを上書きアップデート
・chickenpaintをフォルダごとFFFTPのとこに入れた（pink,theme,theme_nee2のフォルダと並ぶ感じで）
・pinkのフォルダの中のpink_paintとpink_otherのテンプレートを上書き
・theme→cssのフォルダにあるmono_dark mono_deep mono_main mono_mayo
を上書き（？）

しました。

pink_mainの上書きが足りなかったようですっ
無事実装できました～っ！！！
ありがとうございますっ

あぁぁぁダメでしたぁ（泣
描けるけど保存ができませんですー

レス遅れてすみません。
save.php
を
potiboard.php
と同じフォルダに入れてみてください。

save.phpはこの画像の赤丸のファイルです。
ChickenPaintの画像を保存するためのファイルです。

できましたっ！
ありがとうございます～っ！！！

ChickenPaint日本語対応版、起動画面。

描けるけれど、パレット類を動かすと、画面がスクロールまたは、何も描けないはないでしょうか?
iPadの実機を持っている方に試してみて欲しかったんです。
そうですね。モバイル判定を横幅768pxより下のデバイスに限定すれば、起動しないのはスマホだけになりますね。

お絵描きに関しては、板タブより挙動が安定している上に、筆圧検知して入り抜き表現までできたんです！
板タブだとペン先に引っ張られて数値がガチャガチャになるカラーピッカーやペンサイズなども、ピタッと選択出来ていました。

ただ、欠点は、ツールを全く移動できないので、自分の作業しやすいようにツールを配置できないというネックがありますね。
お絵描き掲示板形式では無いので、描いたデータはaco形式という怪しい形式で、どんな画像ソフトでも開けませんでした。

こんな使い心地ですが、知りたいことがある場合はいくらでも協力致します！

一応URL欄に私が設置した、さとぴあさんが配布していたほうの掲示板のURLを載せます。
もし問題ないようであれば、テストとして私のサーバーにアップしている、おおもとが配布していたビルド済みのChickenpaintのテストボードのURLも貼りましょうか？
こういう場合、リンク周りに関してはどうしたらいいかわからないのでちょっと慎重に行きます…。

https://pbbs.sakura.ne.jp/localPaintBBS/chickenpaint/
↑
ここにHTMLファイルを設置してみました。
リリースに入っているファイル全部だと、PSDファイルが入っていたり、ファイルがたくさんあるので、local用はファイルを整理したほうがいいですね。
そのうちまとめます。

描いたデータはaco形式という怪しい形式で、どんな画像ソフトでも開けませんでした。
Photoshopで開く事ができる自分で作ったパレットの色ですね。
それに加えて、png画像、そしてレイヤー情報が入った.chiという形式のファイルが連続してダウンロードされる…と思います。

たしか、タブレットのWindows inkをonにすると筆圧が有効になりますが、やっぱりパレットを移動できません。

多少問題があっても使いたいという事であれば、スマホ判定の処理をiPadより小さなデバイスのみにするなどの対応はできると思います。
トラブルになるかもしれないものはとりあえず使えなくしておくのがいいのか、それでも使えるようにしたほうがいいのか、判断に迷うところです。
モバイルでも使えるようにする、しないの設定もやろうと思えばできますね…。

テスト用の設置ありがとうございます。
もしかして、あえて筆圧設定を切っていますか？フルセットだった時は筆圧で太さが変わっていたのですが、さとぴあさんが設置したバージョンだとペンの太さが一定ですね？🤔
でもやっぱりツールボックスは移動できないようです。
画像はフルセットをアップしたバージョンで描いたスクショです。
さとぴあさんが設置してくださったバージョンでは全てのツールの太さが変わりませんでした。
フルセットのどのファイルが必要でどれが要らないかは私では判断できないので、必要な分だけまとめていただけたらありがたいです。

poti改ニ上ではどんな挙動をするのか気になるので、ちょっとiPadでもかけるバージョンをテストさせていただきたいです。

失礼しました。筆圧生きてました。
やっぱり動作が不安定で、筆圧が死んだり生きていたり当たり外れあるみたいです。何だったんだろう…。🤔
改ニ版の動作がますます気になります。

なんというか、ChickenPaintのどのファイルがどんな関係にあるのか、いまいち理解できていないところがあるので、もう少し時間ください。
それから、ファイルの構成が変わらない限り、改二とHTMLファイルの動作は同じ筈です。
サイズの変更や、続きから描く時のファイルの読み込みの処理が追加されているだけです。
改二のPaint画面のソースを開くと、たったこれだけ?というHTMLのソースが見えると思います。

おわあ…確かに、HTMLソースでひっぱってきているJavaファイルの構成は変わらないんですね…。フルセットにあんなに沢山ファイルが同梱されている意味とは…。

試しにPCからWindows inkをオンにした状態で書いてみたら、画面が動いて、筆圧も死んでいるし、ペンのサイズも変わらないしで、まったく描画できませんでした。鉛筆と水彩のブラシは描画すら不可能でしたね。
windows inkをオンにしたときの挙動と、iPadで描いた時の挙動は全く別物です。
そして、Windows inkをオフにしたときのPCからの挙動とiPadからの挙動も全くの別物でした。

どんなファイル構成になっているか解明するのはすごく大変だと思うので、無理だけはなさらないで、時間をかけて解明していただけたらと思います。いつまでもお待ちしています。
今のままでも十分遊べるので、のんびりお待ちしています。いつもありがとうございます。

作者の方の記述によれば、Windows8、Windows10のWindows inkをサポート。
Windows7は非対応。
Native pen pressure support via Pointer Events is available for IE, Edge, Firefox and Chrome on Windows 8 and 10 (Windows 7 does not support it), and macOS.
こちらの環境では古いIntuos3で、デジタルインク(Windows ink)をonにすると、筆圧が有効になっています。

ところでiPadの実機を持っていないので教えてほしいのですが…。

パレットのメニューが動かせなくても何とか描けている感じでしょうか?

使っているiPadの画面の大きさはいくつですか?
表示できる解像度は768px?それとも1024?
液晶そのものはその2倍の
768x2=1536
1024x2=2048
の解像度だと思いますが、
サイズがわかるようでしたら、その画面サイズがあればmobile扱いしないようにする事はできます。

あとは、
Windowsでは、スペースキーを押せば、
画面を移動できるので、パレットで見えなくても何とかなりますが、
iPadでも絵を描くキャンバス部分を移動したり拡大縮小したりできている感じでしょうか?

私の板タブはwacom Intuos Pen & Touch medium Mサイズ CTH-680/S0なので、だいぶ古いので、Windows inkをオンにするとまったく描画できませんでしたね。Windows10に対応していないのかもしれないです。

わたしのiPadはiPadpro11インチなので、
デバイスピクセル 2,388 x 1,668
CSSピクセル 1,194 x 834
となっているようです。

パレットは✖ボタンで消すことができるし、上のコマンドバーから呼び出すこともできるので、適宜消せば描画の邪魔になりません。
ただ、コマンドバーから拡大縮小したり、画面回転コマンドをオンにしてくるくる回すことは可能ですが、指でピンチイン、ピンチアウトは一切できないですし、指でくるくる回すこともできません。そして、描画画面のスライドバーで画面をスライドすることは一切できないです。スライドバーがしたと右に表示されていても、指やペンでスライドバーを動かす動作は一切受け付けないです。固定ですね。
この場合はiPad自体を横に傾けたり、もしかしてキャンバスサイズを縦長に指定することが可能だったら、縦表示でも描画に差し支えないかもしれないです。

そして一番大事なことですが、PCからWindows inkをオフにして書いた時よりも、iPadから描画したときのほうがはるかに絵が綺麗に描けます。

こんな感じでいかがでしょうか？

だとすると、横768pxのデバイス(iPadの第一世代)までは起動可能…に一応変更してみましょうか?
これは、テンプレート側のJavaScriptで決めてリルので、入れ替える必要がでてくるのは
PINKのテンプレート一式になります。
今から作業しますので、よろしくお願いします。
作業が終わったらまたここに書き込みます。

POTI-board ChickenPaint 対応版
を更新して、マルチタッチかつ、デバイスの幅が768pxより小さな時にmobile用の画面と処理になるように変更しました。
つまりiPadでは、PC表示になります。
同時にしぃペインターも選択できるようになってしまいますが、iPadでどうなるのかはわかりません。
著作表示にChickenPaintを追加してスタイルシートも更新しましたので、
PINKフォルダをまるごと全部上書きアップデートしていただくのが一番確実です。
ひとりで描く分はおそらく問題ないと思いますが、続きを描く時に、画像以外にも特定フォーマットのファイルがあると、しぃぺならしぃぺ、NEOならNEO、ChickenPaintならChickenPaintが起動しますので、続きを描く時に問題が発生する可能性はゼロではありません…。

動作確認してみたところ、テストベッドと同じ挙動で、無事に画像も投稿ができました。手袋をしないと静電気が反応して変な線が出る場合があるのは、iPadでは仕方ないのですが、問題なく絵が描けました。
ただ一点、縦のカンバスサイズのマックスサイズは700でギリです。
カンバスを移動することができないので、これより大きいサイズはズームアウトをしないとフレームアウトして描くことができませんでした。ズームアウトすれば描けます｡工夫が必要ですね。

しいペインターも動かしてみましたが、こちらは2分間のcheerpjの起動ののち、画面が出ますが、描画はやっぱりできませんでした。残念。coolsolidで試していたので、これは想定通りでした。

ちょっとツールボックスをオンオフする手間が必要ですが、筆圧は感知しますし、綺麗な絵が描けます｡縦700以上描けないことを設定すればいけると思います！

縦700px以上の時にキャンバスが隠れるのは、WindowsのPC表示でも同じですが、
しぃの｢窓｣と同じようなモード
フルスクリーンモードにすると、Windowsでは表示できるようになります。
ただ、この画面を見る限りすでにかなり下まで伸びた状態ですね…。

ありがとうございます！フルスクリーンだと、縦1000まで描けました！
それから、指二本を付けて描画するとちょっと3Dっぽい絵が描けました🤣
面白いですね！ちょっとこれは色んな表現ができそうです。

対応ありがとうございました！色々遊んでみます！

1000まで行けましたか…。

先ほどはTwitterにお知らせありがとうございました。無事に設置できて、パレットの移動やクリッピングマスクの動作も確認できました。ありがとうございます！
多分、なんですけど、左手デバイスや外付けキーボードでスペースキーやショートカットを押せばたぶんキャンバスの移動もできるようになっているのではないかなと思います。私は持ってないので、キャンバスは動かせませんが‥。でも、キャンバスがぐらぐらするとそれはそれで困るので、これはこれでいいと思っています。

ただ、指二本で変な模様が描けてしまうバグ技は使えなくなってしまいましたね💦ちょっと残念。

でもほんとに開発者さんに掛け合っていただいてありがとうございました。開発者さんもこんな短時間で対処してアップグレードしてしまうのすごいですね。
本当に何から何までありがとうございます。

あ！できました! 指二本や三本でペンツールを使った時だけ変な模様が描けるバグ技健在でした！嬉しい！！本当にありがとうございました！

ビルド版のリリースは2018年時点のファイルしかありませんでしたが、自分でnpm インストールしてビルドできるプログラマーの人たちは自分で最新版をソースコードからビルド(コンパイル)していました。
自分でビルドできれば、常に最新版を使う事ができます。
それが私にはできなかったので、最新版のビルド済みのものを公開して欲しいとお願いした…という感じです。
つまり作者の方のお絵かき掲示板では、かなり前から新しいバージョンのChickenPaintが使われていたという事になります。
それから、
これから作業になりますが、
potiboard.phpの更新が必要になります。
レイヤー情報が入っている　拡張子　.chi
のファイルの削除処理が入っていないので、
画像を削除してもファイルサイズが大きな.chiファイルは削除されないというバグが今のバージョンにはあります。
数時間後には更新が終わっている筈ですので、作業が完了し次第またここに書き込みます。
よろしくお願いします。

パレット切替機能がonになっているようですが、
プロ用のパレットデータがアップロードされていないようなので

satopian/potiboard_plugin: お絵かき掲示板 POTI-boardのための外部phpプログラム https://pbbs.sakura.ne.jp/
↑
ここから落としてください。
いろいろなものがごちゃまぜになっていますが、必要なのはpalette.datが入っているパレットのzipファイルだけです。
まぁ…プロパレットを選択しても、ChickenPaintでは使えませんが…。
potiboard_plugin/another_pallet at master · satopian/potiboard_plugin
↑
使い方はここ。

satopian/POTI-board_ChickenPaint: POTI-board ChickenPaint 対応版
potiboard.phpを更新しました。
ChickenPaint独自フォーマットの削除処理を追加しました。
よろしくお願いします。

ああ！Chickenpaintのことばかり考えていたので、やこうさんパレットDLするの忘れてました！すみません、チェックしていただいて…。全然気づいてませんでした。
もう一つの掲示板ではずいぶん前に装備していたんですけどね。
ご指摘ありがとおうございます。

それから、更新もありがとうございます。早速更新作業をして対応いたしました。
またまたそそっかしくて、CSSでカラーチェンジしていたのを失念していて、カラーチェンジしたCSSファイル上書きしちゃったので、また作業しないといけないんですけどね…。
どうしてもサイトがダークテーマなので、明るい色合いが馴染まなくて、勝手ながらカラーのところだけCSSファイルを書き換えさせていただいてました。他の部分はおっかないので、コンフィグ以外手を付けていません…💦

あ、あと、iPad用の外付けキーボードを持っている人に動作確認をお願いしたら、外付けキーボードのスペースキーを押せば、キャンバスをどこにでも移動できることが判明しました。私はキーボード持っていないので、キャンバスは固定で使うことになりますが、もし外付けキーボードや左手デバイスを持っているiPad絵描きさんがChickenpaintを使う場合は、外付けキーボードや左手デバイスをつければキャンバスが移動できたりショートカットが使えるとお伝えください！

これから板を大事に育てていこうと思います。何から何まで、対応ありがとうございました。

色は変更で大丈夫です。
BBSNoteも、毒々しい青色がデフォルトで、なんでこんな色…と思ったものでした(笑
色も、HTMLも変更可能ですので、カスタマイズよろしくお願いします。

実際の運用上どうなるのか、わからない点もありますが、拡大するだけなら、

<?php
//サムネイル作成
//210203 コード整理
//201218 webp形式対応
defined('PERMISSION_FOR_DEST') or define('PERMISSION_FOR_DEST', 0606); //config.phpで未定義なら0606

function thumb($path,$tim,$ext,$max_w,$max_h){
if(!gd_check()||!function_exists("ImageCreate")||!function_exists("ImageCreateFromJPEG"))return;
$fname=$path.$tim.$ext;
$size = GetImageSize($fname); // 画像の幅と高さとタイプを取得
// リサイズ
$out_w = $size[0] * 2;//端数の切り上げ
$out_h = $size[1] * 2;

switch (mime_content_type($fname)) {

このコードは
thumbnail_gd.php
を改造したものです。
元の画像の2倍のサムネイルを作ります。
ただ、このコードは最終的にjpeg画像を出力するので、そこをpngに書き換えなければいけないのと、
画像添付によるアップロードで大きな画像が投稿されたときにも、pngのまま2倍のサイズで出力する事になってしまうので、たとえば、大きな画像を投稿してもサムネイルができるから大丈夫…ではなくなります。
結局2倍のサイズの画像を作るだけならすぐにできますが、
実際の運用を考えると現実的ではない事がいろいろでてきます。
現時点では…。このサイズだったらjpgで縮小したサムネイル、でなければ2倍のサムネイル、あるいは投稿する画像はすべてサムネイルといった処理が考えられますが、GDを常に使うのもサーバの負荷になるのかもしれませんし…。
各自でやっていただく形になるかもしれないですね。
｢GD 画像 拡大縮小｣で検索するといろいろでてくると思います。

そして、HTMLの幅と高さの設定で縮小する事になりますので、デフォルトテーマのテンプレート一式は比較的新しいものが必要です。
デフォルトテーマにはHTMLの幅と高さが長らく入っていませんでしたので、その調整も必要です。
そして画像を2倍にしたら、表示は1/2になるようにするには、CSSによる縮小も考慮する事になりますので、PHPとテーマのHTMLとCSSも意図どおりに調整する必要がでてくるのかもしれません…。
できる人なら、すすっと解決するのかもしれないのですが…。

試しに拡大処理の箇所だけ関数化してみました。
$im_png=png2size2($dest);
rename($im_png,$dest);//2倍の画像で上書き
のように書くと投稿する画像が2倍になります。
HTMLの幅と高さは元のサイズになるようにすれば、画像は2倍で表示は1/2になります。

function png2size2 ($src) {
global $path;
if(mime_content_type($src)==="image/png" && gd_check() && function_exists("ImageCreateFromPNG")){//pngなら2倍に拡大
list($w,$h) = GetImageSize($src); // 画像の幅と高さを取得

$out_w=$w*2;//2倍に拡大
$out_h=$h*2;

if($im_in=ImageCreateFromPNG($src)){
$dst = $path.pathinfo($src, PATHINFO_FILENAME ).'.png.tmp';
if(function_exists("ImageCreateTrueColor")&&get_gd_ver()=="2"){
$im_out = ImageCreateTrueColor($out_w, $out_h);
// コピー＆再サンプリング＆拡大
if(function_exists("ImageCopyResampled")&&RE_SAMPLED){
ImageCopyResampled($im_out, $im_in, 0, 0, 0, 0, $out_w, $out_h,$w,$h);
}else{$nottrue = 1;}
}else{$im_out = ImageCreate($out_w, $out_h);$nottrue = 1;}
// コピー＆拡大
if($nottrue) ImageCopyResized($im_out, $im_in, 0, 0, 0, 0, $out_w, $out_h,$w,$h);
// 2倍になった画像を保存
Imagepng($im_out, $dst);
// 作成したイメージを破棄
ImageDestroy($im_in);
ImageDestroy($im_out);
if(!chmod($dst,PERMISSION_FOR_DEST)){
return;
}
return $dst;
}
}
return false;
}

動画から続きを描く時に、キャンバスサイズを画像で判定しているので、2倍のキャンバスの中に1/2の画像がでてきました。
画像から続きを描くと2倍の画像の続きを描くことになります。
別途サムネイルだけでこの処理を行うか、高解像度用モニターのための画像フォルダを新しく作ってそれ用の処理にするか…。
サムネイル処理による縮小が必要な時もあるはずですが、その表示サイズも2倍にするのか…。
2倍にするだけなら簡単なのですが、課題が多いですね。

詳しくご説明いただきありがとうございます！
なるほど画像添付や続きを描くの処理などなかなか厳しい部分が多いと感じました。
質問なのですが、逆にお絵描き画面を1/2サイズで表示するなどは可能でしょうか？（通常ですと等倍以下には縮小できませんが…。）
ちなみにブラウザ上で1/2サイズ表示にして2pxのペンで描画したところ線が荒れて見えてしまったのですが、同じような形になりますかね？

+-による等倍以下の縮小ですか…。
ブラウザで拡縮する以外の方法はこちらではわかりません。
ただ、投稿した画像をすべて1/2のサイズで表示するだけならできるかもしれません。
300x300の画像が150x150pxで表示される形ですね。
実体データは何も変わらないので、続きを描いても、添付画像を投稿しても問題は起きにくいです。
ただ、見た目は1/2になります。

等倍の場合。
これをCSSで1/2に縮小表示します。

画像の最大幅をCSSのカルクで計算して1/2にしています。
calc(100% / 2)
元の画像の1/2のサイズで表示するだけなら、CSSを修正するだけでできますね。

ありがとうございます！！
ブラウザ縮小かけてご教授いただいた1/2サイズで表示する形でやってみます！！

(100%/2)は、50%なので、
max-width: 50%;
height: auto;
で良かった…という。

追記ありがとうございます！
コード承知致しました！！