IE11だけmax-width: 100%;が効かない

お絵かき掲示板BBSNoteのカタログモードのモバイル端末対応作業を行いました。

BBSNote カタログモード iPhone iPad ScreenshotBBSNote カタログモード iPhone iPad Screenshot

iPad、iPhoneをChromeでエミュレート。

モバイル端末で問題なく表示できればそれでいいのかもしれないのですが、IE11で横幅を狭くしてみると…。

BBSNote カタログモード IE11

セルの幅に合わせて画像が小さくなる筈なのに…。
横スクロールバーがでてしまいました。
max-width: 100%;
が効かないようです。
width: 100%;
にすると…。

BBSNote カタログモード IE11

横スクロールバーはでなくなりましたが、元のサイズより大きく表示されてしまう画像が…。
max-width: 212px;
にすると…。

BBSNote カタログモード IE11

問題ないようです。

解像度が低い時は
width: 100%;
でも、元の画像より大きくならないし
max-width: 212px;
のように書く時は、CSS3で解像度別にセルの幅を決めてから、画像の最大幅を指定するようにすれば…。

IEで横幅を狭くした時にも、期待通りの表示になるようにCSSを書き直しました。

IEのようなレガシーなブラウザは切ってしまえばいいのに…と言われそうですが、お絵かき掲示板なのでJavaが使えるのはIEだけという事情も。
HTML5のPaintBBS NEOをつかっている方がほとんどなので、Java対応も切ってしまってもいいのかもしれないのですが…。

そして、その他のページでも…。

お絵かき掲示板交流サイト IE11

IEで横幅を狭くしてみたら…。表示が崩れて…。

お絵かき掲示板交流サイト IE11

max-width: 100%;
width: 100%;
に書き換えて対応しました。

お絵かき掲示板はこちら。

隣接する1pxのborderを重ねると1pxのborderになる

設置しているお絵かき掲示板のうちのひとつ、relmのカタログモードのモバイル対応作業を行いました。
テーブルタグ5列表示で、768pxのiPadで縮小がかかる状態でした…。

テーブルタグを撤去して、tdだったところをdivで囲って、borderで枠線をつけてみたら…。

お絵かき掲示板 relm カタログモードモバイル対応作業

枠線が多くて目にうるさいような…。

お絵かき掲示板 relm カタログモードモバイル対応作業

divをくっつければテーブルタグの時と同じ見た目に…と思いましたが、1pxのborderが隣接すると1pxのborderが2本並んでしまうので…。

お絵かき掲示板 relm カタログモードモバイル対応作業

borderが完全に重なるように修正しました。
margin: 0 -1px -1px 0;

右と下のmarginを-1px。
1pxのborderが2本あっても、完全に重なれば1pxのborderしか見えない筈なので…。

最初からこうすれば良かったのですが…。
【CSS】tableのborderが一部だけ太くなるのを回避する
このあたりの記事をななめ読みして…。

お絵かき掲示板 relm カタログモードモバイル対応作業

右と、下のborderを消して…。
.catalog div:nth-of-type(5n)

5の倍数の時は、右のborderを表示。
.catalog div:nth-last-of-type(-n+5)

後ろから5個なら下のborderを表示。
.catalog div:nth-last-of-type(1)

最後の1個なら右側にborderを表示。

そんなCSSを書いていました。
解像度別に、もし4列表示なら、もし2列表示なら、もし1列ならと何時間もかけて書きました。
divでボックスを2つ用意し、floatで横並びさせています。その2... - Yahoo!知恵袋

あれ?もっとスマートな方法があるんじゃ…と思いながら検索して見つけた記事。

参考なったのは、ベストアンサーではなくて、他の回答者の方のコメントでした。
同じ太さの線が重なって太くなるはずがないんですよ。
あ…。
無駄な作業をしていた事に気が付きました…。
しかし…。
何番目系の便利なCSSまとめ
でできる事を知るよい機会だったのかもしれません…。

お絵かき掲示板 カタログモード モバイル端末対応作業お絵かき掲示板 カタログモード モバイル端末対応作業

iPad、iPhoneをChromeでエミュレート。
カタログモードだけモバイルに対応していなかったのですが何とかなりました。

お絵かき掲示板はこちら。

お絵かき掲示板交流サイトのトップページに新着画像を表示

お絵かき掲示板交流サイトのトップページを改装して6つの掲示板を1ページにまとめました。

また、6つのお絵かき掲示板を横断して新着画像を呼び出し12枚分を表示。
掲示板を開かなくても、12枚の新着画像を確認できるようになりました。
もっと見るのリンクをクリックすれば52枚の新着画像を見る事もできます。

Screenshot PC Laptoppbbs.sakura.ne.jp_(iPad)_428_800.pngScreenshot iPhone

PC、iPad、iPhoneをChromeでエミュレート。

PCではディスプレイの幅が無駄になり、iPadでは高さが無駄になっていましたが何とか…。
そして、新着画像をクリックするとそのイラストが投稿された掲示板の返信画面になるように…。
PHP: glob - Manual
マッチするファイル/ディレクトリを含む配列を返します。
ディレクトリ名からどの掲示板なのか、掲示板のプログラムの種類は何かを判定する事はできるとして…。
POTI-boardのログファイルは1スレッド1ファイル形式ではないし、ファイル名の数字は13桁のUNIX timeなのでファイル名からレス先のスレッドの番号を取得するには…。

ログファイルを開いて画像とスレッドの番号が一致したら、返信先のリンクを作る?
掲示板の外部から掲示板のログファイルを開くなんてとても…と思いましたが、あれ?POTI-boardの改造の時におぼえたログファイルの解析方法を使えばいいのでは?
となりました。
<?php
//画像の13桁の数字
$imgno = 1529126099132;
$fp = fopen("cgi/hoge/img.log", "r"); //ログファイルの場所
while ($line = fgets($fp)) {
//ログファイルの書式から変数を取得
list($no,$now,$name,$email,$sub,$com,$url,
$host,$pwd,$ext,$w,$h,$time,$chk,$ptime,$fcolor) = explode(",", $line);
//KASIRAで指定した文字列を取り除く
//OBを取って13桁のUNIX timeにする
$time = ltrim($time, 'OB');
//取得したファイル名の
//13桁のUNIX time
//と$timeが同じならスレッドの番号は$no?
if ($time == $imgno){
$resno = $no;
break;
}
}
//レス画像かもしれないので、tree.logを見に行く
fclose($fp);
$fp = fopen("cgi/hoge/tree.log", "r"); //ログファイルの場所
while ($line = fgets($fp)) {
//ログファイルの書式から変数を取得
list($oya,,,) = explode(",", $line);
//スレッドの番号は$resnoが含まれている行の$oya
if (preg_match("/$resno/", "$line")) {
$resno =$oya;
}
break;
}
fclose($fp);
//掲示板のレス送信画面にリンク
echo '<a href="cgi/hoge/potiboard.php?res='.$resno.'">掲示板</a></br>';
//タイトルを表示
echo "$sub</br>";
//投稿者名を表示
echo "$name</br>";
?>
もし、レスでお絵かきを許可する設定にしていたら、ここまでやらないとレス先がどこなのかわからないと思いますが、幸い、レスでお絵かきする機能を使っていなかったので、tree.logの確認をする必要はありませんでした…。

BBSNote、relm、らくがきひろば、POTI-board、4種類、6つの掲示板のログファイルを開いて、レス先やイラストのタイトル、作者名まで取得する作業…。

一度に全部やるのは無理なので、掲示板のログの処理をするプログラムを先に書いておいて、動く事を確認してから組みこみました。

手間暇をかけて見やすいサイトにしたつもりです。
よろしければご利用ください。

スマートフォンやタブレット端末でも動作するPaintBBS NEOを6つの掲示板すべてに導入済みです。

Windows10だからお絵かき掲示板が使えないとか、Javaが動かないからお絵かき掲示板が使えないという問題を解決してくれる新しく作られたHTML5のペイントツールですが、見た目と操作性はしぃお絵かきです。

気軽にお絵かき PaintBBS/しぃペインター | お絵かき掲示板交流サイト

POTI-boardのエラーを減らすために $mode編

POTI-boardのエラーを減らすために書き直した箇所。
//未定義エラー対策
if (isset($mode)){
switch($mode){
case 'regist':

(長いので省略)

default:
if($res){
updatelog($res);
}else{
echo "<META HTTP-EQUIV=\"refresh\" content=\"0;URL=".PHP_SELF2."\">";
}
}
}
//default:で処理していた箇所
else {
if($res){
updatelog($res);
}else{
echo "<meta http-equiv=\"refresh\" content=\"0;URL=".PHP_SELF2."\">";
}
}
POTI-boardの警告エラー修正 - sidewalkcafe blog

switch($mode){}
の前に
if (isset($mode)){}
を入れて囲む
こちらの記事を参考にさせていただきました。
未定義の時に、レス送信モードが表示される形になっていたので未定義の時の動作をelseで。

switchのdefaultも、$modeが予期しない値になった時にindex.htmlへ移動させるために必要なので残しました。
$mode が予期しない値になるのはどんな時かというと…。例えば
potiboard.php?mode=hoge
のような時です。
hogeという値が入っているので未定義ではないけれど、switchのどのケースでもない、レス送信モードでもない、だからindex.htmlを表示となります。

この対策で、レス送信モードの時に大量にでていた$modeのNoticeが解消されました。

お絵かき掲示板 POTI-board Noticeお絵かき掲示板 POTI-board Notice

左、$modeのNotice、右、それが解消された画面。

それでもまだたくさんNoticeがでてしまっているのですが…ログファイルが蓄積されると、1行だけになるようです。

php7.2でWarningが出るので調べてみたところ、コンティニューできるかどうかの判定に関係ない記述だったのでコメントアウト。
/* コンティニュー前画面 */
function incontinue($no){
global $addinfo;

$lines = file(LOGFILE);
//コンティニューの処理に関わっていない
// $countline=count($line);
未定義エラーがでるので、初期化。
function init(){
//未定義変数エラー対策
$err='';
$chkfile=array(LOGFILE,TREEFILE);
if(!is_writable(realpath("./")))error("カレントディレクトリに書けません<br>");
それから…画面を切り替えますの文字がスマートフォンでは小さく表示されるのでviewportを設定しました。
header("Content-type: text/html; charset=".CHARSET_HTML);
$str = "<!DOCTYPE html>\n<html><head><META HTTP-EQUIV=\"refresh\" content=\"1;URL=".PHP_SELF2."\">\n";
//$str.= "<META HTTP-EQUIV=\"Content-type\" CONTENT=\"text/html; charset=".CHARSET_HTML."\"></head>\n";
$str.= "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0\">\n<meta charset=\"".CHARSET_HTML."\"></head>\n";
$str.= "<body>$mes 画面を切り替えます</body></html>";
echo charconvert($str,CHARSET_OUT);
}
本文必須の設定の時しか日本語がなければ拒絶が有効にならなくなっていたので、
GitHub - funige/neo: PaintBBS NEO
のsamplebbsの記述に合わせました。
//本文に日本語がなければ拒絶
if(strlen($com) > 0 && strlen($com) == mb_strlen($com,'utf8')) error(MSG035,$dest);
これらの修正はPOTI-board改 v1.43 lot.180713に反映されました。

お絵かき掲示板はこちら。

POTI-boardのNEOを使うをチェックした時の動作を変更

POTI-board NEOを使う テンプレート

POTI-boardのNEOを使うのチェックのあるテンプレート。

NEOを使うのチェックを外すとしぃペインターが起動するようにテンプレートを改造してみたところ…。

POTI-board NEOを使う テンプレートPOTI-board NEOを使う テンプレート

横幅が…。PaintBBSのアプレットの幅では表示されず、しぃペインターの設定になってしまいました。
NEOを使うのチェックが入っていても、
<!--{def useneo}--><APPLET-DUMMY <!--{/def}-->
も有効にならないので、テンプレート側の問題なのかなぁ…と思って調べてみましたが、NEOを使うにチェックが入っている時のpotiboard.phpの処理の問題のようでした…。
// if($w < 500 && $shi){$w = 500;}
// if($h < 500 && $shi==2){$h = 500;}
//NEOを使う時はPaintBBSの設定
if($w < 500 && !$useneo && $shi){$w = 500;}
if($h < 500 && !$useneo && $shi==2){$h = 500;}
// if($shi==1){ $dat['normal'] = true; }
// elseif($shi==2){ $dat['pro'] = true; }
// else{ $dat['paintbbs'] = true; }
//NEOを使う時はPaintBBSの設定
if(!$useneo && $shi==1){ $dat['normal'] = true; }
elseif(!$useneo && $shi==2){ $dat['pro'] = true; }
else{ $dat['paintbbs'] = true; }
NEOを使うのチェックが入っている時はPaintBBSの設定になるように…。
あまり需要がなさそうな改造なので、運営している絵板に入れて終わりになりそうですが…。

PaintBBS NEOお絵かき掲示板

ここのPOTI-boardに組み込んで、NEOを使うのチェックを外すとしぃペインター標準版が起動して、描画アニメも記録できるようにしてみました。
無料のJavaがいつまで使えるのかよくわからないのですが、2020年でサポート終了だったような?
OpenJDKなら使える?
WindowsでJavaが使えるブラウザはIEだけで、Windows10にも一応入っているようですが…。
Javaが使えない環境でも、PaintBBS NEOはHTML5なので、タブレット端末やスマートフォンでも描く事ができます。

結局のところ、しぃペインターも使えるように設定してもみんなNEOで描いてるのが現状なのですけれどね…。

お絵かき掲示板はこちら。

Cannot modify header information の原因を突き止める

php.iniを
display_errors=on
error_reporting = E_ERROR | E_WARNING | E_PARSE
にして、Warningは表示するけれど、Noticeは表示しないように設定し、以下のようにページが切り替わる秒数を15秒に書き換えて確認しました。
$str = "<html><head><META HTTP-EQUIV=\"refresh\" content=\"15;URL=".PHP_SELF2."\">\n";
1秒で切り替わる設定のままだと何が表示されているのかわからない…。

POTI-board Warning

コメントを送信した直後の「画面を切り替えます」の時に表示されるエラーメッセージ。
Cannot modify header informationが6箇所。

POTI-board Warning

投稿直後に表示されるWarning。

POTI-board WarningPOTI-board Warning

POTI-boardのエラーを減らすために 数値以外の値編: STP^3の、数値が入るべきところに文字列が入っていた問題を解消すると…。Warningがでなくなりました。

POTI-boardのエラーを減らすために header編: STP^3を書いた時は、もしかしたら…という感じだったのですが、
Warning: Cannot modify header information
が出ていた原因は、phpのエラーメッセージがheaderより先に出力されていたから…だったようです。

Cannot modify header informationが出る原因を一生懸命調べても解決しなかったのに、きれいにエラーが消えたので思わず笑ってしまいました。

一箇所気になるところがあるといえばあるのですが…。さくらのレンタルサーバのphp7.1で確認した限りでは…POTI-board改のWarningはこれで解消されたような…気がします。

POTI-boardのエラーを減らすために 数値以外の値編

Warning: A non-numeric value encountered
警告:数値以外の値が発生しました
一体何が…。
数値以外の値がなんなのか中身をechoで表示してみる事に…。
echo $ltime; //問題の変数
echo '|'; //区切り
if(RENZOKU && $time - $ltime < RENZOKU){error(MSG020,$dest);}
if(RENZOKU2 && $time - $ltime < RENZOKU2 && $upfile_name){error(MSG021,$dest);}
出力された値とエラーメッセージ。
1528807931|1528805950|1528544331|1528530938|1528527552|1528520321|1528512258|
1528508742|1528505146|1528502788|OB1528490148|
Warning: A non-numeric value encountered in C:\xampp\hoge\potiboard.php on line 946
お絵かき機能を使って投稿するとログファイルの13桁のUNIX timeの先頭にKASIRAで設定したOBが入りOB1528490148799となる事が原因でした。

現在の時間からOB1528490148を引いても数字ではないので…。
if(strlen($ltime)>10){$ltime=substr($ltime,0,-3);}
でOB1528490148799の後ろからマイクロ秒の3桁を取り除いてもOB1528490148になりますが
if(strlen($ltime)>10){$ltime=substr($ltime,-13,-3);}
とすれば10桁のUNIX time、1528490148になりになります。
(Tips)これから100年のunix時間は10桁数字。5桁の固定長文字列でも表現できる。

21世紀ののUnix時間はほぼ10桁で表せる
10桁なら…という前提付きですが、これから先100年は大丈夫…という事で。
KASIRAを廃止すれば従来の
if(strlen($ltime)>10){$ltime=substr($ltime,0,-3);}
で、問題ないんですけどね。
futaba.phpがPOTI-boardになった時点で、
//連続投稿秒数
define('RENZOKU', '10');
//画像連続投稿秒数
define('RENZOKU2', '20');
の計算が正しくできなくなっていた可能性が高い…です。
例えば、画像連続投稿秒数を60秒に設定して、お絵かきだけを繰り返すとOBの付いた数字ではないものでは引き算ができないので、60秒経過しなくても投稿できていた筈です。
しかし、画像アップロードと、テキストの投稿の時には正常に動作していたので誰も困っていなかった…のかもしれません。

この問題は、POTI-board改 v1.42.2 lot.180614で修正されました。

お絵かき掲示板はこちら。

POTI-boardのエラーを減らすために header編

headerのWarningを検証するため、正常に動作するとgoogleが表示されるように該当箇所を書き換えてみました。
// header("Content-type: text/html; charset=".CHARSET_HTML);
header("Location: http://google.com/");
XAMPPでphpのエラー表示ありで試してみると…。
Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\hoge\potiboard.php:459) in C:\xampp\htdocs\hoge\potiboard.php on line 1123
になり、googleに推移しません。
しかし、phpのエラーを表示しない設定のサーバ上ではgoogleに推移します。
Warning: Cannot modify header information
というWarningがほかにも出ていましたが、headerの出力の前にNoticeが表示された事が原因でした。

お絵かき掲示板で描いた水着のイラスト 8枚

お絵かき掲示板 水着お絵かき掲示板 水着お絵かき掲示板 水着お絵かき掲示板 水着お絵かき掲示板 水着お絵かき掲示板 水着お絵かき掲示板 水着お絵かき掲示板 水着
お絵かき掲示板で描いた、水着少女のイラスト8枚。私が描いたイラストをみてこんな形のビキニがお絵かき掲示板で話題になったりしたとかしないとか…。
スマートフォンでも描けるお絵かき掲示板だとgoogleの検索でわかるようにメタタグを書いたからなのか…。
新しい方のからの投稿が…。
投稿してくれる方が増えないかなとか、自分で絵板を設置する方が増えたらいいなとか、そんな事を考えながら。
posted by さとぴあ at 2018/06/01 00:49 | お絵かき掲示板

ペイントソフトで描いたらくがき20枚

Painter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang PaintPainter CLIP STUDIO PAINT MediBang Paint
カテゴリーをオリジナル…にと思いましたが、写真を参考にして描いたものが入っているのにオリジナルにしてしまうのは…という事で便宜的にPainterに。

主に使っているソフトがPainterなのは確かなのですが…MediBang PaintやCLIP STUDIO PAINTも使っていて3つのソフトを全部使って描く事もあります。

twitterや、pixivで観てくれている方はいても、ブログに絵を観に来る方はほとんどいないのが現状…ですけどね。
たしか、自分のイラストを掲載するブログだったという事で…。
posted by さとぴあ at 2018/05/06 14:34 | Painter